[BD-9484][BpkInfoBannerExpandable] Fix an a11y issue (#3751)

* Fix a11y issue: element with button role can not be operable via keyboard

* remove role from button

* move view more label into the toggle button; add aria-controls; change section to div and remove role; remove deprecated comments

* fix test

* add type button for good practice

* remove aria-controls

* replace getByText by getByRole

---------

Co-authored-by: Yongqi Wu <[email protected]>

Author: wuyq0808

packages/bpk-component-info-banner/src/BpkInfoBanner-test.tsx

@@ -55,6 +55,8 @@ describe('BpkInfoBanner', () => {
         message={message}
       />,
     );
-    expect(screen.getByRole('presentation')).toHaveClass('custom-banner-class-name');
+    expect(screen.getByText(message).parentElement?.parentElement).toHaveClass(
+      'custom-banner-class-name',
+    );
   });
 });

packages/bpk-component-info-banner/src/BpkInfoBanner.module.scss

@@ -42,6 +42,11 @@
     align-items: flex-start;
 
     &--expandable {
+      width: 100%;
+      padding: 0;
+      border: none;
+      background-color: transparent;
+      text-align: start;
       cursor: pointer;
     }
   }
@@ -78,9 +83,6 @@
     background-color: transparent;
     cursor: pointer;
     appearance: none;
-  }
-
-  &__expand-icon {
     fill: tokens.$bpk-text-secondary-day;
   }
 

packages/bpk-component-info-banner/src/BpkInfoBannerExpandable-test.tsx

@@ -18,6 +18,7 @@
 
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
+import { axe } from 'jest-axe';
 
 import BpkInfoBannerExpandable from './BpkInfoBannerExpandable';
 import { ALERT_TYPES } from './common-types';
@@ -28,15 +29,17 @@ const innerMessage =
   'Quisque sagittis sagittis purus, id blandit ipsum. Pellentesque nec diam nec erat condimentum dapibus.' +
   'Nunc diam augue, egestas id egestas ut, facilisis nec mi.';
 
+const defaultTestProps = {
+  type: ALERT_TYPES.SUCCESS,
+  message,
+  toggleButtonLabel: 'Show details',
+  onExpandToggle: jest.fn(),
+};
+
 describe('BpkInfoBannerExpandable', () => {
   it('should not show inner message when "expanded" is not set to true', () => {
     render(
-      <BpkInfoBannerExpandable
-        type={ALERT_TYPES.SUCCESS}
-        message={message}
-        toggleButtonLabel="Show details"
-        onExpandToggle={jest.fn()}
-      >
+      <BpkInfoBannerExpandable {...defaultTestProps}>
         {innerMessage}
       </BpkInfoBannerExpandable>,
     );
@@ -45,16 +48,20 @@ describe('BpkInfoBannerExpandable', () => {
 
   it('should show inner message when "expanded" is set to true', () => {
     render(
-      <BpkInfoBannerExpandable
-        type={ALERT_TYPES.SUCCESS}
-        message={message}
-        toggleButtonLabel="Show details"
-        onExpandToggle={jest.fn()}
-        expanded
-      >
+      <BpkInfoBannerExpandable {...defaultTestProps} expanded>
         {innerMessage}
       </BpkInfoBannerExpandable>,
     );
     expect(screen.getByText(innerMessage)).toBeVisible();
   });
+
+  it('should not have programmatically-detectable accessibility issues', async () => {
+    const { container } = render(
+      <BpkInfoBannerExpandable {...defaultTestProps}>
+        {innerMessage}
+      </BpkInfoBannerExpandable>,
+    );
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
 });

packages/bpk-component-info-banner/src/BpkInfoBannerInner.tsx

@@ -91,23 +91,12 @@ type ToggleButtonProps = {
   expanded: boolean;
 };
 
-const ToggleButton = (props: ToggleButtonProps) => {
-  const classNames = getClassName('bpk-info-banner__expand-icon');
-
-  return (
-    <button
-      type="button"
-      className={getClassName('bpk-info-banner__toggle-button')}
-      aria-label={props.label}
-      aria-expanded={props.expanded}
-      title={props.label}
-    >
-      <div className={classNames}>
-        {props.expanded ? <CollapseIcon/> : <ExpandIcon/> }
-      </div>
-    </button>
-  );
-};
+const ToggleButton = (props: ToggleButtonProps) => (
+  <div className={getClassName('bpk-info-banner__toggle-button')}>
+    {props.expanded ? <CollapseIcon /> : <ExpandIcon />}
+    <span className="visually-hidden">{props.label}</span>
+  </div>
+);
 
 type Props = CommonProps & {
   action?: ExpandableBannerAction;
@@ -159,7 +148,7 @@ const BpkInfoBannerInner = ({
   const dismissable = configuration === CONFIGURATION.DISMISSABLE;
   const showChildren = isExpandable && expanded;
 
-  const sectionClassNames = getClassName(
+  const classNames = getClassName(
     'bpk-info-banner',
    `bpk-info-banner--${type}`,
    `bpk-info-banner--style-${style}`,
@@ -175,22 +164,21 @@ const BpkInfoBannerInner = ({
     ? getClassName('bpk-info-banner__children-container--with-action')
     : getClassName('bpk-info-banner__children-container--no-action')
 
-  /* eslint-disable
-    jsx-a11y/no-static-element-interactions,
-    jsx-a11y/click-events-have-key-events,
-    */
-  // Disabling 'click-events-have-key-events and interactive-supports-focus' because header element is not focusable.
-  // ToggleButton is focusable and works for this.
+  const BannerHeader = isExpandable ? 'button' : 'div';
+
   return (
     <AnimateAndFade
       animateOnEnter={animateOnEnter}
       animateOnLeave={dismissable || animateOnLeave}
       show={show}
       {...rest}
     >
-      <section className={sectionClassNames} role="presentation">
-        <div
-          role={isExpandable ? 'button' : undefined}
+      <div className={classNames}>
+        <BannerHeader
+          aria-expanded={isExpandable ? expanded : undefined}
+          type={isExpandable ? 'button' : undefined}
+          // BannerHeader is just <button> or <div>, so className should be allowed.
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
           className={headerClassNames}
           onClick={onBannerExpandToggle}
         >
@@ -214,7 +202,7 @@ const BpkInfoBannerInner = ({
               />
             </span>
           )}
-        </div>
+        </BannerHeader>
         <BpkAnimateHeight
           duration={parseInt(durationSm, 10)}
           height={showChildren ? 'auto' : 0}
@@ -230,10 +218,9 @@ const BpkInfoBannerInner = ({
             </BpkLink>
           )}
         </BpkAnimateHeight>
-      </section>
+      </div>
     </AnimateAndFade>
   );
-  /* eslint-enable */
 };
 
 export default BpkInfoBannerInner;

packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBanner-test.tsx.snap

@@ -8,9 +8,8 @@ exports[`BpkInfoBanner should render correctly 1`] = `
     >
       <div>
         <div>
-          <section
+          <div
             class="bpk-info-banner bpk-info-banner--success bpk-info-banner--style-default"
-            role="presentation"
           >
             <div
               class="bpk-info-banner__header"
@@ -55,7 +54,7 @@ exports[`BpkInfoBanner should render correctly 1`] = `
                 />
               </div>
             </div>
-          </section>
+          </div>
         </div>
       </div>
     </div>
@@ -73,9 +72,8 @@ exports[`BpkInfoBanner should render correctly with no type specified 1`] = `
     >
       <div>
         <div>
-          <section
+          <div
             class="bpk-info-banner bpk-info-banner--info bpk-info-banner--style-default"
-            role="presentation"
           >
             <div
               class="bpk-info-banner__header"
@@ -120,7 +118,7 @@ exports[`BpkInfoBanner should render correctly with no type specified 1`] = `
                 />
               </div>
             </div>
-          </section>
+          </div>
         </div>
       </div>
     </div>

packages/bpk-component-info-banner/src/__snapshots__/BpkInfoBannerDismissable-test.tsx.snap

@@ -8,9 +8,8 @@ exports[`BpkInfoBannerDismissable should render correctly 1`] = `
     >
       <div>
         <div>
-          <section
+          <div
             class="bpk-info-banner bpk-info-banner--success bpk-info-banner--style-default"
-            role="presentation"
           >
             <div
               class="bpk-info-banner__header"
@@ -81,7 +80,7 @@ exports[`BpkInfoBannerDismissable should render correctly 1`] = `
                 />
               </div>
             </div>
-          </section>
+          </div>
         </div>
       </div>
     </div>