Dropdowns break ARIA Accessibility

[bezo97]

Hi, I'm testing Pico with Lighthouse and found an accessibility issue with the Dropdown. As per the documentation:

<details role="list">
  <summary aria-haspopup="listbox">Dropdown</summary>
  <ul role="listbox">
    <li><a>Action</a></li>
    <li><a>Another action</a></li>
    <li><a>Something else here</a></li>
  </ul>
</details>

Styling with <details role="list"> breaks accessibility because the list role requires that children have the listitem role. [spec]

---

My suggestion:

• Either avoid using aria roles for styling, or
• Use role="group" on the ul element, which is accepted by the spec, passes Lighthouse, and also doesn't make a difference on the dropdown style. I can't tell whether this makes sense for accessibility.

The role="group" solution is pretty much a workaround that's good enough for me, but it might be worth filing an Issue for this.