Elastic Slider

Notas de acessibilidade

Teclado verificado por teste e em navegador: a trilha entra na sequência de Tab, ArrowRight e ArrowUp sobem um step, ArrowLeft e ArrowDown descem, Shift com seta e Page Up/Page Down andam dez steps, Home e End vão às pontas e nenhuma tecla passa dos limites; o outline de foco aparece para foco de teclado e não para um toque ou clique. Um slider desabilitado continua alcançável por Tab, é anunciado por aria-disabled e recusa teclas e ponteiro. Leitor de tela verificado por teste: a trilha tem papel slider, o rótulo é o nome acessível (sobrescrevível por aria-label), aria-valuemin, aria-valuemax e aria-valuenow acompanham o valor e aria-valuetext anuncia o valor formatado — "40%", não "0.4". O rótulo, o valor, as marcas, o preenchimento e a alça são desenhados com aria-hidden, porque já são o nome e o valuetext: lidos de novo, diriam tudo duas vezes. Touch verificado em viewport de 375px com emulação de toque: a trilha inteira é o alvo, com 36px de altura e a largura do contêiner, acima do piso de 24x24 da política de interação do Up Web DS; tocar define o valor na posição tocada e arrastar o acompanha. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — o valor é o estado e muda na hora em qualquer caso; o que sai é a física por cima dele: a mola do preenchimento salta direto para o destino, o elástico além das pontas não estica e a escala da alça não anima, tudo via useReducedMotion. As transições de cor das marcas e do preenchimento não são movimento e permanecem. Timing: o upstream usava duration-200 nas marcas; a revisão escolheu duration-default, que é o tempo do preenchimento ao lado delas — uma superfície, um tempo.