Consider using Listbox pattern for dropdowns

[Mgsy]

📝 Provide a description of the improvement

This improvement is about considering using the Listbox pattern for dropdown buttons, e.g. "Text alignment", "Font family", "Font size" and "Font color" in the toolbar.

Things to consider:

• Follow the semantics and interactions recommended in the ARIA Listbox pattern. 
  • For example, for a listbox that functions similarly to a native <select> element, the Collapsible Dropdown Listbox Example would be the best choice, which uses a <button> element to trigger a popup listbox element.
• On the triggering button element:
  • Ensure that the element has an id. 
  • Add an aria-haspopup="listbox" attribute. 
  • Add an aria-labelledby attribute which references a visible label before the button, and the button itself; this will announce the control label and then the current value. 
  • Ensure that the <button> element has an aria-expanded attribute set to "true" when the pop-up is displayed
• On the list of options: Add a role="listbox" attribute. Add an aria-labelledby attribute, referencing the visible label. Add a role="option" attribute to each option within the listbox.

---

If you'd like to see this improvement implemented, add a 👍 reaction to this post.

[Witoso]

Most likely fixed by #13250
@oleq could you confirm?

[oleq]

@mmotyczynska could you confirm? 😀

[mmotyczynska]

In #13250 we fixed accessibility for Font size, Font family and Heading features. We decided to go with a different approach than described in this ticket. Instead of using Listbox pattern we used Menu pattern as it seems to be more relevant in the text editor.

As the next step we are using the same approach to cover other dropdown lists in the editor:

• Code block
• Image resize (options list)
• Language
• Special characters (category list)
• Table (border style list)

This fix however will not be applied to grid-like dropdown lists yet (color grids, lists, special characters etc.). We will have to verify which pattern will be most appropriate for grids.

[Witoso]

Thanks @mmotyczynska, and "Text alignment" falls under which category?

[mmotyczynska]

That's a good question. Text alignment looks like a list but it's actually implemented as a toolbar with buttons that are vertically aligned. So I'd say it's a third category. Two other features implemented in the same way are Image styles and Highlight (this one horizontally aligned).

All three of these features have already improved accessibility. What I mean by that is that screen readers correctly announce the name of the feature and, after opening a dropdown, they announce which option is selected. And when you're navigating through the options in the dropdown, it also announces whether the option is selected or not.

[Witoso]

I think @Mgsy we may close this ticket and reach out to our support contact so that we improved the accessibility of the dropdowns but in a different way, and it's gonna be available in the next release. WDYT?