HarryAdney/Accessible collapsible menu list.html

## Accessible collapsible menu list.html
<!DOCTYPE html>
<html lang="en">
<head>
  <!- https://www.w3.org/TR/2018/NOTE-wai-aria-practices-1.1-20180726/examples/listbox/listbox-collapsible.html -->
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Accessible, collapsible menu list</title>
</head>
<body>

<p>
  Choose your favorite transuranic element (actinide or transactinide).
</p>
<div class="listbox-area">
  <div class="left-area">
    <span id="exp_elem">
      Choose an element:
    </span>
    <div id="exp_wrapper">
      <button aria-haspopup="listbox"
              aria-labelledby="exp_elem exp_button"
              id="exp_button">
        Neptunium
      </button>
      <ul id="exp_elem_list"
          tabindex="-1"
          role="listbox"
          aria-labelledby="exp_elem"
          class="hidden">
        <li id="exp_elem_Np" role="option">
          Neptunium
        </li>
        <li id="exp_elem_Pu" role="option">
          Plutonium
        </li>
        <li id="exp_elem_Am" role="option">
          Americium
        </li>
        <li id="exp_elem_Cm" role="option">
          Curium
        </li>
        <li id="exp_elem_Bk" role="option">
          Berkelium
        </li>
        <li id="exp_elem_Cf" role="option">
          Californium
        </li>
        <li id="exp_elem_Es" role="option">
          Einsteinium
        </li>
        <li id="exp_elem_Fm" role="option">
          Fermium
        </li>
        <li id="exp_elem_Md" role="option">
          Mendelevium
        </li>
        <li id="exp_elem_No" role="option">
          Nobelium
        </li>
        <li id="exp_elem_Lr" role="option">
          Lawrencium
        </li>
        <li id="exp_elem_Rf" role="option">
          Rutherfordium
        </li>
        <li id="exp_elem_Db" role="option">
          Dubnium
        </li>
        <li id="exp_elem_Sg" role="option">
          Seaborgium
        </li>
        <li id="exp_elem_Bh" role="option">
          Bohrium
        </li>
        <li id="exp_elem_Hs" role="option">
          Hassium
        </li>
        <li id="exp_elem_Mt" role="option">
          Meitnerium
        </li>
        <li id="exp_elem_Ds" role="option">
          Darmstadtium
        </li>
        <li id="exp_elem_Rg" role="option">
          Roentgenium
        </li>
        <li id="exp_elem_Cn" role="option">
          Copernicium
        </li>
        <li id="exp_elem_Nh" role="option">
          Nihonium
        </li>
        <li id="exp_elem_Fl" role="option">
          Flerovium
        </li>
        <li id="exp_elem_Mc" role="option">
          Moscovium
        </li>
        <li id="exp_elem_Lv" role="option">
          Livermorium
        </li>
        <li id="exp_elem_Ts" role="option">
          Tennessine
        </li>
        <li id="exp_elem_Og" role="option">
          Oganesson
        </li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>