quick question regarding making li focusable using tabindex
looking at the image i attached, is there any issue making a li element focusable using tabindex of 0?
i AM adding aria-label to it so i hope not. but would like to know from experienced people ^^
if there is no issue, then what else do i have to consider apart from aria-label? thank you!!
4 Replies
It’s really not recommended to make non-interactive elements focusable or mess with taborder unless you absolutely have to. I’m not sure what you’re goal is here or why you want to make the li focusable but instead I would use native semantic elements, a button or link as a direct child of the li that encompasses all the children and then style as needed
Something like
hmm ya i see. i can use anchor tags inside the li but wouldn't that cause like misleading accessibility issue? like it is not supposed to be a link. to give you an idea of what the component is,
in discord, the way you have channel lists, and when u right click it opens a context menu or when u just click it opens that channel, this is exactly what each of those li in my componentd are. they represent each channel / chat card.
the reason why i was adding tab index is so that user can navigate using tabs and hitting enter would work as left click
so u can this is not a link. but ig i can just use a button instead?
also , actually thinking about it, when u click a channel on discord, it does change the route.. so if i try to recreate that, then it WOULD be considered as a link no? so in that case a tag makes sense 🤔
The channel list in discord uses links inside of li. They wrap two levels of divs around the link, but it's still a link inside the li.
i never took inspiration from discord code. it's just HORRENDOUS 😂
but ig ya that's probably the way to go