fix(button): add aria labels for accessibility

box · Jul 26, 2023 · d249a01 · d249a01
1 parent 50e7fe0
commit d249a01
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 4 deletions.
diff --git a/src/components/button/Button.js.flow b/src/components/button/Button.js.flow
@@ -7,6 +7,8 @@ import LoadingIndicator from '../loading-indicator';
 import RadarAnimation from '../radar';
 
 type Props = {
+    /** ariaLabel defines a string value that labels the current element */
+    ariaLabel?: string;
     /** Child components for the button, generally localized text */
     children?: React.Node,
     /** Custom class for the button */
@@ -54,7 +56,7 @@ class Button extends React.Component<Props> {
     };
 
     render() {
-        const { children, className, isDisabled, isLoading, isSelected, setRef, type, showRadar, ...rest } = this.props;
+        const { ariaLabel, children, className, isDisabled, isLoading, isSelected, setRef, type, showRadar, ...rest } = this.props;
 
         const buttonProps = omit(rest, ['onClick']);
         if (isDisabled) {
@@ -74,6 +76,7 @@ class Button extends React.Component<Props> {
         let button = (
             // eslint-disable-next-line react/button-has-type
             <button
+                aria-label={ariaLabel}
                 ref={element => {
                     this.btnElement = element;
                     if (setRef) {

diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -11,6 +11,8 @@ export enum ButtonType {
     SUBMIT = 'submit',
 }
 export interface ButtonProps {
+    /** ariaLabel defines a string value that labels the current element */
+    ariaLabel?: string;
     /** Child components for the button, generally localized text */
     children?: React.ReactNode;
     /** Custom class for the button */
@@ -59,6 +61,7 @@ class Button extends React.Component<ButtonProps> {
 
     render() {
         const {
+            ariaLabel,
             children,
             className,
             icon,
@@ -92,6 +95,7 @@ class Button extends React.Component<ButtonProps> {
         let button = (
             // eslint-disable-next-line react/button-has-type
             <button
+                aria-label={ariaLabel}
                 ref={element => {
                     this.btnElement = element;
                     if (setRef) {

diff --git a/src/components/button/__tests__/Button.test.tsx b/src/components/button/__tests__/Button.test.tsx
@@ -119,4 +119,15 @@ describe('components/button/Button', () => {
         const wrapper = shallow(<Button showRadar>Test</Button>);
         expect(wrapper.find('RadarAnimation')).toMatchSnapshot();
     });
+
+    test('accesability label is present', () => {
+        const ariaLabel = 'accessiblityAriaLabelValue';
+        const wrapper = shallow(<Button ariaLabel={ariaLabel}>accesability</Button>);
+        expect(wrapper.prop('aria-label')).toBe(ariaLabel);
+    });
+
+    test('accesability label is not present', () => {
+        const wrapper = shallow(<Button>accesability</Button>);
+        expect(wrapper.prop('aria-label')).not.toBeDefined();
+    });
 });
diff --git a/src/components/close-button/CloseButton.js.flow b/src/components/close-button/CloseButton.js.flow
@@ -9,15 +9,17 @@ import { bdlGray65 } from '../../styles/variables';
 import './CloseButton.scss';
 
 type Props = {
+    /** ariaLabel defines a string value that labels the current element */
+    ariaLabel?: string;
     /** Custom class for the close button */
     className?: string,
     /** onClick handler for the close button */
     onClick?: Function,
 }
 
-const CloseButton = ({ className, onClick }: Props) => {
+const CloseButton = ({ className, onClick, ariaLabel = 'close' }: Props) => {
     return (
-        <Button className={classNames('bdl-CloseButton', className)} onClick={onClick} type="button">
+        <Button ariaLabel={ariaLabel} className={classNames('bdl-CloseButton', className)} onClick={onClick} type="button">
             <IconClose color={bdlGray65} height={18} width={18} />
         </Button>
     );

diff --git a/src/components/close-button/CloseButton.tsx b/src/components/close-button/CloseButton.tsx
@@ -8,15 +8,18 @@ import { bdlGray65 } from '../../styles/variables';
 import './CloseButton.scss';
 
 export interface CloseButtonProps {
+    /** ariaLabel defines a string value that labels the current element */
+    ariaLabel?: string;
     /** Custom class for the close button */
     className?: string;
     /** onClick handler for the close button */
     onClick?: Function;
 }
 
-const CloseButton = ({ className, onClick }: CloseButtonProps) => {
+const CloseButton = ({ className, onClick, ariaLabel = 'close' }: CloseButtonProps) => {
     return (
         <Button
+            ariaLabel={ariaLabel}
             className={classNames('bdl-CloseButton', className)}
             data-testid="bdl-CloseButton"
             onClick={onClick}

diff --git a/src/components/close-button/__tests__/CloseButton.test.tsx b/src/components/close-button/__tests__/CloseButton.test.tsx
@@ -37,4 +37,22 @@ describe('components/close-button/CloseButton', () => {
             expect(handleClick).toHaveBeenCalledTimes(1);
         });
     });
+
+    describe('accesability properties', () => {
+        test('should have a custom accesiblity label', () => {
+            const ariaLabel = 'accessiblityAriaLabelValue';
+
+            render(<CloseButton ariaLabel={ariaLabel} />);
+
+            const closeButton = screen.getByRole('button');
+            expect(closeButton).toHaveAttribute('aria-label', ariaLabel);
+        });
+
+        test('should have a default accesiblity label', () => {
+            render(<CloseButton />);
+
+            const closeButton = screen.getByRole('button');
+            expect(closeButton).toHaveAttribute('aria-label', 'close');
+        });
+    });
 });