Acessibilidade — Shadwire

O que vem pronto

Área	O que o componente já faz
Elemento nativo primeiro	Dialog, Alert Dialog, Sheet e Drawer usam o `<dialog>` nativo: o navegador cuida de prender o foco, do `Esc` e de devolver o foco ao fechar. Checkbox, Radio Group e Switch são inputs nativos estilizados.
Papéis e estados	Tabs expõe `tablist`/`tab`/`tabpanel`; Select é um combobox APG com `aria-activedescendant`; Toggle usa `aria-pressed`; Progress expõe `aria-valuenow`.
Teclado	As setas navegam em menus, tabs, select e toggle group; digitar as primeiras letras leva ao item em menus e no select; Esc fecha overlays.
Foco visível	Todo controle interativo mostra um anel de foco na cor `ring` quando está em `:focus-visible`.
Decoração fica escondida	Ícones renderizam `aria-hidden="true"` por padrão; separadores decorativos saem da árvore de acessibilidade.

No repositório do Shadwire, cada componente tem testes de renderização, e um teste de acessibilidade percorre as páginas do site conferindo estrutura, rótulos e navegação. Os testes no navegador rodam em Chrome headless a cada mudança.

O que fica por sua conta

Nomear overlays

O <dialog> cuida do foco e do teclado, mas não tem como inventar um nome. Todo dialog, sheet e drawer precisa do componente de título; use class: "sr-only" quando o layout não mostrar um título visível.

<%= ui_dialog_content do %>
  <%= ui_dialog_header do %>
    <%= ui_dialog_title(class: "sr-only") { "Confirm deletion" } %>
  <% end %>
  <p>This action cannot be undone.</p>
<% end %>

Nomear ícones que carregam significado

Um ícone ao lado de texto é decoração e deve continuar escondido. Um ícone sozinho é o rótulo, então passe label: ou rotule o controle em volta dele. Mais detalhes na página Ícones.

<%= ui_icon("bell", label: "Notifications") %>

Associar rótulo e controle

Como não existe form builder, você define for: e id:. O ui_field organiza a linha, mas não tem como adivinhar o id do controle. Veja Formulários.

Contraste depois de mudar o tema

As cores padrão têm contraste suficiente. Se você mudar, confira as suas: altere <superfície> e <superfície>-foreground juntos e teste nos dois modos.

Hierarquia de títulos

ui_card_title e ui_dialog_title definem a aparência de um título, não o nível dele. Se a página precisa de uma hierarquia de títulos, coloque os h1–h3 você mesmo.

Testando no seu app

Os componentes instalados fazem parte do seu código, então você os testa como qualquer outro ViewComponent. Garanta que os testes conferem o nome acessível, porque ele depende do que você passa:

test "dialog renders a native <dialog> with an accessible name" do
  render_inline(Ui::Dialog::ContentComponent.new) do
    render_inline(Ui::Dialog::TitleComponent.new) { "Edit profile" }
  end

  assert_selector "dialog[aria-labelledby]"
  assert_text "Edit profile"
end

Componentes interativos precisam de navegador

Foco, teclado e o comportamento do <dialog> só dá para testar em teste de sistema. Um teste de renderização confere a marcação, não se o Esc fecha o diálogo.

Encontrou um problema?

Se um componente tem um problema de acessibilidade, o bug é do Shadwire, não do seu app. Abra uma issue. Enquanto isso, o arquivo é seu e você pode corrigi-lo localmente; rode bin/shadwire diff antes do próximo update para não perder a correção.