Fixed HTML validation errors on accordions

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