Modal acessível com dialog

<!-- Botão que abre o modal -->
<button type="button" id="btn-abrir-modal">Abrir modal</button>

<!-- Modal -->
<dialog id="meu-modal" aria-labelledby="modal-titulo" aria-describedby="modal-descricao">
  <div class="modal__inner">
    <header class="modal__header">
      <h2 id="modal-titulo">Confirmar ação</h2>
      <button class="modal__fechar" aria-label="Fechar modal" id="btn-fechar-modal">
        &times;
      </button>
    </header>

    <p id="modal-descricao">Tem certeza que deseja realizar esta ação?</p>

    <footer class="modal__footer">
      <button type="button" class="btn btn--secundario" id="btn-cancelar">Cancelar</button>
      <button type="button" class="btn btn--perigo">Confirmar</button>
    </footer>
  </div>
</dialog>

<script>
  const modal    = document.getElementById('meu-modal');
  const btnAbrir = document.getElementById('btn-abrir-modal');

  btnAbrir.addEventListener('click', () => modal.showModal());
  document.getElementById('btn-fechar-modal').addEventListener('click', () => modal.close());
  document.getElementById('btn-cancelar').addEventListener('click', () => modal.close());
  modal.addEventListener('click', (e) => { if (e.target === modal) modal.close(); });
</script>