A API Popover chega ao valor de referência

Una Kravets

Está chegando a hora! Um dos recursos que mais me empolgam acaba de chegar a todos os navegadores modernos e faz parte oficialmente da Baseline 2024. Esse recurso é a API Popover. O Popover oferece muitas primitivas e recursos incríveis para desenvolvedores para criar 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 vão aparecer na camada superior, acima do restante da página, para que você não precise mexer em z-index.
• Funcionalidade de dispensa leve. Clicar fora da área do pop-up fecha o pop-up e retorna o foco.
• Gerenciamento de foco padrão. Abrir o pop-up faz com que a próxima guia pare dentro dele.
• Vinculação de teclado acessível. Pressionar a tecla esc ou alternar duas vezes fecha o pop-up e retorna o foco.
• Vinculação de componentes acessível. Conexão semântica de um elemento de pop-up a um gatilho de pop-up.

Criar pop-ups

Criar pop-ups é muito simples. Para usar valores padrão, tudo o que você precisa é de um button para acionar o popover 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-up.
• Por fim, para conectar o botão ao pop-up, defina o popovertarget do botão como o valor do id do elemento pop-up.

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-over, defina explicitamente os tipos de pop-over. Por exemplo, usar um atributo popover sem valor é o mesmo que popover="auto". O valor auto ativa o comportamento de dispensa leve e fecha automaticamente outros pop-ups. Use popover="manual" e adicione um botão de fechamento. Os pop-ups manuais não fecham outros pop-ups nem permitem que os usuários os descartem clicando na IU. Você cria 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>

Pop-up e caixa de diálogo modal

Você pode estar se perguntando se precisa de um popover quando há uma caixa de diálogo. A resposta é: talvez não.

É importante observar que o atributo de popover não fornece semântica por conta própria. Embora agora seja possível criar experiências semelhantes a caixas de diálogo com o pop-up, há algumas diferenças importantes entre os dois:

Conclusão e leitura complementar

O popover traz muitos 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, confira as leituras recomendadas a seguir:

• Semântica e o atributo popover: quando usar cada um deles? por Hidde de Vries
• Sobre a acessibilidade de pop-ups: o que o navegador faz e o que não faz, por Hidde de Vries
• Documentação do MDN sobre o pop-up