bug(@vtmn/css): popover accessibility problems

[arichard-info]

Describe the bug

The popover component needs a refactor to improve its accessibility. There are two issues :

• you cannot close the popover by clicking on the button
• you are forced to open the popover when navigating using keyboard

Steps to reproduce

Storybook here

First case :

• Click on the button to open the popover
• Click again on the button => the popover is not closing

Second case :

• Use tabulation to move focus to the button
• The current popover uses the focus to open, so when navigating, so you have to open all the pages popovers :

https://user-images.githubusercontent.com/56544866/172387384-241114f5-ad4c-4b19-ab61-79a39733be6f.mov

Expected behavior

• popovers should not open on focus
• popovers should open when the trigger is focused AND enter or space key is pressed
• popovers should close when click back on the trigger (or press keyboard a second time)

I think the solution will need some JavaScript to be fully accessible. We will need to decide if it's up to the frameworks implementations or not

Example : https://techservicesillinois.github.io/accessibility/examples/popover.html

Browsers affected

All

Version affected

@vtmn/css

[GaspardMathon]

Hi @arichard-info, thanks for raising this issue. We will investigate as soon as possible :)

[astahmer]

FYI, there is a reason there are dozens of library trying to solve this problem, you might not want to go down that rabbit hole and re-use an existing solution such as https://floating-ui.com (this would also solve https://github.com/Decathlon/vitamin-web/issues/971 btw)

and for what it's worth, the same applies to most components logics, so you might want to check https://zagjs.com/ or just https://xstate.js.org/ if you want to soundly make framework-agnostic components

[lauthieb]

Hi @arichard-info, Thanks a lot for reporting this. As we don't add any breaking change to our v0, we unfortunately cannot correct this for this version. I tag this issue as "v1" in order to treat this subject when we will do our next major release. Thanks @astahmer for all these useful links / tools that will help us.

[stale[bot]]

This has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Feel free to reopen whenever you want. Thank you for your contributions.