Themes Feature Filter accessibility improvements

[afercia]

The themes "Feature Filter" would need some accessibility improvements. When activated, it opens a form with several checkboxes for several themes features:

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

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.

[afercia]

One more thing to fix: when on the "Favorites" view and then pressing the "Feature Filter" button, the favorites form should be hidden:

[afercia]

First pass. There are pre-existing edge cases in the interaction that may lead to unexpected behaviours but they're outside of the scope of this ticket. Also, the responsive view should be improved but this is outside of the scope of this ticket as well.

• the "Feature Filter" button behaves now just like a toggle and doesn't do anything else, also removed a leftover from [27963]
• the "Apply Filters", "Clear", and "Edit" buttons are now <button> elements too
• changes one button text and adds an aria-label attribute
• adds a wp.a11y.speak() message

[afercia]

Screenshots with the patch applied: the "Apply" and "Clear" buttons are now also at the end of the form:

[rianrietveld]

Tested patch 38086.diff

Mac/Safari with VoiceOver: this works much beter, the feedback is good.

Some remarks, in the case you do not select anything:

• The wp.a11y.speak message "Select one or more filter to filter by" is only announced once. When you select the button for the second time, nothing is announced. You have to move focus and go back to get the message again.
• For none screen reader users, the filter button does nothing, but there is also no warning that you should select something.

Keyboard only tested on Safari/Firefox/Chrome
All works fine. Nice work Andrea :-)

[afercia]

Replying to rianrietveld:
Rian thanks very much for testing.

• The wp.a11y.speak message "Select one or more filter to filter by" is only announced once.

I think this is the VoiceOver bug with identical messages, see #36853.

[afercia]

In 38640:

Accessibility: Add Themes Feature Filter form improvements.

• adds "Apply Filters" and "Clear" at the end of the form
• changes the "Feature Filter", "Apply Filters", "Clear", and "Edit" links in <button> elements
• removes a leftover from [27963]
• clarifies one button text and adds an aria-label attribute
• adds a wp.a11y.speak() message when clicking on "Apply Filters" and no features are selected

Fixes #38086.