Status Button

Notas de acessibilidade

Verificado em tests/e2e/status-button.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado verificado em navegador: o botão entra na sequência de Tab com foco visível, Enter dispara a ação, e durante a ação o foco permanece nele — ele fica aria-disabled em vez de disabled, então o foco não é devolvido à página no meio de um envio — e um segundo acionamento é ignorado, inclusive o submit de formulário. Leitor de tela verificado pela árvore de acessibilidade do navegador: o nome é o rótulo quando ocioso, "Carregando" enquanto roda e o successLabel (ou "Concluído") no sucesso. O primeiro spec mostrou que o Chrome não tira nome de dentro de um role="status", e o botão ficava sem nome enquanto carregava; agora os estados desenhados são aria-hidden, o nome vem de um span sr-only e o anúncio de uma região aria-live="polite" sempre montada, vazia quando ociosa, para que voltar ao rótulo não seja anunciado. aria-busy saiu, porque num ancestral da região ele pode segurar o anúncio que deveria sair. Os textos anunciados são props para produtos em outro idioma. A largura não muda em nenhum quadro do ciclo. Falha: com `onError` o erro é entregue à página e o botão volta a idle; sem ele o erro é relançado, para nunca ser engolido. Formulário com useActionState verificado em navegador. Touch verificado em 320px com emulação de toque: os alvos de estados, variantes, tamanhos e formulário atendem ao piso de 24x24 e o toque percorre o ciclo inteiro. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — a troca vira um cross-fade sem deslocamento nem blur, o pulo do check some (useReducedMotion) e o giro do spinner, que é ambiente, para (motion-safe:animate-spin), restando o arco e o anúncio; o ciclo se completa igual. O upstream escalonava dez barras com um keyframe que nenhum projeto tem; o giro nativo do Tailwind dispensou uma capability para um spinner só.