Buttons with dropdown should feature proper semantic markup

[mlewand]

📝 Provide a description of the improvement

Extracted from #1037

The screen reader should properly announce that the button has a popup,

We already cover aria-haspopup well enough.

However, we must handle aria-expanded for dropdown button views. Interestingly split buttons already have it implemented, so this could serve as a reference.

---

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

[mlewand]

There has been some discussion in #1037 already regarding this:

@oleq wrote:

1. Our dropdowns have no aria-expanded but should have (see an example from w3c https://www.w3.org/TR/wai-aria-practices-1.1/examples/listbox/listbox-collapsible.html)
   • The only places that have that attribute are CollapsibleView (list properties: start index, reversed section) and SplitButtonView (a button for dropdowns with an “extra arrow”).

@Comandeer wrote:

The screen reader should properly announce that the button has a popup,

It can be done by adding the [aria-haspopup] and [aria-expanded] attributes to buttons triggering dropdowns. Depending on what the dropdown is, the [aria-haspopup] attribute can take different values instead of generic true (e.g. menu if the dropdown is some kind of a menu). We also need to ensure that the dropdown itself has an appropriate role (e.g. [role=menu] in case of menu dropdown). ARIA Practices contains a decent menu button sample.

[Comandeer]

Tested on [https://ckeditor.com/docs/ckeditor5/latest/examples/builds-custom/full-featured-editor.html](https://ckeditor.com/docs/ckeditor5/latest/examples/builds-custom/full-featured-editor.htmla) and "Text Color" button.

1. The button is correctly marked up as having a submenu by the [aria-haspopup=true] attribute

   1. Optionally: check if we can't find more concrete value for this attribute (this could be tricky as it probably depends on context – some buttons would have menus, some grids, etc.)

2. There is no info about the state of the menu – if it is expanded or collapsed. It could be fixed by adding the [aria-expanded] attribute to the button.

3. The menu itself does not have a proper role. It is a requirement in ARIA spec:

   Authors MUST ensure that the role of the element that serves as the container for the popup content is menu, listbox, tree, grid, or dialog, and that the value of aria-haspopup matches the role of the popup container.

4. We can also think about adding the [aria-controls] attribute to indicate the relationship between the button and the menu.