diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx index 801bc4b9..87211536 100644 --- 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(); + 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 index 31320ee3..91df0f7d 100755 --- 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): MaterialButtonProps => { @@ -116,6 +117,7 @@ const muiButtonProps = ({ onClick, type, size, + 'aria-label': label, ...(icon && { [iconAlign === 'right' ? 'endIcon' : 'startIcon']: }), ...(loading && { startIcon: }), ...getVariantProps(), @@ -163,6 +165,7 @@ const Button: FunctionComponent = ({ loading, icon, iconAlign, + label, type, size, })}