drugs button popover

During preparation for my talk at State of the Browser 2024 I started to look into the popover attribute. One of the things I noticed is that you have to hook up the popover content (by a means other than popovertarget) to the triggering element if you want the content to act as the accessible name for said trigger.

The accessible name for the button in the preceding example will be 💊, when in this case I want it to be Psychadelic drugs (the text content of the popover)

I thought, hey I can use a label element to provide the accessible name for the button (as it’s a labelable element) like this:

Problem is that the label only provides the accessible name when the PopOver is visible. So unless the button is clicked/pressed the button has no accessible name.

I then remembered that unlike aria-labelledby the for/id relationship does not work when the <label> element is display:none. Which kinda sucks. I mean I could use aria-labelledby like this:

Leave a Comment