Popover API or Dialog API: Which to Select?

const modalInvokers = Array.from(doc.querySelectorAll('.modal-invoker'))

modalInvokers.forEach(invoker => {
  const dialogId = invoker.dataset.goal
  const dialog = doc.querySelector(`#${dialogId}`)
  invoker.setAttribute('aria-expanded', false)
  invoker.setAttribute('aria-controls', dialogId)
})

Opening the modal

When the invoker/set off is clicked, we gotta:

1. change the aria-expanded from false to true to present the modal to assistive tech customers, and
2. use the showModal operate to open the modal.

We don’t have to put in writing any code to cover the modal on this click on handler as a result of customers won’t ever get to click on on the invoker when the dialog is opened.

modalInvokers.forEach(invoker => {
  // ... 

  // Opens the modal
  invoker.addEventListener('click on', occasion => {
    invoker.setAttribute('aria-expanded', true)
    dialog.showModal()
  })
})

Nice. The modal is open. Now we gotta write code to shut the modal.

Closing the modal

By default, showModal doesn’t have automated mild dismiss, so customers can’t shut the modal by clicking on the overlay, or by hitting the Esc key. This implies we’ve so as to add one other button that closes the modal. This have to be positioned throughout the modal content material.

 
  X
  

When customers click on the shut button, we’ve to:

1. set aria-expanded on the opening invoker to false,
2. shut the modal with the shut methodology, and
3. convey focus again to the opening invoker factor.

modalInvokers.forEach(invoker => {
  // ... 

  // Opens the modal
  invoker.addEventListener('click on', occasion => {
    invoker.setAttribute('aria-expanded', true)
    dialog.showModal()
  })
})

const modalClosers = Array.from(doc.querySelectorAll('.modal-closer'))

modalClosers.forEach(nearer => {
  const dialog = nearer.closest('dialog')
  const dialogId = dialog.id
  const invoker = doc.querySelector(`[data-target="${dialogId}"]`)
  
  nearer.addEventListener('click on', occasion => {
    dialog.shut()
    invoker.setAttribute('aria-expanded', false)
    invoker.focus()
  })
})

Phew, with this, we’re carried out with the fundamental implementation.

After all, there’s superior work like mild dismiss and styling… which we are able to sort out in a future article.

Can you utilize the Popover API to create modals?

Yeah, you possibly can.

However you’ll have to deal with these by yourself:

1. Inerting different components
2. Trapping focus

I believe what we did earlier (setting aria-expanded, aria-controls, and focus) are simpler in comparison with inerting components and trapping focus.

The Dialog API may grow to be a lot simpler to make use of sooner or later

A proposal about invoker instructions has been created in order that the Dialog API can embody popovertarget just like the Popover API.

That is on the way in which, so we’d be capable to make modals even less complicated with the Dialog API sooner or later. Within the meantime, we gotta do the mandatory work to patch accessibility stuff.

Deep dive into constructing workable popovers and modals

We’ve solely started to scratch the floor of constructing working popovers and modals with the code above — they’re barebone variations which might be accessible, however they undoubtedly don’t look good and may’t be used for skilled functions but.

To make the method of constructing popovers and modals simpler, we are going to dive deeper into the implementation particulars for a professional-grade popover and a professional-grade modal in future articles.

Within the meantime, I hope these offer you some concepts on when to decide on the Popover API and the Dialog API!

Keep in mind, there’s no want to make use of each. One will do.