What components does this change affect?
This change affects all implementations of the accordions component.
HTML structure changes:
- added role="region" to the accordion item element.
Before
<div id="collapseaccOneitem1"
class="collapse "
aria-labelledby="headingaccOneitem1">After
<div id="collapseaccOneitem1"
class="collapse "
role='region'
aria-labelledby="headingaccOneitem1">Why this change was made
This change resolves a HTML validation error where the accordion content container lacked an explicit ARIA role. Adding role="region" gives the container an explicit ARIA role, allowing its existing aria-labelledby relationship to be interpreted correctly by assistive technologies.
Benefits include:
- better accessibility – screen readers can more accurately interpret the accordion content area as a distinct region
- supports WCAG 2.2 guidance – ensures ARIA attributes are used in a valid and accessible way
- improved semantic structure – provides the accordion content with an appropriate ARIA role, strengthening its relationship with the associated header label
Recommended checks for consuming teams
After updating your Design System packages, we recommend reviewing accordion usage in your application.
- accordions expand and collapse as expected
- screen readers announce the expanded/collapsed state correctly
- no HTML validation errors appear in browser developer tools
- existing accordion styling and behaviour remain unchanged
Summary
Adds role="region" to the accordion content container to resolve a HTML validation error and provide more appropriate ARIA semantics for assistive technologies.
Internal reference
Design System internal reference: 97841