drugs button popover

Update: 01/10/2024

Several people have questioned my reasoning for writing about the use case of popover as a tooltip, no I was not on drugs, at the time of writing I noticed that GitHub was using popover as a tooltip:

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.

proto popover code example:

<button popovertarget="my-popover" type="button">💊</button>
<div popover id="my-popover">Psychadelic drugs</div>

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:

<!-- DOES NOT WORK -->
<button popovertarget="my-popover" 
type="button" id="pill">💊</button>
<div popover id="my-popover">
<label for="pill">Psychadelic drugs</label>
</div>

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:

<!-- WORKS -->
<button popovertarget="my-popover" type="button" 
aria-labelledby="my-popover">💊</button> 
<div popover id="my-popover"> 
Psychadelic drugs
</div>

But I prefer to follow the First Rule of ARIA, when possible. So how do I use a HTML label element rather than aria-labelledby in this case?

YOU DON’T

A solution that popped into my head that appears to work is moving the label element to contain the popover.  Thought it worked (probably due to a fever dream), but after further testing, turned out it doesn’t:

<!-- DOES NOT WORK -->
<button popovertarget="my-popover" 
type="button" id="pill">💊</button> 
<label for="pill">
<div popover id="my-popover"> 
drugs</div>
</label>

Viable options

Use aria-labelledby:

<!-- WORKS -->
<button popovertarget="my-popover" type="button" 
aria-labelledby="my-popover">💊</button> 
<div popover id="my-popover"> 
Psychadelic drugs
</div>

Use aria-label on the button:

<!-- WORKS -->
<button popovertarget="my-popover" type="button" 
aria-label="Psychadelic drugs">💊</button> 
<div popover id="my-popover"> 
Psychadelic drugs
</div>

Try it for yourself

See the Pen
drugs by steve faulkner (@stevef)
on CodePen.

Notes:

This only works accessibly on pointer/keyboard devices. On touch only devices the only way, I can work out, to display the popover is by activating the button,  which sorta defeats the purpose of having a descriptive visible label via popover as people need to know what it does before activating the button.

I used the following CSS to display the  popover on focus/hover:

/* Show popover on button focus */
#popoverButton:focus + #my-popover {
  display: block;
}

/* Show popover on button hover */
#popoverButton:hover + #my-popover {
  display: block;
}

The only reasonable, accessible method I can find to provide a visible label for a button when the meaning of iconogrophy is obscure is to use an always visible label, in this case you can also use the label element to provide the accessible name:

See the Pen
persistent visual label by steve faulkner (@stevef)
on CodePen.

The Fall – Mr Pharmacist

Mr. Pharmacist
Can you help me out today
In your usual lovely way
Oh Mr. Pharmacist I insist
That you give me some of that vitamin see
Mr. Pharmacist
Dear Pharmacist won't you please
Give me some energy
Mr. Pharmacist
Hey Mr. Pharmacist
I'll recommend you to my friends
They'll be happy in the end
Mr. Pharmacist can you help
Send me on a 'delic kick
Mr. Pharmacist
Dear Pharmacist use your mind
You better stock me up for the wintertime
Mr. Pharmacist
Hey Mr. Pharmacist
Words cannot express
Feeling I suggest
Oh Mr. Pharmacist I can plead
Gimme some of that powder I need
Mr. Pharmacist
Dear Pharmacist I'll be back
With a handful of empty sack
Mr. Pharmacist