fix(Button): Add missing aria-label to buttons without icons (#368)

aws · Sep 23, 2021 · 68cd67e · 68cd67e
1 parent f591166
commit 68cd67e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx
@@ -34,6 +34,12 @@ describe('Button', () => {
             expect(queryByRole('progressbar')).not.toBeInTheDocument();
         });
 
+        it('renders with an aria-label', () => {
+            const props = { variant, label: 'some label' };
+            const { getByRole } = render(<Button {...props}>test</Button>);
+            expect(getByRole('button')).toHaveAttribute('aria-label', props.label);
+        });
+
         describe('when loading', () => {
             it('disables button and renders a loader without icon from props ', () => {
                 const props = { loading: true, variant, icon: 'add_plus' as ButtonIconType };

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -96,6 +96,7 @@ const muiButtonProps = ({
     href,
     icon,
     iconAlign,
+    label,
     type = 'button',
     size = 'medium',
 }: Partial<ButtonProps>): MaterialButtonProps => {
@@ -116,6 +117,7 @@ const muiButtonProps = ({
         onClick,
         type,
         size,
+        'aria-label': label,
         ...(icon && { [iconAlign === 'right' ? 'endIcon' : 'startIcon']: <ButtonIcon type={icon} /> }),
         ...(loading && { startIcon: <OffsetCircularProgress /> }),
         ...getVariantProps(),
@@ -163,6 +165,7 @@ const Button: FunctionComponent<ButtonProps> = ({
                         loading,
                         icon,
                         iconAlign,
+                        label,
                         type,
                         size,
                     })}