Skip to main content

Updated validation errors on navigation

What components does this change affect?

This change affects all implementations of the navigation (application) component.

HTML structure changes:

  • Added role="menu" to the .dropdown-menu element.

Before

<div class="dropdown-menu " aria-labelledby="main-nav">

After

<div class="dropdown-menu " aria-labelledby="main-nav" role="menu">

Why this change was made

This change improves the accessibility of  the navigation (application) component by ensuring it is correctly interpreted by assistive technologies.

Benefits include:

  • Better accessibility – assistive technologies can more accurately identify and announce the navigation menu
  • Supports WCAG 2.2 guidance – ensures ARIA attributes are used in a valid and accessible way
  • Improved semantic structure – provides the navigation menu with an appropriate ARIA role, strengthening its relationship with associated labels

Data submission

No changes are expected to form submission, model binding, or data persistence as part of this update.

For peace of mind, you may wish to perform a quick check in consuming applications to confirm form values continue to submit and save as expected.

Summary

Adds role="menu" to the dropdown menu element to resolve an aria-labelledby validation error and improve assistive technology support within the navigation (application) component.

Internal reference

Design System internal reference: 97841

Was this page helpful?