vitamin-web icon indicating copy to clipboard operation
vitamin-web copied to clipboard

Published 20 hours ago • verified publisher icon Decathlon

fix(@vtmn/css): add demo script for tabs with arrows

Open GaspardMathon opened this issue 2 years ago • 2 comments

Changes description

  • Add behavior demo script for accessibility conformity

Context

  • The tabs component wasn't accessible, now you can move across the different tabs with the left and right arrow keys. The tabs focus on the next element after the nav.

Checklist

  • [x] Make sure you are requesting to pull a topic/feature/bugfix branch. Please, don't request directly from your main!
  • [x] Check commits & PR names matches our requested structure. It must follow the https://www.conventionalcommits.org pattern.
  • [x] Check your code additions will fail neither code linting checks.
  • [x] I have reviewed the submitted code.
  • [x] I have tested on related showcases.
  • [x] If it includes design changes, please ask for a review with a core team designer.

Does this introduce a breaking change?

  • No

GaspardMathon avatar Aug 05 '22 16:08 GaspardMathon

Hi @lauthieb, I followed this link to set up the tabs keyboard component (I forgot the 'Home' and 'End' keys though I will add that). Once you "tab" on one tabList item, you must use arrow keys to navigate left and right. If the "tab" key is pressed a second time, the focus is moved on the next element following the tab component.

GaspardMathon avatar Aug 08 '22 07:08 GaspardMathon

Hi @lauthieb and @thibault-mahe, I have updated the code. I can't find a solution for the tab behavior. Currently, when you tab it will blur the last tab element (and the first one for tab + shift key). Feel free to contribute to this PR if you find a solution.

GaspardMathon avatar Aug 11 '22 13:08 GaspardMathon

Thanks @GaspardMathon @thibault-mahe I let you check also :)

lauthieb avatar Aug 19 '22 21:08 lauthieb

@GaspardMathon @lauthieb I commited some code for a new demo to discuss, with some fixes and tabpanels. I'm available to discuss this, but feel free to revert the whole commit if I don't have all context elements 🙂

edit: NB: it's still a draft that might need some changes. It could also have consequences for other components

thibault-mahe avatar Aug 23 '22 09:08 thibault-mahe

Thanks @GaspardMathon for this work. I agree with @thibault-mahe and his suggestions regarding the patterns that we need to respect even if they will have some breaking changes for consumers, we can manage this transition as we don't have a lot of consumers for this component (< 10 apps). I let you check together, feel free to reach me if you need further help.

lauthieb avatar Aug 24 '22 13:08 lauthieb

@GaspardMathon @lauthieb @7studio @romuleald I converted this PR to draft since there are still some changes to make Feel free to reopen when the PR is ready for review again. Thanks! :)

thibault-mahe avatar Sep 02 '22 16:09 thibault-mahe

I made some fixes for the CSS demo and examples since we need it now. if it is ok with you I'll merge as is and then reopen the issue for the Svelte / React / Vue fixes

thibault-mahe avatar Sep 13 '22 09:09 thibault-mahe

The rest of these developments, specific for framework integration, can be found here https://github.com/Decathlon/vitamin-web/pull/1256

thibault-mahe avatar Sep 13 '22 12:09 thibault-mahe