A API Popover chega ao valor de referência

Una Kravets

Está chegando a hora! Um dos recursos mais entusiasmados acabou de ser lançado em todos os navegadores mais recentes e faz parte do Baseline de 2024. Esse recurso é a API Popover. O Popover tem vários primitivos e recursos de desenvolvedor incríveis para você criar interfaces em camadas, como dicas, menus, interfaces de ensino e muito mais.

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

• Promoção para a camada superior. Os pop-ups vão aparecer na camada superior acima do restante da página para que você não precise mexer no z-index.
• Funcionalidade de dispensa simples. Clicar fora da área do pop-up vai fechá-lo e retornar o foco.
• Gerenciamento de foco padrão. Abrir o pop-over faz a próxima guia parar dentro dele.
• Vinculações de teclado acessíveis. Pressionar a tecla esc ou alternar duas vezes fechará o pop-over e retornará o foco.
• Vinculações de componentes acessíveis. Conectar um elemento pop-over a um acionador pop-over semanticamente.

Como criar pop-ups

Criar popovers é bem simples. Para usar valores padrão, você só precisa de um button para acionar o pop-up e um elemento para acionar.

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

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-over. Por exemplo, usar um atributo popover básico sem valor é o mesmo que popover="auto". O valor auto ativa o comportamento de dispensa de luz e fecha automaticamente outros pop-ups. Use o popover="manual" para adicionar um botão "Fechar". Os pop-ups manuais não fecham outros pop-ups nem permitem que os usuários o dispensem clicando fora da interface. Crie um pop-up manual usando 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 versus modal

Você pode estar se perguntando se precisa de pop-over quando uma caixa de diálogo existe, e a resposta é: talvez não seja possível.

É importante observar que o atributo popover não fornece semântica por si só. Embora agora você possa criar experiências modais semelhantes a caixas de diálogo usando pop-over, há algumas diferenças principais entre os dois:

Conclusão e mais informações

Há muitos recursos interessantes que o popover traz para a plataforma. Para saber mais sobre essa API, incluindo mais informações sobre acessibilidade do recurso e documentação relacionada ao conjunto de recursos, aqui estão algumas leituras recomendadas para mais informações:

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