Basic Popover

<!--
  Click-triggered, so the trigger is a real <button> and the relationship is
  spelled out: aria-expanded says whether the panel is showing, aria-controls
  says which panel. aria-haspopup="dialog" - NOT "menu": this holds prose, and
  promising a menu makes a screen reader announce arrow-key navigation that
  does not exist here.

  The wrapper is position: relative so the panel anchors to the trigger rather
  than the viewport. That is the whole positioning story - no floating library,
  no measurement.
-->
<div class="pop">
  <button
    class="pop__trigger"
    type="button"
    aria-haspopup="dialog"
    aria-expanded="false"
    aria-controls="pop-basic-panel"
  >
    Storage details
  </button>

  <div class="pop__panel" id="pop-basic-panel" role="dialog" aria-label="Storage details" hidden>
    <p class="pop__text">
      You are using <strong>18.2 GB</strong> of 50 GB. Old versions are pruned
      after 30 days.
    </p>
  </div>
</div>

<script>
  document.querySelectorAll('.pop').forEach(function (root) {
    var trigger = root.querySelector('.pop__trigger');
    var panel = root.querySelector('.pop__panel');

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

    trigger.addEventListener('click', function () {
      setOpen(trigger.getAttribute('aria-expanded') !== 'true');
    });

    // Escape closes and gives focus back. A popover the keyboard can open but
    // not leave is worse than one that never opened.
    root.addEventListener('keydown', function (event) {
      if (event.key !== 'Escape') return;
      setOpen(false);
      trigger.focus();
    });

    // Outside click dismisses - mousedown, not click, so the popover is gone
    // before the thing underneath reacts.
    document.addEventListener('mousedown', function (event) {
      if (!root.contains(event.target)) setOpen(false);
    });
  });
</script>