diff --git a/packages/wonder-blocks-accordion/src/components/__tests__/accordion.test.tsx b/packages/wonder-blocks-accordion/src/components/__tests__/accordion.test.tsx index 1072ddbab..a154ed10e 100644 --- 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( - + Section 1 content @@ -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 index 287619484..13606c0dc 100644 --- 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");