Trap focus in mobile filter modal while it is open

[atiqueakhtar]

This PR resolves the issue described in #541 and satisfies all the given expected behaviour:

• Focus should be trapped inside the modal while the modal is open (should not move back to the main page)
• When the modal is closed, the focus should go back to the "Filters" button
• When the "Filters" button is focused, screen readers should not announce "collapsed"

Pull request checklist

• [ ] My code contains tests covering the code I modified (Not Required)
• [x] I linted and tested the project with bin/check
• [ ] I added significant changes and product updates to the changelog (Not Required)

[atiqueakhtar]

Hi @joemasilotti , Can you please review this PR which resolves #541 . Thanks.

[joemasilotti]

Thanks for taking a pass, @atiqueakhtar! I'm not very familiar with a11y in this context, but this feels like a lot of custom JavaScript to achieve what we want. Is there any possibility that we could do something in HTML? I was wondering if manually setting tabindex could help.

@metamoni, do you have any ideas or feedback on this?

[atiqueakhtar]

Thanks for taking a pass, @atiqueakhtar! I'm not very familiar with a11y in this context, but this feels like a lot of custom JavaScript to achieve what we want. Is there any possibility that we could do something in HTML? I was wondering if manually setting tabindex could help.

Sure @joemasilotti , I'll see if I can accomplish this directly through HTML rather than using custom javascript.

[joemasilotti]

Awesome, thanks for taking another pass!

[metamoni]

Sorry for the delay in replying to this. Just had a look and this looks great! Great job, @atiqueakhtar 👍

[joemasilotti]

Hey @atiqueakhtar, do you still have appetite to take another pass with HTML? If not, no worries! Let me know and I can take over.

[joemasilotti]

@atiqueakhtar, I'm going to close this for now as it has grown quite stale. If you'd like to pick it up again let me know!