Details can be used to build accessible dialogs and dropdown menus. In this example I am using the custom elements that Github built; you can find them on Github at details-dialog-element and details-menu-element.

Related reading:

Details menu

<details class='details-reset'>
  <summary>Robots</summary>
  <details-menu>
    <ul>
      <li>
        <button type='button' role='menuitem'>
          Hubot
        </button>
      </li>
      <li>
        <button type='button' role='menuitem'>
          Bender
        </button>
      </li>
      <li>
        <button type='button' role='menuitem'>
          BB-8
        </button>
      </li>
    </ul>
  </details-menu>
</details>

<details class='details-reset'>
  <summary>
    Preferred robot: <span data-menu-button>None</span>
  </summary>
  <details-menu>
    <ul>
      <li>
        <button type='button' role='menuitem' data-menu-button-text>
          Hubot
        </button>
      </li>
      <li>
        <button type='button' role='menuitem' data-menu-button-text>
          Bender
        </button>
      </li>
      <li>
        <button type='button' role='menuitem' data-menu-button-text>
          BB-8
        </button>
      </li>
    </ul>
  </details-menu>
</details>

Details dialog

Here’s the CSS to make this work:

.details-reset {
  & > summary {
    list-style: none;
  }

  & > summary::before {
    display: none;
  }

  & > summary::-webkit-details-marker {
    display: none;
  }
}

.details-with-dialog[open] > summary {
  cursor: default;
}

.details-with-dialog[open] > summary:before {
  content: ' ';
  background: rgba(0, 0, 0, 0.3);
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
}

details-dialog {
  position: fixed;
  margin: 10vh auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  max-height: 80vh;
  width: 448px;
}

<details class='details-reset details-with-dialog'>
  <summary>Open dialog</summary>
  <details-dialog>
    <p>But you can click anywhere to dismiss without JS.</p>
    <button data-close-dialog type='button' autofocus>
      Close button only works with JS
    </button>
  </details-dialog>
</details>