Accessibility issue in WordPress adminbar

[heinperu]

When I run Lighthouse on my page on localhost, while being logged in, I receive these errors:

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.
Some ARIA parent roles must contain specific child roles to perform their intended accessibility functions. Learn more about roles and required children elements.
Failing Elements
ul#wp-admin-bar-root-default.ab-top-menu
ul#wp-admin-bar-root-default.ab-top-menu
li#wp-admin-bar-wp-logo.menupop
li#wp-admin-bar-site-name.menupop
li#wp-admin-bar-customize.hide-if-no-customize
ul#wp-admin-bar-top-secondary.ab-top-secondary.ab-top-menu
li#wp-admin-bar-search.admin-bar-search
li#wp-admin-bar-my-account.menupop.with-avatar

I have exported the report to this gist: ​https://googlechrome.github.io/lighthouse/viewer/?gist=bb3f031c03ece7bfd67e9b614d2b9c17.

[joedolson]

Looks like menuitem is supposed to be a direct descendant of menu, and it's not. We don't actually want the list item to be the direct descendant, but we can add role="group" to address this.

Related: #34668.

[joedolson]

Add role="group" to menu descendants.

[joedolson]

Though some of these are groups of only one item with no popup, they all need to have role of group, because the only allowed descendants of a menu are groups, separators, and menuitems.

Testing:

• verify that all immediate descendants of the adminbar menu role have role="group".
• Test with a screen reader to verify behavior is unchanged.

[rcreators]

Tested the Patch. Works fine. Tested with NVDA. Also works great.

[krupajnanda]

With the given patch, there is an improvement in Accessibility Score and I can see the added changes are working as expected.

Test Report

Description

This report validates that the indicated patch works as expected. ✅

Patch tested: https://core.trac.wordpress.org/attachment/ticket/60919/60919.diff

Environment

• WordPress: 6.6-beta2-58392-src
• PHP: 8.2.15
• Server: nginx/1.25.3
• Database: mysqli (Server: 8.0.36 / Client: mysqlnd 8.2.15)
• Browser: Chrome 125.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Four 1.1
• MU Plugins:
  • Safe Autoloaded Options Limit Test (MU Plugin) 1.0
• Plugins:
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Supplemental Artifacts

Add as Attachment

[rajinsharwar]

With Patch 60919.diff, the Accessibility Score has increased, and the error of "Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.".

Test Report

Description

This report validates that the indicated patch works as expected. ✅

Patch tested: https://core.trac.wordpress.org/attachment/ticket/60919/60919.diff

Environment

• WordPress: 6.6-beta2-58392-src
• PHP: 8.3.0
• Server: nginx
• Database: mysqli
• Browser: Chrome
• OS: Windows (LightHouse test done on Mobile device)

Actual Results

1. ✅ Issue resolved with patch.

Attachments

Before: ​https://img001.prntscr.com/file/img001/PIpGT_BoT4uIPyCv3RpzPg.png
After: ​https://img001.prntscr.com/file/img001/hL1gBjpsSPyTRYb1eHL_Fg.png

[hellofromTonya]

Prepping the commit now.

[hellofromTonya]

In 58438:

Toolbar: Fix ARIA [role] on menu descendants.

Adds a role="group" to the WordPress admin bar menu list items to fix the following accessibility issue:

Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.

Reference:

• ​ARIA: group role via mdn web docs

Follow-up to [42128], [21193], [19558].

Props heinperu, joedolson, krupajnanda, rajinsharwar, rcreators, sabernhardt.
Fixes #60919.

[sabernhardt]

Follow-up: #61795