All Products & filters accessibility improvements

[Aljullu]

Part of #1281.

This PR contains several small improvements to All Products and filter blocks accessibility.

For improvements that seemed more complex, I created issues with the label scope: accessibility:

https://github.com/woocommerce/woocommerce-gutenberg-products-block/issues?q=is%3Aissue+is%3Aopen+label%3A%22scope%3A+accessibility%22

Screenshots

How to test the changes in this Pull Request:

1. Create a page like the one in the screenshot (with the All Products block and filter blocks).
2. With the Axe extension (Firefox, Chrome) analyze the page and verify there are no errors related to the blocks. (Notice there is an issue with the Sale badge color contrast, that's Storefront specific and being fixed in All Products block: don't make sale badge transparent to avoid constrast issues storefront#1251).
3. Navigate the page with a screen reader and verify some texts are clearer now (related commits 86781c1, 96704eb and 8dad6a2):
   • Sale > Product on Sale
   • (Filter) Clear All > Clear All Filters
   • (Filter) Remove > Remove X Filter
   • (Filter) Go > Apply filter
   • (Pagination) 2 > Page 2
4. In the Price Filter block, set the Price Range option to Input. Navigate the page and verify you can't focus the slider anymore: there is no need to offer two controls for the same value (b102ae4 and 07246f3).
5. In the Attributes Filter block, set the Query Type to And and Display Style > Dropdown. Then, navigate the page with the keyboard and verify you can't select the input field. We already have a "Change filter" and "Remove filter" button, so being able to focus the input field is unnecessary and unexpected, because it's visually hidden (ec35bca).
6. With a screen reader, enable/disable some filters and verify the number of results is announced. This helps to know the filter was applied and also gives information about how many products were found (97fe7f0).
7. Play around with the page, change block settings, etc. and report any issues you find.

Changelog

Accessibility of the All Products block and filter blocks has been improved.

[haszari]

I tested this in Safari (with VoiceOver) and these all look like good improvements to me.

With the Axe extension analyze the page and verify there are no errors

I ran audits in Axe and in Safari's accessibilty tools, and saw a few issues, but it looks like these are reported separately. We can follow up later to make sure we get them all (eventually).

Navigate the page with a screen reader and verify some texts are clearer now

Tested the ones mentioned and they sounded reasonable (note I did not compare against master).

In the Price Filter block, set the Price Range option to Input.

This was a little confusing (assuming Price Range: Editable?). I confirmed that I couldn't tab-navigate to slider when the max/min text fields were displayed.

Observations when testing this (not blocking this PR):

• When using Price Range: Text, I found it hard to set a max/min price with keyboard only, so perhaps we recommend Price Range: Editable for maximum accessibility.
• Generally found the block options UX tricky for this, took some experimentation to understand what the Price Range option does and why we have it.

In the Attributes Filter block, set the Query Type to And and Display Style > Dropdown.

I didn't reproduce the old buggy behaviour, but when I tested with voiceover/keyboard the block seemed to behave reasonably - I could select and apply/unapply attribute filters. I assume the bug was that there is a hidden text field for search/filtering attributes to select, and that this could be focused when not visible.

Another observation while here:

• Similar to above, I found the block options UX a bit confusing here. With Query Type: AND and Style: Dropdown do we allow multi select? I couldn't multi select in front end.

With a screen reader, enable/disable some filters and verify the number of results is announced.

Worked well :)

[haszari]

Could add "price" here to make it clearer, Apply price filter ?

[Aljullu]

Agree! Done in 1ebef84.

[Aljullu]

Thanks for the review @haszari!

I ran audits in Axe and in Safari's accessibilty tools, and saw a few issues, but it looks like these are reported separately. We can follow up later to make sure we get them all (eventually).

All issues remaining should be related to the theme or have an issue already filled in this repo. If that's not the case, it means I overlooked them. 🙂

This was a little confusing (assuming Price Range: Editable?). I confirmed that I couldn't tab-navigate to slider when the max/min text fields were displayed.

Yes, sorry, that's what I meant!

• When using Price Range: Text, I found it hard to set a max/min price with keyboard only, so perhaps we recommend Price Range: Editable for maximum accessibility.

Good catch. I'm unable to move the handles with the keyboard if I don't previously click on them with the mouse. I opened an issue for this: #1679.

• Generally found the block options UX tricky for this, took some experimentation to understand what the Price Range option does and why we have it.

Interesting, I think it might be good to open an issue if you think there is a way to improve the UX here? Currently it's based on the previous widgets in order to have feature-parity, but I guess any idea of potential improvements is welcome. 🙂

• Similar to above, I found the block options UX a bit confusing here. With Query Type: AND and Style: Dropdown do we allow multi select? I couldn't multi select in front end.

Right, we have an issue open to allow multi-select independently of the Query Type: #1311.