Improve the accordions accessibility

[afercia]

Splitting this out from #37013, props to monikarao, xavortm, mihai2u, Kopepasah for the work done there.

In #37013 was noted that the toggle "arrows" of the accordions in the Menus screen don't have the circular shape to indicate keyboard focus. This is inconsistent with other similar controls that do use the circular focus and could be improved.

However, the accordions in the Menus screen are generated with do_accordion_sections(): plugins or themes might use this function for their own purposes and any change here should be carefully considered and well communicated.

In core, as far as I see, the Menus screen is the only place where do_accordion_sections() is used. In other places, for example the Customizer, the accordions markup is output by a custom implementation. The JS part instead, if I'm not wrong, is still shared and uses accordion.js.

This would be also a good opportunity to improve the accordions accessibility in core and standardize all the different implementations.

I'd recommend to follow the example on the ARIA Authoring Practices, see ​https://www.w3.org/TR/wai-aria-practices/#accordion and see the example on ​https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html where the accordion "titles" use a button inside a heading (note: the example uses <dt role="heading" aria-level="3"> because it's an ARIA example :) that's equivalent to a heading).

[rishishah]

Hello afercia,

Please review my patch and let me know if anything.

Please see changes here: ​https://ibb.co/gfniB5

Thanks,

[rishishah]

Here is the proper patch from src.

[afercia]

@rishishah thanks for the patch! What I meant is a bit more substantial chance though, making the heading contain just a button with some proper text. This would require some more changes. Basically something like:
<h3><button ...>accordion title here<span aria-hidden="true" class="toggle-indicator"></span></button></h3>

The span with icon should go inside the button.

This would match the aria example and allow to remove some of the screen reader text there. Also, it would be nice to remove the word "toggle" sinte it's difficult or impossible to translate in some languages, see #34753

With this changes, also the JS part should be reviewed to ensure it works properly.

[afercia]

Note: the new Site Health feature that is going to land in WordPress 5.2 adds some new accordions, see #46573.

[kushang78]

Added patch for this ticket.

[kushang78]

@afercia,

I've worked upon your suggestion as you mentioned above. Here, I've attached the latest patch for that. So, Please check it and drop your feedback on it!

Thanks!

[rcreators]

Hello @kushang78,

I checked the patch. There is some tabbing order issue with the accordion. When we change from one item to another with the tab key, there is something hidden area which is getting focused and pressing enter to open/close the accordion as well. Which does not appear to be happening for right-side menu items.

For reference see this video: ​https://screencast-o-matic.com/watch/cZnO6LVKbhF

Also, the focus border of the icon does not match the right-side menu item. It needs to be the same as well.

[joedolson]

With a week until release candidate, this isn't ready yet. Moving to 6.6 so it has a bit more time.

There are some CSS issues with inconsistent focus design in addition to the tabbing issue that needs addressing.

[kushang78]

Added latest patch for this ticket.

[kushang78]

Thanks for the feedback @rcreators @joedolson

I’ve attached the latest patch for this.

Thanks!

[rcreators]

@kushang78 This patch failed. Can you check on it? The below lines are error codes.

error: patch failed: src/wp-admin/css/common.css:2357
error: src/wp-admin/css/common.css: patch does not apply
error: patch failed: src/wp-admin/includes/template.php:1574
error: src/wp-admin/includes/template.php: patch does not apply

[kushang78]

@rcreators ,

In my case, The patch is working fine without any errors using below 2 methods that I've tried!

• Using Command, git apply 42002.diff
• Using Git Patch extension in VS Code

Usually, I'm applying the patch using Git Patch extension in VS Code.

Thanks!

[rcreators]

I manually copied code from the patch was able to apply it. The tab index issue is solved with tab-index -1 for button. So tabbing works fine now. Yet css needs to be updated, so both left and right side have same appearance in each state

[kushang78]

Added latest patch for this ticket.

[kushang78]

Added latest patch for this ticket.

[kushang78]

Please consider 42002.3.diff file as latest patch. Thanks!

[devsahadat]

@kushang78 I just checked it and it's working fine. Thanks

[joedolson]

Let's move the event trigger from .accordion-section-title to the button; that will allows us to remove the extraneous tabindex attributes, and will make the keyboard handling more standard.

It should also allow us to remove the keydown event handler from accordion.js, since the button will pass events natively.

Be sure to also check accordions in the Customizer and in the Site Health UI to make sure everything is consistent across those features.

[hmbashar]

Test Report

Description

This report validates whether the indicated patch works as expected.

Patch tested: 42002.3

Environment

• WordPress: 6.6-alpha-57778-src
• PHP: 8.3.7
• Server: nginx/1.25.4
• Database: mysqli (Server: 8.3.0 / Client: mysqlnd 8.3.7)
• Browser: Firefox 126.0
• OS: macOS
• Theme: Twenty Fifteen 3.7
• MU Plugins: None activated
• Plugins:
  • FakerPress 0.6.6
  • Test Reports 1.1.0

Actual Results

1. ✅ Issue resolved with patch.

Screenshots

Before Patch

After Patch

[krupajnanda]

Test Report

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

Environment

• WordPress: 6.5.4
• 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 Sixteen 3.2
• MU Plugins:
  • Safe Autoloaded Options Limit Test (MU Plugin) 1.0
• Plugins:
  • Test Reports 1.1.0

Additional Notes

• Tested under Menu, Customiser and Site Health

For Menu and Site Health : I found that the accordion is not high lighted instead it high lights the entire row. Please check the attachment for the same.

For Customiser: I found that accordion is also get high lighted.

I am not sure if this comparison is valid. But I would really appreciate if some can take a look.

Supplemental Artifacts

Add as Attachment

[sabernhardt]

Let's work on this in the next cycle.

• Change event handlers to directly address buttons
• Remove unneeded handling of tabindex attributes
• Remove unneeded screen reader text now that accordions have appropriate markup

Trac ticket: https://core.trac.wordpress.org/ticket/42002

[joedolson]

Updated this to move the event handler to the button and extend handling to cover the customizer.

The changes in the customizer make use of the :has selector, which is possibly a bit marginal for our browser support rules. The gap is in the UC Browser for Android, which is just above our support guidelines at 1.14%.

[joedolson]

In my opinion, the amount of extra code required to handle this CSS in order to cover .14% usage are not justified, given that the result of the lack of support is a minor visual difference.

Based on my own testing, I think this is ready for commit.

Changes:

1) Accordions now contain immediate children button elements with aria-controls attributes pointing to their controlled content.
2) Text provided to explain how to use the accordions in screen readers removed. (No longer required since these are now buttons with correct markup.)
3) Event triggers moved to button elements.
4) Unneeded tabindex="0" removed, as headings no longer need to be made navigable.
5) Tests updated.

Primary visual change is that the nav menu accordions have a visible :focus state, previously missing. It is the standard focus state, identical to the existing state in Site Health.

[joedolson]

In 59224:

Administration: A11y: Fix accordion accessibility.

Change accordions in the customizer and the navigation menus to make proper usage of accordion markup patterns. This includes adding missing :focus states, using a button element to control tabbing and interaction, instead of the heading elements, and removing instructional text for screen reader users that was used to compensate for the incorrect markup pattern.

Props afercia, rishishah, kushang78, rcreators, krupajnanda, hmbashar, joedolson.
Fixes #42002.

In r59224

[joedolson]

I did not choose to merge the implementations of Site Health and the Nav Menus accordion sections in this change. I think that's worthwhile, but separate from the accessibility issue, and I'm opening a separate issue for that.

[wildworks]

The all: unset; defined ​here also resets box-sizing:border-box, which results in overflowing buttons in the Customizer. Please see #62313.