[Dúvida] Há problema quando aperto o botão e não aparece a classe ativa?

Bom, minha única dúvida é que eu estou usando o Microsoft Edge, segui os passos da professora ao inserir a classe ativa quando utilizamos o "Enter" e o "Space", porém, quando eu vou no meu navegador abro a aba do DevTools de Elements e testo os botões, eles funcionam perfeitamente, porém, quando eu faço esse processo não aparece nas classes que a classe "ativa" está lá, nem sequer uma ação corresponde aparece. (Literalmente está funcionando somente com o Enter e o Space, caso eu queira usa alguma outra tecla, ele estará me retornando false.

main.js

function tocaSom(idElementoAudio){
    document.querySelector(idElementoAudio).play();
}

const listaDeTeclas = document.querySelectorAll('.tecla');

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

    const tecla = listaDeTeclas[contador];

    const instrumento = tecla.classList[1];

    const idAudio = `#som_${instrumento}`;

    tecla.onclick = function () {
        tocaSom(idAudio);
    }

    tecla.onkeydown = function (evento) {

        if (evento.code === 'Space') {
        tecla.classList.add('ativa');
    }

    if (evento.code === 'Enter') {
        tecla.classList.add('ativa');

    }

    tecla.onkeyup = function() {
        tecla.classList.remove('ativa')
    }

}

}