Update accordion section to use passed in ID for header (not just uni…

…que ID)
Khan · Nov 15, 2023 · 8f11dae · 8f11dae
1 parent 5f53d51
commit 8f11dae
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/wonder-blocks-accordion/src/components/__tests__/accordion.test.tsx b/packages/wonder-blocks-accordion/src/components/__tests__/accordion.test.tsx
@@ -476,7 +476,11 @@ describe("Accordion", () => {
         // Arrange
         render(
             <Accordion>
-                <AccordionSection header="Section 1" testId="section-1">
+                <AccordionSection
+                    id="accordion-section-id-for-test"
+                    header="Section 1"
+                    testId="section-1"
+                >
                     Section 1 content
                 </AccordionSection>
                 <AccordionSection header="Section 2">
@@ -492,9 +496,10 @@ describe("Accordion", () => {
         );
 
         // Assert
-        // Not testing the actual value of the aria-labelledby attribute
-        // because it comes from the unique ID generator.
-        expect(section1ContentPanel).toHaveAttribute("aria-labelledby");
+        expect(section1ContentPanel).toHaveAttribute(
+            "aria-labelledby",
+            "accordion-section-id-for-test-header",
+        );
     });
 
     describe("keyboard navigation", () => {

diff --git a/packages/wonder-blocks-accordion/src/components/accordion-section.tsx b/packages/wonder-blocks-accordion/src/components/accordion-section.tsx
@@ -214,7 +214,7 @@ const AccordionSection = React.forwardRef(function AccordionSection(
     const sectionId = id ?? ids.get("accordion-section");
     // We need an ID for the header so that the content section's
     // aria-labelledby attribute can point to it.
-    const headerId = ids.get("accordion-section-header");
+    const headerId = id ? `${id}-header` : ids.get("accordion-section-header");
     // We need an ID for the content section so that the opener's
     // aria-controls attribute can point to it.
     const sectionContentUniqueId = ids.get("accordion-section-content");