Scroll horizontally through a slider
Hello 👋
So I have this Slider Container and I want it to be scrollable when the keyboard user tab into it? I'm not sure what i can do to achieve this without over-enginer it.
Now if you want to scroll through it you have to click on the container first and then you can use your arrow keys to scroll, as you can see in the CodePen below
5 Replies
a keyboard user can use his arrow keys to go left and right within the container. just like he would do on a regular page with the up and down keys
otherwise you can give a tabindex="0" to each item, then they are tabable too
and ofcourse there are js ways
Yes i tried doing that, clicking the left/right arrow keys but it doesn't scroll unless i click on the container with my mouse. Is it just for me that it's working that way?
Also i did a tabindex="0" but didn't work.
I'm trying to avoid the Js ways for now 😬.
okay, i checked it out, there probably is different behaviours between browser. Think if you only set tabindex=0 on the container. you can tab into the container and then use the arrows
if you set this in your css you can see when it is focused
Yeah it's my browser.. tried it on another and it worked.
I guess i should do it the JS way in the end, just in case this behavior happens for other users 🫣
Thanks Mark!