Javascript Seleção com teclado (tab) na janela modal JavaScript

EddK · 1 de setembro de 2021

Alguém pode me ajudar? Estou começando em JavaScript. Qual alteração ou adição de código é preciso para conseguir a navegação com o teclado Tab no modal aberto? Ex.: navegar entre os botões copiar, acessar e close? Obs.: Lembrando que no código abaixo consigo sair do modal com esc ou enter.

Segue o código:

HTML:

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>modal</title>
</head>

<body>
  <button class="trigger">Abrir 1</button>

  <div class="cover"></div>
  <div class="dialog" role="dialog" aria-labelledby="title" aria-describedby="description">
    <h2 class="title">Título 1</h2>
    <p class="description">Informação 1</p>
    
    <button>Copiar</button>
    <button>Acessar</button>
    
    <button class="close" aria-label="close">&times;</button>
  </div>
  

</body>

</html>

CSS:

[role="dialog"] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 1em;
  max-height: 30vh;
  max-width: 50vw;
  background: #ddd;
  box-shadow: 0.25em 0.25em #aaa;
  display: none;
  border: 0;
}

[role="dialog"] *+* {
  margin-top: 0.5em;
}

.title {
  font-weight: bold;
}

button {
  cursor: pointer;
  background: #215990;
  border: 0;
  color: #fff;
  padding: 0.125em 0.5em;
}

button:focus,
button:hover {
  outline: 3px solid #d4aa00;
}

.close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  margin-top: 0;
  line-height: 1;
}

[role="dialog"][open=""] {
  display: block;
}

.cover {
  background: green;
  opacity: 0.75;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: none;
}

JAVASCRIPT:

var trigger = document.querySelectorAll('.trigger');
var dialog = document.querySelectorAll('.dialog');
var close = document.querySelectorAll('.close');

function openDialog(dialogIndex) {
  dialog[dialogIndex].setAttribute('open', '');
  close[dialogIndex].focus();
  close[dialogIndex].addEventListener('keydown', function(e) {
    if (e.keyCode == 9) {
      e.preventDefault();
    }
  });
  document.querySelectorAll('.cover')[dialogIndex].style.display = 'block';
  document.addEventListener('keydown', addESC);
}

function closeDialog(dialogIndex) {
  dialog[dialogIndex].removeAttribute('open');
  trigger[dialogIndex].focus();
  document.querySelectorAll('.cover')[dialogIndex].style.display = 'none';
  document.removeEventListener('keydown', addESC);
}

var addESC = function(e) {
  if (e.keyCode == 27) {
    closeDialog(Array.from(dialog).indexOf(document.querySelector('[role="dialog"][open]')));
  }
};

trigger.forEach((element, i) => {
  element.addEventListener('click', function() {
    openDialog(i);
  });
});

close.forEach((element, i) => {
  element.addEventListener('click', function() {
    closeDialog(i);
  });
});

Desde já muito obrigado