Scroll Area

Notas de acessibilidade

Teclado verificado por teste: o viewport entra na sequência de tabulação exatamente quando há algo a rolar — conteúdo além da dobra que nenhuma parada de Tab alcança é conteúdo que quem usa teclado nunca vê — e sai dela quando o conteúdo cabe, porque uma parada que não faz nada é uma parada a mais para atravessar. Com foco, as setas rolam o viewport, verificado em navegador, e o anel de foco aparece na raiz, que carrega o raio e a borda de quem usa; a origem desenhava o anel no viewport e copiava o raio com rounded-[inherit]. As barras ficam fora da sequência de tabulação: são affordance de ponteiro, e o viewport focado é a de teclado — uma parada, não três. Leitor de tela verificado por teste: o viewport não tem papel próprio, então uma região que merece ser anunciada recebe role="region" e nome na raiz, e é assim em todos os exemplos. As barras ficam ao lado do viewport e não dentro dele: a origem passava a barra horizontal como filho, e ela rolava junto com o conteúdo que devia controlar. Touch verificado em viewport de 375px com emulação de toque: o viewport é o alvo e mede bem acima de 24x24, o arrasto rola a região e a página não ganha rolagem horizontal. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — não há deslocamento animado: a rolagem é do usuário, e as transições do anel e do polegar da barra são de sombra e cor, que permanecem.