Ainda consigo navegar com o TAB nos itens abaixo modal

Prezados, Mesmo com as alterações sugeridas pelo instrutor, ainda consigo navegar com o TAB nos campos abaixo do modal. Segue código do index.html:

    <div class="dialogNewsletter" id="dialogNewsletter" role="dialog" aria-labelledby="tituloDialog">
      <div class="dialogNewsletter-body">

        <h2 class="dialogNewsletter-titulo" id="tituloDialog">News sem spam</h2>
        <h3 class="dialogNewsletter-texto">
          Assine nossa newsletter para receber notícias técnicas sem spam!
        </h3>
        <form class="dialogNewsletter-form">
          <label class="dialogNewsletter-label" for="emailNewsletter">
            Email:
          </label>
          <input type="email" class="dialogNewsletter-campo" placeholder="Digite seu e-mail..." id="emailNewsletter">
          <button class="dialogNewsletter-btn">
            Assinar newsletter
          </button>
          <button class="dialogNewsletter-fechar">
            X
          </button>
        </form>
      </div>
      <div class="dialogNewsletter-overlay"></div>
    </div> <!--fim .dialogNewsletter--> `

Do dialog.js:

var btnAbreDialog = document.querySelector('#abreDialog');
var dialog = document.querySelector('.dialogNewsletter');
var dialogBody = document.querySelector('.dialogNewsletter-body');
var dialogOverlay = document.querySelector('.dialogNewsletter-overlay');

btnAbreDialog.style.display = 'block';


// Quando abrir a dialog...
btnAbreDialog.addEventListener('click', function() {
  dialog.classList.add('dialogNewsletter--aberto');
  document.querySelector('.dialogNewsletter-campo').focus();
});

function fechandoDialog() {
  document.activeElement.blur();
  dialog.classList.remove('dialogNewsletter--aberto');     
}

// Listeners
document.querySelector('.dialogNewsletter-fechar').addEventListener('click', fechandoDialog); 

`Qual o código que evita essa leitura abaixo do modal, dialog, popup ? `