fix: stop screenreaders from reading duplicate accordion toggle btns (#…

…867) * fix: prevent screen readers from accessing duplicate accordion toggle buttons --------- Co-authored-by: Jeff Howard <>
EightfoldAI · Aug 8, 2024 · 436c589 · 436c589
1 parent 97e09d0
commit 436c589
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 17 deletions.
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -42,6 +42,7 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
   collapseAriaLabelText,
   disabled,
   expandAriaLabelText,
+  expandButtonDescribedBy,
   expandButtonProps,
   expanded,
   expandIconProps,
@@ -89,23 +90,27 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
         aria-controls={`${id}-content`}
         aria-label={expanded ? expandAriaLabelText : collapseAriaLabelText}
         aria-expanded={expanded}
+        aria-describedby={expandButtonDescribedBy || `${id}-header-content`}
         className={styles.clickableArea}
         onClick={onClick}
         onKeyDown={handleKeyDown}
         role="button"
         tabIndex={0}
       ></div>
-      <div className={styles.accordionHeaderContainer}>
+      <div
+        id={`${id}-header-content`}
+        className={styles.accordionHeaderContainer}
+      >
         {iconProps && <Icon {...iconProps} />}
         <div className={styles.accordionHeader}>
           {typeof children === 'string' ? <span>{children}</span> : children}
         </div>
         {badgeProps && <Badge classNames={styles.badge} {...badgeProps} />}
       </div>
       <Button
+        role="presenation"
+        tabIndex={-1}
         aria-controls={`${id}-content`}
-        ariaLabel={expanded ? expandAriaLabelText : collapseAriaLabelText}
-        aria-expanded={expanded}
         disabled={disabled}
         gradient={gradient}
         iconProps={{ classNames: iconButtonClassNames, ...expandIconProps }}

diff --git a/src/components/Accordion/Accordion.types.ts b/src/components/Accordion/Accordion.types.ts
@@ -61,6 +61,15 @@ interface AccordionBaseProps extends OcBaseProps<HTMLDivElement> {
    * @default false
    */
   expanded?: boolean;
+  /**
+   * Allows for setting (or unsetting if so desired) and alternative
+   * describedBy for the expand button. Otherwise it will default to the
+   * header content of the accordion. In cases where the header content
+   * is overly verbose and/or including buttons, it's recommended to
+   * set this to point to a more appropriate description or unset it so
+   * it the toggle button simple reads "According, button, expanded/collapsed."
+   */
+  expandButtonDescribedBy?: string;
   /**
    * Expand button props
    */

diff --git a/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`Accordion Accordion is large 1`] = `
     >
       <div
         aria-controls="myAccordionId-content"
+        aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
         aria-label="Accordion"
         class="clickable-area"
@@ -20,6 +21,7 @@ exports[`Accordion Accordion is large 1`] = `
       />
       <div
         class="accordion-header-container"
+        id="myAccordionId-header-content"
       >
         <span
           aria-hidden="false"
@@ -53,9 +55,9 @@ exports[`Accordion Accordion is large 1`] = `
       <button
         aria-controls="myAccordionId-content"
         aria-disabled="false"
-        aria-expanded="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presenation"
+        tabindex="-1"
       >
         <span
           aria-hidden="false"
@@ -107,6 +109,7 @@ exports[`Accordion Accordion is medium 1`] = `
     >
       <div
         aria-controls="myAccordionId-content"
+        aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
         aria-label="Accordion"
         class="clickable-area"
@@ -115,6 +118,7 @@ exports[`Accordion Accordion is medium 1`] = `
       />
       <div
         class="accordion-header-container"
+        id="myAccordionId-header-content"
       >
         <span
           aria-hidden="false"
@@ -148,9 +152,9 @@ exports[`Accordion Accordion is medium 1`] = `
       <button
         aria-controls="myAccordionId-content"
         aria-disabled="false"
-        aria-expanded="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presenation"
+        tabindex="-1"
       >
         <span
           aria-hidden="false"
@@ -202,6 +206,7 @@ exports[`Accordion Accordion is not bordered 1`] = `
     >
       <div
         aria-controls="myAccordionId-content"
+        aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
         aria-label="Accordion"
         class="clickable-area"
@@ -210,6 +215,7 @@ exports[`Accordion Accordion is not bordered 1`] = `
       />
       <div
         class="accordion-header-container"
+        id="myAccordionId-header-content"
       >
         <span
           aria-hidden="false"
@@ -243,9 +249,9 @@ exports[`Accordion Accordion is not bordered 1`] = `
       <button
         aria-controls="myAccordionId-content"
         aria-disabled="false"
-        aria-expanded="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presenation"
+        tabindex="-1"
       >
         <span
           aria-hidden="false"
@@ -297,6 +303,7 @@ exports[`Accordion Accordion is pill shaped 1`] = `
     >
       <div
         aria-controls="myAccordionId-content"
+        aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
         aria-label="Accordion"
         class="clickable-area"
@@ -305,6 +312,7 @@ exports[`Accordion Accordion is pill shaped 1`] = `
       />
       <div
         class="accordion-header-container"
+        id="myAccordionId-header-content"
       >
         <span
           aria-hidden="false"
@@ -338,9 +346,9 @@ exports[`Accordion Accordion is pill shaped 1`] = `
       <button
         aria-controls="myAccordionId-content"
         aria-disabled="false"
-        aria-expanded="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presenation"
+        tabindex="-1"
       >
         <span
           aria-hidden="false"
@@ -392,6 +400,7 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
     >
       <div
         aria-controls="myAccordionId-content"
+        aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
         aria-label="Accordion"
         class="clickable-area"
@@ -400,6 +409,7 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
       />
       <div
         class="accordion-header-container"
+        id="myAccordionId-header-content"
       >
         <span
           aria-hidden="false"
@@ -433,9 +443,9 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
       <button
         aria-controls="myAccordionId-content"
         aria-disabled="false"
-        aria-expanded="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presenation"
+        tabindex="-1"
       >
         <span
           aria-hidden="false"
@@ -488,6 +498,7 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
     >
       <div
         aria-controls="myAccordionId-content"
+        aria-describedby="myAccordionId-header-content"
         aria-expanded="true"
         aria-label="Accordion"
         class="clickable-area"
@@ -496,6 +507,7 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
       />
       <div
         class="accordion-header-container"
+        id="myAccordionId-header-content"
       >
         <span
           aria-hidden="false"
@@ -623,9 +635,9 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
       <button
         aria-controls="myAccordionId-content"
         aria-disabled="false"
-        aria-expanded="true"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presenation"
+        tabindex="-1"
       >
         <span
           aria-hidden="false"
@@ -677,6 +689,7 @@ exports[`Accordion Renders without crashing 1`] = `
     >
       <div
         aria-controls="myAccordionId-content"
+        aria-describedby="myAccordionId-header-content"
         aria-expanded="false"
         aria-label="Accordion"
         class="clickable-area"
@@ -685,6 +698,7 @@ exports[`Accordion Renders without crashing 1`] = `
       />
       <div
         class="accordion-header-container"
+        id="myAccordionId-header-content"
       >
         <span
           aria-hidden="false"
@@ -718,9 +732,9 @@ exports[`Accordion Renders without crashing 1`] = `
       <button
         aria-controls="myAccordionId-content"
         aria-disabled="false"
-        aria-expanded="false"
-        aria-label="Accordion"
         class="button button-neutral button-medium round-shape icon-left"
+        role="presenation"
+        tabindex="-1"
       >
         <span
           aria-hidden="false"