JSFiddle - React, Tailwind, and code Playground

by Steven Lambert

HTML

<div class="confirm" tabindex="-1" hidden role="dialog" aria-label="Are you sure you want to delete?">
  <h1>Are you sure you want to delete?</h1>
</div>

<button class="noMenu">No Menu</button>

<div>
  <button class="open" aria-haspopup="true" aria-controls="menu" aria-expanded="false">Open Menu</button>
  <div role="menu" id="menu" tabindex="-1">
    <a role="menuitem" href="#" class="delete" tabindex="0">Delete</a>
  </div>
</div>

CSS

[aria-expanded="false"] + [role="menu"] {
  display: none;
}

JavaScript

const button = document.querySelector('.open');
const menu = document.querySelector('[role="menu"]');
const del = document.querySelector('.delete');
const confirm = document.querySelector('.confirm');
const noMenuBtn = document.querySelector('.noMenu');

button.addEventListener('click', () => {
  const state = button.getAttribute('aria-expanded') == 'true'
  button.setAttribute('aria-expanded', !state)
  del.focus()
})

del.addEventListener('click', () => {
  confirm.removeAttribute('hidden');
  confirm.focus();
})

noMenuBtn.addEventListener('click', () => {
  confirm.removeAttribute('hidden');
  confirm.focus();
})