Tenho uma implementação personalizada de controle deslizante. Quando ele está em :focus:visible, uso as teclas de seta ( Up/ Lefte Right/ Down) para mover o polegar. Suponho que isso seja suficiente para declarar o controle role="slider"em navegadores de desktop.
O que devo oferecer suporte em dispositivos com tela sensível ao toque?
MDN diz apenas:
Aviso: Para alterar o valor do controle deslizante, as tecnologias assistivas baseadas em toque precisam responder aos gestos do usuário para aumentar e diminuir o valor, sintetizando eventos-chave. Teste completamente os widgets de controle deslizante usando tecnologias assistivas em dispositivos onde o toque é o mecanismo de entrada principal antes de usar a função de controle deslizante (e todos os widgets de intervalo) .
ATUALIZAÇÃO Eu realmente acredito que não há necessidade de um MRE aqui, porque minha implementação é bem simples:
Eu uso o comportamento padrão de arrasto para o polegar. Há muitas implementações de arrasto, como uma incluída no jQuery UI , mas eu preferi o arrasto do interact.js (eixo Y travado, ou seja, unidimensional).
Para tornar o controle amigável para aqueles que têm dificuldades com movimentos E usuários de leitores de tela, eu também cuido das teclas de seta:
function onArrowKey(e)
{
if (mouseDraggingIsInProcess)
return;
if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(e.key))
{
e.stopImmediatePropagation();
e.preventDefault();
if (e.type == 'keydown')
{
const thumbPositionY = match(e)
(
when(e => e.ctrlKey, 1),
when(e => e.shiftKey, (1 + options.stepsCount) / 2),
otherwise(options.stepsCount)
);
if ('ArrowDown' == e.key || 'ArrowRight' == e.key)
onThumbPositionChange(0, thumbPositionY);
else if ('ArrowUp' == e.key || 'ArrowLeft' == e.key)
onThumbPositionChange(0, -thumbPositionY);
}
else if (e.type == 'keyup')
{
reset();
}
}
}
control.on('keydown keyup', onArrowKey);
onThumbPositionChange(0, thumbPositionY);é exatamente o mesmo manipulador que é chamado pelo comportamento arrastável .
Além disso, adicionei o divseguinte atributo:
<div aria-label="A joystick. Use arrow keys to move it fast.
Shift makes it move at medium speed. Control makes it move at slow speed.
After releasing the keys it returns to initial position." …>
