fix: add label prop to icon button

Author: dornelasnelson

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

@@ -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.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,9 +11,10 @@ export interface IconButtonProps extends ButtonProps {
     isLoading?: boolean;
     variant?: 'standard' | 'tonal';
     Icon: React.FC<IconProps>;
+    label: string;
 }
 
-const StandardIconContainer = styled(Button)<Omit<IconButtonProps, 'Icon'>>`
+const StandardIconContainer = styled(Button)<Omit<IconButtonProps, 'Icon' >>`
     height: 2.5rem;
     width: 2.5rem;
     border-radius: 100%;
@@ -109,6 +111,7 @@ export const IconButton = ({
     Icon,
     variant = 'standard',
     onPress,
+    label,
     ...restProps
 }: IconButtonProps): ReactElement => {
     const Container = variant === 'standard' ? StandardIconContainer : TonalIconContainer;
@@ -122,11 +125,14 @@ export const IconButton = ({
             isPending={isLoading}
             {...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>
     );
 };