feat(Accordion): add ariaControls, ariaLabelledBy, id props to improv…

…e a11y Hiding the Open button on mobile-first click interaction is included as well.
kiwicom · Feb 27, 2025 · de76664 · de76664
1 parent 86a167f
commit de76664
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 13 deletions.
diff --git a/packages/orbit-components/src/Accordion/AccordionSection/components/SectionHeader.tsx b/packages/orbit-components/src/Accordion/AccordionSection/components/SectionHeader.tsx
@@ -11,6 +11,9 @@ interface Props extends Common.Globals {
   readonly expandOnTileClick?: boolean;
   readonly onExpand?: Common.Callback;
   readonly actions?: React.ReactNode;
+  readonly ariaControls?: string;
+  readonly id?: string;
+  readonly ariaLabelledBy?: string;
 }
 
 const AccordionSectionHeader = ({
@@ -21,6 +24,9 @@ const AccordionSectionHeader = ({
   onExpand,
   expandable,
   dataTest,
+  ariaControls,
+  id,
+  ariaLabelledBy,
 }: Props) => {
   const isInteractive = expandOnTileClick && !expanded && expandable;
 
@@ -52,11 +58,13 @@ const AccordionSectionHeader = ({
 
   const content = (
     <>
-      <div className="flex grow items-center">{children}</div>
+      <div className="flex grow items-center" id={id}>
+        {children}
+      </div>
       {!expanded && expandable && (
-        <div className="ms-600 flex">
+        <div className={cx(isInteractive && "hidden", "ms-600 flex")}>
           {actions || (
-            <Button onClick={handleButtonClick} type="secondary">
+            <Button onClick={handleButtonClick} type="secondary" aria-controls={ariaControls}>
               Open
             </Button>
           )}
@@ -73,12 +81,14 @@ const AccordionSectionHeader = ({
         isInteractive && "hover:bg-cloud-light cursor-pointer border-0 bg-transparent text-left",
       )}
       data-test={dataTest && `${dataTest}Header`}
-      aria-expanded={expanded}
+      aria-labelledby={ariaLabelledBy}
       {...(isInteractive && {
-        role: "button",
+        role: "",
         onClick: handleClick,
         onKeyDown: handleKeyDown,
         tabIndex: 0,
+        "aria-controls": ariaControls,
+        "aria-expanded": expanded || undefined,
       })}
     >
       {content}

diff --git a/packages/orbit-components/src/Accordion/AccordionSection/index.tsx b/packages/orbit-components/src/Accordion/AccordionSection/index.tsx
@@ -24,6 +24,7 @@ const AccordionSection = ({
   const { expanded, onExpand, loading } = useAccordion();
 
   const slideId = useRandomId();
+  const headerId = useRandomId();
   const isExpanded = expandable && expanded;
 
   const [{ height }, ref] = useBoundingRect<HTMLDivElement>({ height: isExpanded ? null : 0 });
@@ -43,12 +44,19 @@ const AccordionSection = ({
             expandable={expandable}
             expandOnTileClick={expandOnTileClick}
             dataTest={dataTest}
+            ariaControls={slideId}
+            id={headerId}
           >
             {header}
           </SectionHeader>
         )}
 
-        <Slide maxHeight={height} expanded={isExpanded} id={slideId} ariaLabelledBy={slideId}>
+        <Slide
+          maxHeight={height}
+          expanded={isExpanded}
+          id={slideId}
+          ariaLabelledBy={expandOnTileClick ? headerId : undefined}
+        >
           <div ref={ref}>
             {children && <SectionContent dataTest={dataTest}>{children}</SectionContent>}
             {footer && <SectionFooter dataTest={dataTest}>{footer}</SectionFooter>}

diff --git a/packages/orbit-components/src/Accordion/__tests__/index.test.tsx b/packages/orbit-components/src/Accordion/__tests__/index.test.tsx
@@ -107,17 +107,12 @@ describe("Accordion", () => {
         expect(expandHandler).not.toHaveBeenCalled();
       });
 
-      it("should maintain button click functionality with expandOnTileClick", async () => {
+      it("should maintain button click functionality and expandOnTileClick is false", async () => {
         const buttonTestId = `${sectionDataTest}-button`;
         const expandHandler = onExpand;
         render(
           <Accordion onExpand={expandHandler} expandedSection={undefined}>
-            <AccordionSection
-              id={sectionId}
-              header="Header with Both"
-              expandOnTileClick
-              dataTest={buttonTestId}
-            />
+            <AccordionSection id={sectionId} header="Header with Both" dataTest={buttonTestId} />
           </Accordion>,
         );