It’s always exciting when a new web standard lets us do more with less JS. The popover API is just such a thing. It doesn’t have baseline support yet, but it’s coming! It’ll let us do some pretty cool stuff with minimal JS.

Say you want to build a gallery where clicking on an image opens it in a modal window. In the not-so-distant past, you would’ve used a library like Bootstrap or written a bunch of your own JS. I’ve been playing around with using the popover API for this and having a fallback when it’s not supported. The fallback is opening the image in a new tab. This seems like an acceptable fallback because (a) nothing is broken, it just means a small subset of users will have a slightly less convenient UX, and (b) that subset will quickly shrink to virtually zero as popover support continues to grow.

⚠️ Note: I’m including some aria attributes below for illustration purposes, but this is not a complete solution regarding accessibility. Please do not copy and paste it thinking it’s fully accessible.

The Markup

Let’s start with the gallery markup.

<ul class="gallery">
  <li class="gallery__item">
    <button class="gallery__trigger" popovertarget="gallery-popover" aria-haspopup="dialog" data-fullsize-url="https://images.unsplash.com/photo-1727567682406-6a3c15a6e8b8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDMxODY1OTZ8&ixlib=rb-4.0.3&q=80">
      <img src="https://images.unsplash.com/photo-1727567682406-6a3c15a6e8b8?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NDMxODY1OTZ8&ixlib=rb-4.0.3&q=80&w=400" alt="A beautiful resort">
    </button>
  </li>
  <!-- More list items... -->
</ul>

<div id="gallery-popover" popover>
  <button class="popover__close-btn" popovertarget="gallery-popover" popovertargetaction="hide">Close</button>
  
  <div id="popover-content"></div>
</div>

There are numerous ways to build a gallery. In this case, I have an unordered list for the gallery. Each gallery item consists of a button with an image in it. The modal window consists of a div with a close button and a space to display the image.

Notice the popover-related items:

• The popovertarget on each <button> makes the buttons open our popover (targeted by ID).
• The popover attribute on the popover <div> makes the div a popover.
• The popovertarget and popovertargetaction on the close <button> make it close our popover.

That’s it! At least in terms of controlling the popover. Without a single line of JS, we already have a window that opens and closes in the top layer when we click some buttons. The future!

The JS

We need a bit of JS for three things:

• Placing the selected image in the popover.
• Implementing our fallback.
• Improving accessibility.

Let’s take these one by one.

Place the image in the popover

When we click an image in the gallery, the popover opens — but it’s empty. We need to fill the popover with a large version of the image we clicked on. For each trigger (gallery item), we need to do this:

// Make a copy of the image so the gallery image remains unchanged.
const imageCopy = trigger.querySelector('img').cloneNode(true) 
// Get the URL of the full-size image from the button's data attribute.
const fullUrl = trigger.dataset.fullsizeUrl 
    
imageCopy.src = fullUrl

// When the gallery item is clicked, switch out the image in the popover.
trigger.addEventListener('click', () => popoverContent.innerHTML = imageCopy.outerHTML) 

Implement fallback

If the popover API is not supported, we want to open the full-size image in a new tab instead. We need a conditional statement around the event listener above.

if (popoverSupport()) {
  trigger.addEventListener('click', () => popoverContent.innerHTML = imageCopy.outerHTML)
} else {
  // If popover not supported, open image in new tab.
  trigger.addEventListener('click', () => window.open(fullUrl, '_blank'))
}

The popoverSupport function is simple:

// Returns `true` if the popover API is supported.
function popoverSupport() {
  return HTMLElement.prototype.hasOwnProperty('popover') 
}

Improve accessibility

For a sighted user, the fallback is not a big deal. If you click on a gallery image and it opens in a new tab instead of a modal window, it might be slightly annoying, but otherwise it’s okay. However, for someone using a screen reader, the fallback could be more problematic. If something is announced as a button that opens a pop-up, but then it functions like a link that opens a new tab, that could be confusing. Though not a perfect solution, we can use some aria attributes to help alleviate this.

But first, a note about semantic HTML. <button> is the most semantic element for our primary interaction (opening a popup). <a> is the most semantic element for our fallback (opening something in a new tab). To keep things simpler, I wanted to use the same element for both scenarios. Using <a> to open a popup is arguably more semantic than using a <button> to open a new tab, especially if the <a> is marked up correctly. So in that sense, <a> is a better fit overall… currently. That will change. I chose <button> because it is the better choice in the long run. The number of users who need the fallback will quickly shrink to virtually zero as popover API support grows. By using <button>, I’m optimizing for the scenario that will soon apply to virtually all traffic.

Regardless of which tag we choose for the triggers, we need to dynamically change some aria attributes when our fallback is in play.

⚠️ Note: this example illustrates the concept of adjusting accessibility when the fallback is used, but it is not a complete solution in terms of accessibility. Please do not copy and paste this thinking it is fully accessible.

if (popoverSupport()) {
  trigger.addEventListener('click', () => popoverContent.innerHTML = imageCopy.outerHTML)
} else {
  trigger.addEventListener('click', () => window.open(fullUrl, '_blank'))
  // Remove this aria attribute because it doesn't make sense when the trigger opens a new tab.
  trigger.removeAttribute('aria-haspopup') 
}

All Together Now

Here’s the full demo on CodePen.