Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Problemas ao clicar no checkbox

Dificuldade em clicar no checkbox com o leitor de tela

Olá, boa tarde. Me chamo Guido, e sou cego. Já sou desenvolvedor, e estou fazendo a nova formação do javascript, e estou fazendo o primeiro curso que é o da lista de compras. Na aula 3, atividade 2, devo implementar o click na label, para adicionar a classe checked se o input for marcado, ou retirar a classe checked se ele for desmarcado. No entanto, como o input do tipo checkbox, que está dentro da label tem um display none setado no css, não consigo localizar esse input com o leitor de telas, e portanto não consigo clicar nele usando o teclado, já que não uso o mouse pra clicar. Como posso resolver isso? Abraços a todos.

1 resposta
solução!

Já foi resolvido. Fiz da seguinte forma:


    // cria a label que conterá o input
    const label = document.createElement('label');
    label.setAttribute('for', 'checkbox-' + contador);
    label.setAttribute('role', 'checkbox');
    label.setAttribute('aria-label', 'Marcar esta tarefa como comprada');
    label.setAttribute('aria-checked', false);

    //atribui o evento de click para a label com o input checkbox
    label.addEventListener('click', function (evento) {
        const inputCheckbox = evento.currentTarget.querySelector('.checkbox-input');
        const divCheckbox = evento.currentTarget.querySelector('.checkbox-customizado');

        if (inputCheckbox.checked)
            divCheckbox.classList.add('checked');
        else
            divCheckbox.classList.remove('checked');
        label.setAttribute('aria-checked', inputCheckbox.checked);
    });```