bug no código

Boa noite, chará! Meu primeiro post aqui. Foi ótima sua pergunta, pq verifiquei que isso realmente acontece com o código ao final do curso, e isso me encorajou a procurar a solução! Quando damos Tab com a tecla Espaço ou Enter pressionada, mudamos o foco do botão antes mesmo do nosso código detectar o evento "onkeyup".

A solução que encontrei foi detectar também o evento 'onblur' para também remover a classe "ativa". O evento 'onblur' detecta quando o foco saiu daquele elemento (oposto do evento 'onfocus'). Dessa forma, quando apertarmos Tab e o foco mudar para a proxima tecla, a classe 'ativa' é removida. adicione esse trecho de código à sua rotina "for".

Com certeza tem outras maneiras de economizar a linha 'classList.remove', mas estou iniciando em JS ainda kkkkk não aprendi a "juntar" eventos.

for (let contador = 0; contador < listaDeTeclas.length; contador++) {

    //extrai o #id de cada uma das teclas
    const tecla = listaDeTeclas[contador];
    const instrumento = tecla.classList[1];
    const idAudio = `#som_${instrumento}`; //template string

    //verifica SE o botão foi clicado
    tecla.onclick = function () {
        tocaSom(idAudio);
    }

    //verifica SE as teclas de ativação Enter ou Space foram pressionadas
    tecla.onkeydown = function (evento) {
        if (evento.code == "Enter" || evento.code == "Space"){
        tecla.classList.add('ativa'); //deixa a tecla vermelha
        tocaSom(idAudio);    
        console.log(evento);    
        }
    }

    //volta para o estilo normal quando a tecla não está mais pressionada
    tecla.onkeyup = function () {
    tecla.classList.remove('ativa'); //tecla volta ao normal
    }

    //volta para o estilo normal quando o foco saiu do botão
    tecla.onblur = function (evento) {
        tecla.classList.remove('ativa');
        }
    }

muito legal esta dica! adicionei uma coisa legal tbm, adicionei a classe active

perceberam que quando clicamos com o mouse tem uma sombra vermelha mais escura? ,então estava na classe active

coloquei desta forma e deu certo:

if(evento.code === 'Space' || evento.code === 'Enter'){
            tecla.classList.add('ativa','active');
            }       
    }
    tecla.onkeyup = function (){
        tecla.classList.remove('ativa','active');
        }
    tecla.onblur = function (evento) {
        tecla.classList.remove('ativa','active');
        }

coloquei nas três funções

espero que ajude!

Nossa essas dicas ajudou bastante. Valeu pessoal por compartilhar

Boa noite, gostei das dicas! adicionei também no if que faz a verificação das teclas o Enter Numérico.

tecla.onkeydown = function (evento){ if(evento.code === 'Enter' || evento.code === 'Space' || evento.code === 'NumpadEnter') { tecla.classList.add('ativa', 'active'); } }

Existe uma diferença também entre manter pressionado o Espaço e o Enter, manter pressionado o Espaço ele não toca até você soltar, porém com o Enter ele fica tocando por diversas vezes. Alguém identificou e conseguiu solucionar isso?