[wp-trac] [WordPress Trac] #38086: Themes Feature Filter accessibility improvements

[WordPress Trac]

#38086: Themes Feature Filter accessibility improvements
-------------------------------+-----------------------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  4.7
Component:  Themes             |    Version:
 Severity:  normal             |   Keywords:  needs-patch has-screenshots
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------------------
 The themes "Feature Filter" would need some accessibility improvements.
 When activated, it opens a form with several checkboxes for several themes
 features:

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

 For keyboard users and assistive technologies users, navigation is mostly
 a linearised process so they navigate through all the checkboxes, select
 some features and then they would expect to find some controls to submit
 the search ''at the end'' of the form. However, the controls are placed
 before the form. This forces users to navigate backwards with the
 keyboard, screen reader users would also have to figure out the controls
 are actually only on the top of the form. Controls to submit forms are
 usually at the end of the form, it's a pretty common pattern and users
 would likely expect that. In this specific case there's some value in
 having them also at the top so placing them both before and after the form
 is probably the best option.

 Additionally, for better accessibility:
 - all the buttons that behave like buttons should be... buttons and not
 `<a href="#"`
 - the toggle button should indicate if the panel is expanded or collapsed
 via an `aria-expanded` attribute
 - a few controls text should be expanded a bit: "Clear" what? "Edit" what?
 - currently, it is possible to submit a search with no features selected:
 this breaks the UI (see screenshot below) and should be avoided; also, a
 `wp.a11y.speak()` message here would be useful to give feedback to users

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

 Worth mentioning that, for better accessibility, the "toggle" button
 should be immediately followed by the expanding panel. Instead, the search
 field is placed in between and when navigating content using the keyboard
 or a screen reader this can be confusing. Ideally, the search field should
 be placed in a different order in the markup. Considering also there's a
 layout issue in the responsive view as pointed out in #32558 I'd rather
 fix this there or in a separate ticket.

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