Profile Dropdown

<!--
  Two details specific to this shape:

  1. The HEADER is not a menuitem. It is your name and email - information, not
     a command. Making it focusable adds a stop to the arrow-key ring that does
     nothing when you press Enter on it. It sits outside role="menu" entirely,
     which is also why the trigger's aria-label names the person: the popup's
     name is not the button's name.

  2. Sign out is separated but is NOT a destructive action dressed in red. It is
     reversible - you log back in. Red here would spend the alarm you need for
     "delete account", one row below in most real apps.

  The avatar is decorative (alt=""): the name is right beside it in text, and a
  screen reader announcing "Avery Chen, image" then "Avery Chen" is noise.
-->
<div class="pdd">
  <button
    class="pdd__trigger"
    type="button"
    aria-haspopup="menu"
    aria-expanded="false"
    aria-controls="pdd-menu"
    aria-label="Account menu for Avery Chen"
  >
    <img class="pdd__avatar" src="/avatars/avery.jpg" alt="" width="32" height="32" />
  </button>

  <div class="pdd__menu" id="pdd-menu" role="menu" aria-label="Account" hidden>
    <div class="pdd__head">
      <p class="pdd__name">Avery Chen</p>
      <p class="pdd__email">avery@northwind.io</p>
    </div>

    <hr class="pdd__sep" role="separator" />

    <button class="pdd__item" type="button" role="menuitem">Profile</button>
    <button class="pdd__item" type="button" role="menuitem">Settings</button>
    <button class="pdd__item" type="button" role="menuitem">Keyboard shortcuts</button>

    <hr class="pdd__sep" role="separator" />

    <button class="pdd__item" type="button" role="menuitem">Sign out</button>
  </div>
</div>

<script>
  document.querySelectorAll('.pdd').forEach(function (root) {
    var trigger = root.querySelector('.pdd__trigger');
    var menu = root.querySelector('.pdd__menu');
    var items = Array.prototype.slice.call(root.querySelectorAll('.pdd__item'));

    function setOpen(open) {
      menu.hidden = !open;
      trigger.setAttribute('aria-expanded', String(open));
    }

    function close() {
      setOpen(false);
      trigger.focus();
    }

    trigger.addEventListener('click', function () {
      var next = trigger.getAttribute('aria-expanded') !== 'true';
      setOpen(next);
      if (next && items[0]) items[0].focus();
    });

    root.addEventListener('keydown', function (event) {
      if (event.key === 'Escape') {
        close();
        return;
      }
      if (event.key === 'Home') {
        event.preventDefault();
        items[0].focus();
        return;
      }
      if (event.key === 'End') {
        event.preventDefault();
        items[items.length - 1].focus();
        return;
      }
      if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return;
      var index = items.indexOf(document.activeElement);
      if (index === -1) return;
      event.preventDefault();
      var next = event.key === 'ArrowDown' ? index + 1 : index - 1;
      items[(next + items.length) % items.length].focus();
    });

    items.forEach(function (item) {
      item.addEventListener('click', close);
    });

    document.addEventListener('mousedown', function (event) {
      if (!root.contains(event.target)) setOpen(false);
    });
  });
</script>