Dialogs e acessibilidade

[jemluz]

Radix

Apesar do próprio HTML conter tags para dialogs, construir toda a mecânica manualmente é bem mais trabalhoso.

Para facilitar o trabalho podemos recorrer a algumas bibliotecas de UI:

• Radix
  -- Bom suporte de acessibilidade.
  -- Maior liberdade pra estilização própria.
• Chackra
• • Já oferece componentes estilizados.
• HeadLess
  -- É da galera do tailwind
  -- Já vem estilizado tbm.

[jemluz]

Utilizando o Dialog

Documentação aqui

import * as Dialog from '@radix-ui/react-dialog'

<Dialog.Root>
  <Dialog.Trigger asChild>
    <NewTransactionButton>Nova Transação</NewTransactionButton>
  </Dialog.Trigger>

  <Dialog.Portal>
    <Dialog.Overlay>
      <Dialog.Content>
        <Dialog.Title>Nova transação</Dialog.Title>

        <Dialog.Close />
      </Dialog.Content>
    </Dialog.Overlay>
  </Dialog.Portal>
</Dialog.Root>

<Dialog.Root>

• É a raiz do elemento.
• Como se fosse um provider, sem ele não conseguimos habilitar o dialog.

<Dialog.Trigger asChild>

• Cria o mecanismo de abertura do dialog (normalmente um botão).
• O atributo asChield serve para ele assumir apenas a forma do filho (e nesse caso não renderizar 2 botões diferentes por exemplo).

<Dialog.Overlay> Vai habilitar o plano de fundo do dialog.
<Dialog.Content> É onde vai o conteúdo mesmo.
<Dialog.Title> Já define o título com adequações de acessibilidade para leitores de tela.
<Dialog.Close> Cria o botão de fechar o dialog.

Portals

<Dialog.Portal> É um recurso utilizado para abrir a janela do modal fora do acionador (Trigger). Isso permite que a gente possa estilizar o modal para caber na tela inteira.