Mobile expanded sidebar modal overlay has invalid ARIA attribute: aria-expanded

Problem/Motivation

On the mobile version, the "modal" overlay for the expanded sidebar has an invalid ARIA attribute: aria-expanded.

Accessibility Insights report

  Title: WCAG 4.1.2: Ensure an element's role supports its ARIA attributes (.admin-toolbar-overlay)
  Tags: Accessibility, WCAG 4.1.2, aria-allowed-attr

  Issue: Ensure an element's role supports its ARIA attributes (aria-allowed-attr - https://accessibilityinsights.io/info-examples/web/aria-allowed-attr)

  Target application: admin | Drush Site-Install - https://drupal-core-dev.ddev.site/user/1/edit?pass-reset-token=3M28uFtT7L8cxINMn9OnEPObJbFuTcfPcIyVtmtD9LfeLhvgzJJRDLLVO4s-3MZxDbqgcDOnOQ&check_logged_in=1

  Element path: .admin-toolbar-overlay

  Snippet: <div class="admin-toolbar-overlay" aria-controls="admin-toolbar" data-drupal-admin-styles="" data-once="admin-toolbar-trigger" aria-expanded="true"></div>

  How to fix:
  Fix all of the following:
    ARIA attribute is not allowed: aria-expanded="true"

Screenshot

WCAG success criteria

Name, Role, Value (Level A)

Steps to reproduce

1. Do a standard installation.
2. Enable the navigation module.
3. Log in as admin.
4. Go to a page that has the navigation sidebar.
5. Reduce the viewport width until the "mobile" version of the sidebar is displayed (currently ~1000px).
6. Expand the sidebar if it's closed.
7. Run a test with Axe or Accessibility Insights.

Code snippet

<div class="admin-toolbar-overlay" aria-controls="admin-toolbar" data-drupal-admin-styles="" data-once="admin-toolbar-trigger" aria-expanded="true"></div>

Proposed resolution

The problem appears to be that the overlay is a simple div with no special role, but it's a pseudo disclosure widget control. The sidebar looks like a hybrid disclosure widget / modal dialog.

aria-expanded can only be used on certain roles.

The web.dev native dialog example doesn't close on a click outside the dialog, so that's not a helpful example.

The Modal Dialog Example of the ARIA Authoring Practices Guide (APG) uses a similar modal overlay ("backdrop") that does not have aria-expanded or aria-controls.

Based on the APG example, I propose:

• Remove the aria-expanded attribute.
• Possibly also remove the aria-controls attribute.
• Update the accessibility test to also check with the sidebar expanded on a smaller viewport.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet