fix: add label prop to icon button (#514)

* fix: add label prop to icon button

* fix: snackbar using IconButton label

* fix: add missing label to IconButton container

* fix: snackbar test

Author: dornelasnelson

package-lock.json

@@ -6,35 +6,35 @@ import { TrashIcon } from '../../../icons';
 describe('Experimental: IconButton', () => {
     it('renders an icon button with the provided icon', () => {
         const onPress = jest.fn();
-        render(<IconButton onPress={onPress} Icon={TrashIcon} />);
-        expect(screen.getByTestId('standard-icon-container')).toBeInTheDocument();
+        render(<IconButton onPress={onPress} Icon={TrashIcon} label="Icon label" />);
+        expect(screen.getByRole("button", { name: "Icon label"})).toBeInTheDocument();
     });
 
     it('calls onPress when clicked', () => {
         const onPress = jest.fn();
-        render(<IconButton Icon={TrashIcon} onPress={onPress} />);
-        screen.getByTestId('standard-icon-container').click();
+        render(<IconButton Icon={TrashIcon} onPress={onPress} label="Icon label"/>);
+        screen.getByRole("button", { name: "Icon label"}).click();
         expect(onPress).toHaveBeenCalledTimes(1);
     });
 
     it('does not call onPress when disabled', () => {
         const onPress = jest.fn();
-        render(<IconButton Icon={TrashIcon} onPress={onPress} isDisabled />);
-        screen.getByTestId('standard-icon-container').click();
+        render(<IconButton Icon={TrashIcon} onPress={onPress} isDisabled label="Icon label"/>);
+        screen.getByRole("button", { name: "Icon label"}).click();
         expect(onPress).toHaveBeenCalledTimes(0);
     });
 
     it('does not call onPress when is loading', () => {
         const onPress = jest.fn();
-        render(<IconButton Icon={TrashIcon} onPress={onPress} isLoading />);
-        screen.getByTestId('standard-icon-container').click();
+        render(<IconButton Icon={TrashIcon} onPress={onPress} isLoading label="Icon label"/>);
+        screen.getByRole("button", { name: "Icon label"}).click();
         expect(onPress).toHaveBeenCalledTimes(0);
     });
 
     it('sets the right sizes for standard variant', () => {
         const onPress = jest.fn();
-        render(<IconButton Icon={TrashIcon} onPress={onPress} />);
-        const iconContainerInstance = screen.getByTestId('standard-icon-container');
+        render(<IconButton Icon={TrashIcon} onPress={onPress} label="Icon label"/>);
+        const iconContainerInstance = screen.getByRole("button", { name: "Icon label"});
         const containerStyle = window.getComputedStyle(iconContainerInstance);
         expect(containerStyle.width).toBe('2.5rem');
         expect(containerStyle.height).toBe('2.5rem');
@@ -43,8 +43,8 @@ describe('Experimental: IconButton', () => {
 
     it('sets the right sizes for tonal variant', () => {
         const onPress = jest.fn();
-        render(<IconButton Icon={TrashIcon} onPress={onPress} variant="tonal" />);
-        const iconContainerInstance = screen.getByTestId('tonal-icon-container');
+        render(<IconButton Icon={TrashIcon} onPress={onPress} variant="tonal" label="Icon label"/>);
+        const iconContainerInstance = screen.getByRole("button", { name: "Icon label"});
         const containerStyle = window.getComputedStyle(iconContainerInstance);
         expect(containerStyle.width).toBe('3.5rem');
         expect(containerStyle.height).toBe('3.5rem');
@@ -53,7 +53,7 @@ describe('Experimental: IconButton', () => {
 
     it('spinner is rendered when loading', () => {
         const onPress = jest.fn();
-        render(<IconButton Icon={TrashIcon} onPress={onPress} isLoading />);
+        render(<IconButton Icon={TrashIcon} onPress={onPress} isLoading label="Icon label"/>);
         expect(screen.getByTestId('iconbutton-spinner')).toBeInTheDocument();
     });
 });

src/components/experimental/IconButton/IconButton.spec.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import styled from 'styled-components';
 import { ButtonProps, Button } from 'react-aria-components';
+import { VisuallyHidden } from 'react-aria';
 import { IconProps } from '../../../icons';
 import { getSemanticValue } from '../../../essentials/experimental';
 import { InlineSpinner } from '../InlineSpinner/InlineSpinner';
@@ -10,6 +11,7 @@ export interface IconButtonProps extends ButtonProps {
     isLoading?: boolean;
     variant?: 'standard' | 'tonal';
     Icon: React.FC<IconProps>;
+    label: string;
 }
 
 const StandardIconContainer = styled(Button)<Omit<IconButtonProps, 'Icon'>>`
@@ -109,6 +111,7 @@ export const IconButton = ({
     Icon,
     variant = 'standard',
     onPress,
+    label,
     ...restProps
 }: IconButtonProps): ReactElement => {
     const Container = variant === 'standard' ? StandardIconContainer : TonalIconContainer;
@@ -120,13 +123,21 @@ export const IconButton = ({
             isDisabled={isDisabled}
             isActive={isActive}
             isPending={isLoading}
+            label={label}
             {...restProps}
         >
-            {isLoading ? (
-                <InlineSpinner data-testid="iconbutton-spinner" color={getSemanticValue('on-surface')} size="medium" />
-            ) : (
-                <Icon data-testid="iconbutton-icon" />
-            )}
+            <>
+                {isLoading ? (
+                    <InlineSpinner
+                        data-testid="iconbutton-spinner"
+                        color={getSemanticValue('on-surface')}
+                        size="medium"
+                    />
+                ) : (
+                    <Icon data-testid="iconbutton-icon" />
+                )}
+                <VisuallyHidden>{label}</VisuallyHidden>
+            </>
         </Container>
     );
 };

src/components/experimental/IconButton/IconButton.tsx

@@ -18,7 +18,7 @@ test('renders the dismiss button when hasDismissButton is true and calls onDismi
             <span>Test Snackbar</span>
         </Snackbar>
     );
-    const dismissButton = screen.getByTestId('snackbar-close-icon');
+    const dismissButton = screen.getByRole("button", { name: 'Close snackbar'});
     fireEvent.click(dismissButton);
     expect(onDismiss).toHaveBeenCalledTimes(1);
 });

src/components/experimental/Snackbar/Snackbar.spec.tsx

@@ -50,10 +50,9 @@ const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
             {children}
             {hasDismissButton && (
                 <DismissButton
-                    data-testid="snackbar-close-icon"
+                    label="Close snackbar"
                     Icon={() => <XCrossIcon size={24} color={getSemanticValue('inverse-on-surface')} />}
                     onPress={onDismiss}
-                    aria-label="close"
                 />
             )}
         </Container>