"Focusable elements should have interactive semantics" when `:focus` is used to toggle a popup.
I'm working on adding a feature to my site where you can see what song I'm listening to via a small widget. In order to show what the name, album, and artists of the song, I added a popup which displays this information. It can be brought up by hovering the element or focusing onto it. In order to make this work without JS, I just use
:focus/:hover with display:none/display:block, and set a [tabindex=0] so it can be focused. When I check my accessibility in Firefox's built in accessibility checker, I get a warning:KeyboardIs this warning something I should ignore as a false positive, or is there something I need to fix? Here's a link to my code, and here's a link to the relevant file. (It's an astro site) I'm aware theres still some issues w the aria stuff on the now playing specifically (too many divs) but if you see something that needs fixing please point it out lol! Thanks in advance !!
⚠️ Focusable elements should have interactive semantics.
Learn more
20 Replies
a div element isn't an interactible element
yeah but i used [tabindex] to give it focus, and css to make it do things when focused. im trying to avoid relying on js but i dont think there would be an element better suited (in terms of functionality. obviously it needs to have better aria than it does currently)
to clarify: my code works i just want to make sure its properly accessible lol
that doesn't change the fact it isn't interactible
why are you making it focusable anyways?
so that keyboard users can see the popup (since its not visible otherwise lol)
what do u mean by interactible? like it doesnt do anything orrr
like: you can't interact with it in any way, shape or form
not by default, but thats why i added the tab index, so it CAN be focused to reveal things
you can't interact with it
even if you focus it
as in like. trigger a click event do you mean
all elements handle clicks
MDN Web Docs
HTML elements reference - HTML | MDN
This page lists all the HTML elements, which are created using tags.
and other things too
im confused what you mean by "its not interactible" then
it's not an input or any of the elements in the list
is it that in my code it doesnt do anything except absorb focus? like when focused theres no click event or anything, it just has
[tabindex]?yes, it just absorbs the focus
and that's it
how would you propose i reveal the popover to the user via keyboard navigation without using focus instead then? cause i can't think of a better way to do it off the top of my head lol
you're using it on the wrong element
add a button that does the revealing
yeah that would make. a lot more sense actually lmao
tysm !!
you're welcome
not sure how you're handling it, but to properly connect them, a button + popover hint might be a good solution https://mdn.github.io/dom-examples/popover-api/popover-hint/