KPC
Kevin Powell - Community•3w ago
BlueBeka

Dropdown component made from popover

I'm trying to make a dropdown component using the new html popover and css anchor positioning apis. I was wounding if anyone could help me with the semantics and accessibility side of things. I think I've got it going pretty good but would love a second opinion from others. In terms of keyboard accessibility, do I just need to add support for the up and down arrow, as well as page up and down? I think everything else should be handle by the button elements. Do I just add this as an onkeydown event listener to the popover element? Here's the html: 
<div class="dropdown">
  <input type="hidden" name="dropdown-1" value="option-1" />

  <button
    role="combobox"
    type="button"
    popovertarget="dropdown-1"
    popovertargetaction="toggle"
  >
    <span>Select an item...</span>
  </button>

  <div role="group" popover="auto" id="dropdown-1">
    <div role="listbox">
      <div role="listitem">
        <button
          role="option"
          aria-selected="true"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 1
        </button>
      </div>
      <div role="listitem">
        <button
          role="option"
          aria-selected="false"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 2
        </button>
      </div>
      <div role="listitem">
        <button
          role="option"
          aria-selected="false"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 3
        </button>
      </div>
    </div>
  </div>
</div>
<div class="dropdown">
  <input type="hidden" name="dropdown-1" value="option-1" />

  <button
    role="combobox"
    type="button"
    popovertarget="dropdown-1"
    popovertargetaction="toggle"
  >
    <span>Select an item...</span>
  </button>

  <div role="group" popover="auto" id="dropdown-1">
    <div role="listbox">
      <div role="listitem">
        <button
          role="option"
          aria-selected="true"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 1
        </button>
      </div>
      <div role="listitem">
        <button
          role="option"
          aria-selected="false"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 2
        </button>
      </div>
      <div role="listitem">
        <button
          role="option"
          aria-selected="false"
          type="button"
          popovertarget="dropdown-1"
          popovertargetaction="hide"
        >
          Option 3
        </button>
      </div>
    </div>
  </div>
</div>
3 Replies
BlueBeka
BlueBekaOP•3w ago
here's the css if you want that too (no JS yet): 
.dropdown {
  display: inline-block;
  width: 600px;

  & [role="combobox"] {
    padding: 8px;
    background-color: grey;
    display: block;
    cursor: pointer;
    width: 100%;
    border: none;
    anchor-name: --anchor-dropdown-1;
  }

  & [popover] {
    position: absolute;
    top: anchor(bottom);
    left: anchor(left);
    right: anchor(right);
    width: auto;
    margin: 0;
    padding: 0;
    opacity: 0;
    border: none;
    border-top: 2px solid black;
    background-color: grey;
    transition-property: display, opacity;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
    transition-behavior: allow-discrete;
    position-anchor: --anchor-dropdown-1;

    &:popover-open {
      opacity: 1;

      @starting-style {
        opacity: 0;
      }
    }
  }

  & [role="listbox"] {
    display: flex;
    flex-direction: column;
    max-height: 75vh;
    overflow-y: auto;
  }

  & [role="option"] {
    width: 100%;
    padding: 8px 6px;
    cursor: pointer;
    background-color: grey;
    border: none;

    &:hover {
      background-color: lightgrey;
    }
  }
}
.dropdown {
  display: inline-block;
  width: 600px;

  & [role="combobox"] {
    padding: 8px;
    background-color: grey;
    display: block;
    cursor: pointer;
    width: 100%;
    border: none;
    anchor-name: --anchor-dropdown-1;
  }

  & [popover] {
    position: absolute;
    top: anchor(bottom);
    left: anchor(left);
    right: anchor(right);
    width: auto;
    margin: 0;
    padding: 0;
    opacity: 0;
    border: none;
    border-top: 2px solid black;
    background-color: grey;
    transition-property: display, opacity;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
    transition-behavior: allow-discrete;
    position-anchor: --anchor-dropdown-1;

    &:popover-open {
      opacity: 1;

      @starting-style {
        opacity: 0;
      }
    }
  }

  & [role="listbox"] {
    display: flex;
    flex-direction: column;
    max-height: 75vh;
    overflow-y: auto;
  }

  & [role="option"] {
    width: 100%;
    padding: 8px 6px;
    cursor: pointer;
    background-color: grey;
    border: none;

    &:hover {
      background-color: lightgrey;
    }
  }
}
dys 🐙
dys 🐙•3w ago
BlueBeka
BlueBekaOP•3w ago

Did you find this page helpful?