{"id":1334,"date":"2024-09-21T22:20:15","date_gmt":"2024-09-21T22:20:15","guid":{"rendered":"https:\/\/html5accessibility.com\/stuff\/?p=1334"},"modified":"2024-10-01T12:11:08","modified_gmt":"2024-10-01T12:11:08","slug":"drugs-button-popover","status":"publish","type":"post","link":"https:\/\/html5accessibility.com\/stuff\/2024\/09\/21\/drugs-button-popover\/","title":{"rendered":"drugs button popover"},"content":{"rendered":"

\"David,<\/p>\n

Update: 01\/10\/2024<\/strong><\/p>\n

Several people<\/a> have questioned my reasoning for writing about the use case of popover<\/code> as a tooltip, no<\/em> I was not on drugs, at the time of writing I noticed that GitHub<\/a> was using popover<\/code> as a tooltip:\"pull<\/a><\/p>\n

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

proto popover code example:<\/strong><\/p>\n

<button popovertarget<\/strong>=\"my-popover\" type=\"button\">\ud83d\udc8a<\/button>\r\n<div popover<\/strong> id=\"my-popover\">Psychadelic drugs<\/div><\/pre>\n
The accessible name for the button<\/code> in the preceding example will be \ud83d\udc8a, when in this case I want it to be Psychadelic drugs\u00a0<\/em>(the text content of the popover<\/code>)<\/p>\n
I thought, hey I can use a label<\/code> element to provide the accessible name for the button<\/code> (as it’s a labelable element<\/a>) like this:<\/p>\n
<!-- DOES NOT WORK -->\r\n<button popovertarget=\"my-popover\" \r\ntype=\"button\" id=\"pill\"<\/strong>>\ud83d\udc8a<\/button>\r\n<div popover id=\"my-popover\">\r\n<label for=\"pill\">Psychadelic drugs<\/label><\/strong>\r\n<\/div>\r\n<\/pre>\n
Problem is that the label<\/code> only provides the accessible name when the PopOver<\/em> is visible. So unless the button<\/code> is clicked\/pressed the button<\/code> has no accessible name.<\/p>\n
I then remembered that unlike aria-labelledby<\/code> the for\/id<\/code> relationship does not work when the <label><\/code> element is display:none<\/code>. Which kinda sucks. I mean I could use aria-labelledby<\/code> like this:<\/p>\n
<!-- WORKS -->\r\n<button popovertarget=\"my-popover\" type=\"button\" \r\naria-labelledby=\"my-popover\"<\/strong>>\ud83d\udc8a<\/button> \r\n<div popover id=\"my-popover\"<\/strong>> \r\nPsychadelic drugs\r\n<\/div><\/pre>\n
But I prefer to follow the First Rule of ARIA<\/a>, when possible. So how do I use a HTML label<\/code> element rather than aria-labelledby<\/code> in this case?<\/p>\n
YOU DON’T<\/h3>\n
A solution that popped into my head that appears to work is moving the label<\/code> element to contain the popover.<\/del>\u00a0 Thought it worked (probably due to a fever dream), but after further testing, turned out it doesn’t:<\/p>\n
<!-- DOES NOT WORK -->\r\n<button popovertarget=\"my-popover\" \r\ntype=\"button\" id=\"pill\"<\/strong>>\ud83d\udc8a<\/button> \r\n<label for=\"pill\">\r\n<\/strong><div popover id=\"my-popover\"> \r\ndrugs<\/div>\r\n<\/label><\/strong><\/pre>\n
Viable options<\/h2>\n
Use aria-labelledby<\/code>:<\/p>\n
<!-- WORKS -->\r\n<button popovertarget=\"my-popover\" type=\"button\" \r\naria-labelledby=\"my-popover\"<\/strong>>\ud83d\udc8a<\/button> \r\n<div popover id=\"my-popover\"<\/strong>> \r\nPsychadelic drugs\r\n<\/div><\/pre>\n
Use aria-label<\/code> on the button<\/code>:<\/p>\n
<!-- WORKS -->\r\n<button popovertarget=\"my-popover\" type=\"button\" \r\naria-label=\"Psychadelic drugs\"<\/strong>>\ud83d\udc8a<\/button> \r\n<div popover id=\"my-popover\"> \r\nPsychadelic drugs\r\n<\/div><\/pre>\n
Try it for yourself<\/h2>\n
See the Pen 
\ndrugs<\/a> by steve faulkner (@stevef<\/a>)
\non CodePen<\/a>.<\/p>\n