[wp-trac] [WordPress Trac] #42002: Improve the accordions accessibility

[WordPress Trac]

#42002: Improve the accordions accessibility
-------------------------------+-----------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  Awaiting Review
Component:  Administration     |    Version:
 Severity:  normal             |   Keywords:  has-screenshots
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------
 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.

 [[Image(https://cldup.com/WXR2bcgPQp.png)]]

 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).

--
Ticket URL: <https://core.trac.wordpress.org/ticket/42002>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform