vitamin-web feat: make the dropdown accessible

Is your request related to a problem? Please describe. We are currently using the dropdown component with the svelte library and we are facing some accessibilities issues.

A clear and concise description of what the problem is. We can't select a choice in the list with the enter key.

Describe the solution you'd like We should be able to only use the keyboard to select a value in the dropdown

I'm available to work on this issue 👍

Jul 12 '22 10:07 M4gie

Hi @M4gie, thanks a lot for your proposal. I completely agree. Yes feel free to work on this because React, Svelte & Vue are community libraries. For your information, the core team (thanks @GaspardMathon) made an accessible demo in the CSS showcase here: https://decathlon.github.io/vitamin-web/@vtmn/showcase-css/?path=/story/components-actions-dropdown--demo. You need to use tab to choose and space to select. Thanks :)

Jul 12 '22 12:07 lauthieb

Hi @M4gie, when do you think you will work on this? Thanks a lot.

Aug 12 '22 08:08 lauthieb

Hey @lauthieb, I will work on it next week 😉

Aug 17 '22 14:08 M4gie

Hey @M4gie, nice thanks a lot!

Aug 19 '22 22:08 lauthieb

I made some tests with a multiple select, the a11y is more logic with it since it's native but we can't style it. If we want to keep our current style we will need to keep our current solution with inputs. Manually modifying the a11y of the current solution could bring more a11y issues as we will need to handle it on all browsers and devices.

Aug 31 '22 15:08 SRegnaultD

Thanks @SRegnaultD for your message and conclusion. So, I close this issue. Thanks again for your suggestions and challenges.

Aug 31 '22 15:08 lauthieb