fix(ui-components): styling issues in CloseButton (#51883)

tools/ui-components/src/close-button/close-button.test.tsx

@@ -10,6 +10,12 @@ describe('<CloseButton>', () => {
     expect(screen.getByRole('button')).toBeInTheDocument();
   });
 
+  it('should have "Close" as the default label', () => {
+    render(<CloseButton onClick={jest.fn()} />);
+
+    expect(screen.getByRole('button', { name: 'Close' })).toBeInTheDocument();
+  });
+
   it('should set "aria-label" to "label" prop', () => {
     const expectedLabel = 'Close me please';
     render(<CloseButton label={expectedLabel} onClick={jest.fn()} />);

tools/ui-components/src/close-button/close-button.tsx

@@ -15,18 +15,41 @@ export function CloseButton({
   onClick
 }: CloseButtonProps): JSX.Element {
   const classes = [
-    'text-xl font-bold leading-none appearance-none opacity-20',
-    'hover:opacity-50 focus:opacity-50',
+    // Remove browser's default styles
+    'bg-transparent',
+    'border-none',
+    // Text styles
+    'text-lg',
+    'font-bold',
+    'text-foreground-primary',
+    // Active state
+    'active:before:w-full',
+    'active:before:h-full',
+    'active:before:absolute',
+    'active:before:inset-0',
+    'active:before:border-3',
+    'active:before:border-transparent',
+    'active:before:bg-gray-900',
+    'active:before:opacity-20',
+    // Focus state
+    'focus:outline-none', // Hide the default browser outline
+    'focus-visible:ring',
+    'focus-visible:ring-focus-outline-color',
+    // Content positioning
+    'flex',
+    'justify-center',
+    'items-center',
+    // Others
+    'w-[24px]',
+    'h-[24px]',
+    'opacity-50',
     className
   ].join(' ');
+
   return (
-    <button
-      aria-label={label ?? 'Close'}
-      className={classes}
-      onClick={onClick}
-      type='button'
-    >
-      ×
+    <button className={classes} onClick={onClick} type='button'>
+      <span className='sr-only'>{label ?? 'Close'}</span>
+      <span aria-hidden>×</span>
     </button>
   );
 }