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 perform to open the modal.

We don’t have to write down 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 computerized 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 inside 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 technique, and
3. convey focus again to the opening invoker ingredient.

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 accomplished with the primary implementation.

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

Can you employ 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 feel what we did earlier (setting aria-expanded, aria-controls, and focus) are simpler in comparison with inerting components and trapping focus.

The Dialog API would possibly turn out 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 embrace popovertarget just like the Popover API.

That is on the best way, 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 are accessible, however they undoubtedly don’t look good and might’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!

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