API Popover ou API Dialog: qual escolher?

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

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

Abrindo o modal

Quando o invocador/gatilho é clicado, temos que:

1. mudar o aria-expanded de false para true para show o modal para usuários de tecnologia assistiva, e
2. use o showModal função para abrir o modal.

Não precisamos escrever nenhum código para ocultar o modal neste click manipulador porque os usuários nunca poderão clicar no invocador quando a caixa de diálogo for aberta.

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

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

Ótimo. O modal está aberto. Agora temos que escrever o código para fechar o modal.

Fechando o modal

Por padrão, showModal não possui dispensa automática de luz, então os usuários não podem fechar o modal clicando na sobreposição ou pressionando o botão Esc chave. Isso significa que temos que adicionar outro botão que feche o modal. Isso deve ser colocado dentro do conteúdo modal.

 
  X
  

Quando os usuários clicam no botão Fechar, temos que:

1. definir aria-expanded no invocador de abertura para false,
2. feche o modal com o close método, e
3. traga o foco de volta para o elemento invocador de abertura.

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

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

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

modalClosers.forEach(closer => {
  const dialog = closer.closest('dialog')
  const dialogId = dialog.id
  const invoker = document.querySelector(`(data-target="${dialogId}")`)
  
  closer.addEventListener('click', event => {
    dialog.close()
    invoker.setAttribute('aria-expanded', false)
    invoker.focus()
  })
})

Ufa, com isso, terminamos com o básico implementação.

Claro, há trabalhos avançados como desmoldagem leve e estilo… que podemos abordar em um artigo futuro.

Você pode usar a API Popover para criar modais?

Sim, você pode.

Mas você terá que lidar com isso sozinho:

1. Inertizando outros elementos
2. Foco de captura

Acho que o que fizemos anteriormente (configuração aria-expanded, aria-controlse focus) são mais fáceis em comparação com elementos de inertização e foco de captura.

A API Dialog pode se tornar muito mais fácil de usar no futuro

Uma proposta sobre comandos invocadores foi criado para que a API Dialog possa incluir popovertarget como a API Popover.

Isso está a caminho, então poderemos tornar os modais ainda mais simples com a API Dialog no futuro. Enquanto isso, precisamos fazer o trabalho necessário para corrigir as coisas de acessibilidade.

Aprofunde-se na construção de popovers e modais viáveis

Nós apenas começamos a arranhar a superfície da construção de popovers e modais funcionais com o código acima – são versões básicas que são acessíveis, mas definitivamente não têm boa aparência e ainda não podem ser usadas para fins profissionais.

Para facilitar o processo de construção de popovers e modais, nos aprofundaremos nos detalhes de implementação de um popover de nível profissional e de um modal de nível profissional em artigos futuros.

Enquanto isso, espero que isso lhe dê algumas ideias sobre quando escolher a API Popover e a API Dialog!

Lembre-se de que não há necessidade de usar ambos. Um servirá.