A API Popover chega ao valor de referência

Una Kravets

Está chegando a hora! Um dos recursos que mais me entusiasmou acabou de ser usado em todos os navegadores mais recentes e está oficialmente na versão de referência de 2024. Esse recurso é a API Popover. O Popover oferece vários primitivos e affordances de desenvolvedor incríveis para a criação de interfaces em camadas, como dicas de ferramentas, menus, interfaces de ensino e muito mais.

Alguns destaques rápidos dos recursos de pop-up incluem:

• Promoção para a camada superior. Os pop-ups aparecerão na camada superior, acima do resto da página, para que você não precise brincar com o z-index.
• Funcionalidade de dispensar a luz. Clicar fora da área de pop-up fecha o pop-up e retorna o foco.
• Gerenciamento de foco padrão. Abrir o pop-up faz a próxima guia parar dentro do pop-up.
• Vinculações de teclado acessíveis. Pressionar a tecla esc ou alternar duas vezes vai fechar o pop-up e retornar o foco.
• Vinculações de componentes acessíveis. Conectar um elemento de pop-up a um acionador de pop-up semanticamente.

Como criar pop-ups

Criar pop-overs é bem simples. Se quiser usar valores padrão, basta ter uma button para acionar o pop-up e um elemento para ser acionado.

• Primeiro, defina um atributo popover no elemento que será o pop-up.
• Em seguida, adicione um id exclusivo ao elemento de pop-up.
• Por fim, para conectar o botão ao pop-up, defina o popovertarget do botão como o valor do id do elemento popover.

Isso é mostrado no seguinte código:

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p><p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.<p></p>
</div>

Para ter um controle mais granular sobre o pop-up, você pode definir explicitamente os tipos de pop-up. Por exemplo, usar um atributo popover sem valor é o mesmo que popover="auto". O valor auto permite o comportamento de dispensar luz e fecha automaticamente outros pop-ups. Use popover="manual" para adicionar um botão "Fechar". Pop-overs manuais não fecham outros pop-ups nem permitem que os usuários o dispensem clicando fora da interface. Para criar um pop-up manual, use o seguinte:

<button popovertarget="my-popover" class="trigger-btn"> Open Popover </button>

<div id="my-popover" popover=manual>
  <p>I am a popover with more information. Hit the close button or toggle to close me.<p>
  <button class="close-btn" popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
  </button>
</div>

Caixa de diálogo pop-up x modal

Você pode estar se perguntando se precisa de um pop-up quando há uma caixa de diálogo, mas a resposta é: talvez não.

O atributo popover não fornece semântica por si só. E embora agora você possa criar experiências de diálogo modais usando pop-ups, há algumas diferenças importantes entre os dois:

Conclusão e outros materiais de leitura

O popover oferece vários recursos interessantes para a plataforma. Para saber mais sobre essa API, incluindo mais informações sobre a acessibilidade do recurso e a documentação relacionada ao conjunto de recursos, leia estas recomendações:

• Semântica e atributo popover: o que usar quando? por Hidde de Vries
• Na acessibilidade pop-up: o que o navegador faz e não faz por Hidde de Vries
• Documentação do MDN sobre pop-up