#1222 Filters (Layered Navigation) - Add keyboard focus and adjust the way tab order should work

[vasilii-b]

Description

This PR adds the a11y changes to the Layered Navigation (Filters) modal on the category pages according to the specifications in #1222 .

Related Issue

Closes #1222.

Acceptance

Verification Stakeholders

@dpatil-magento @sirugh

Specification

Verification Steps

1. Go to any category page that contains products and has filter items.
2. Open the Filters modal.
3. Make sure Filters modal opens.
4. Make sure the modal's close (x) icon is focused.
5. From the keyboard, press the Tab key.
6. Make sure the focus switches to the next element. E.g filter item (Price).
7. Press the Tab key. Make sure the focus switches to the next filter item. E.g. "Color".
8. Press the Space key on the filter item "Color". The options should show. E.g. "Purple" and "Yellow"
9. Press the Space key. You should navigate through "Color" options.
10. Press the Tab key a few times until you focus the next filter item. E.g. "Material".
11. Press the Tab key a few more times until you focus the "Close" button again (that's when no filter option applied).

Screenshots / Screen Captures (if appropriate)

Checklist

• I have added translations for new strings, if necessary.

[PWAStudioBot]

	Messages
📖	DangerCI Failures related to missing labels/description/linked issues/etc will persist until the next push or next nightly build run (assuming they are fixed).
📖	Access a deployed version of this PR here. Make sure to wait for the "pwa-pull-request-deploy" job to complete.

Generated by 🚫 dangerJS against 3551640

[vasilii-b]

ℹ️ plan to proceed with the failed tests once the main changes are approved;

For now, will work on the spotted bug:

• after applying a filter item, the focus goes to the modal's "Close" icon.

[vasilii-b]

update

✅ The aforementioned bug has been addressed

[sirugh]

ℹ️ plan to proceed with the failed tests once the main changes are approved;

Sounds good - I've moved the ticket to the "ux review" column. Once approved by UX it will move on to dev review.

[vasilii-b]

@sirugh may I ask to re-review this?
Added the latest updates according to the discussion in #1222 .
Thanks.

[dpatil-magento]

@sirugh Please check following -

1. It has broken [Fix bug]: Filter and Sort buttons should display at same time #2681 (Nice to have unit test if possible :) )
2. On Safari, after clearing a filter using space key, focus is going back to browser URL bar
   

[sirugh]

It has broken #2681 (Nice to have unit test if possible :) )

I'll fix this.

[sirugh]

On Safari, after clearing a filter using space key, focus is going back to browser URL bar

Interesting. I noted on Chrome that we also "lose" focus, though pressing tab goes to the top-most filter tab ie "Price". @vasilii-b do you have any ideas on how to fix this?

Edit: Actually, looking at #3137 you can see in the demo https://pr-3137.pwa-venia.com/venia-bottoms.html?page=1&price%5Bfilter%5D=0-100%2C0_100 that it behaves sort of the same. IMO we should open a bug about "moving focus to next element when a filter is removed". Probably not worth holding this PR up anymore.

[dpatil-magento]

@sirugh When there are 0 filter results then sort button should not be displayed but its displaying. MFTF test failing, please check.

[sirugh]

@sirugh When there are 0 filter results then sort button should not be displayed but its displaying. MFTF test failing, please check.

This is confusing, so we should show sort/filter button together, unless there are zero results in which case we should show the filter button but not the sort button?

[sirugh]

In my opinion we should ignore #2681 as rendering both together doesn't make sense.

[tjwiebell]

Looks good 👍 tiny bit of whitespace in test name, but ready for another round of QA.

[dpatil-magento]

QA Approved, @tkacheva fyi ignored #2681

[tkacheva]

Looks good from product perspective