Header Toolbar Accessibility and Keyboard Navigation

[walberglez]

Header Toolbar Accessibility

When checking accessibility and 508 compliance of the quill editor toolbar using Axe DevTools in Chrome, I noticed an error related to the header dropdown: the header button as well as the header options do not have an accessible name. It could be specified using one of the following options:

• visible text
• aria-label
• aria-labelledby
• title attribute

Right now, the text is being defined using the CSS content property, please see this CSS selector: .ql-snow .ql-picker.ql-header .ql-picker-label::before, .ql-snow .ql-picker.ql-header .ql-picker-item::before

Screen readers like JAWS and NVDA are able to announce the content of the options when tabbing through them, which is good but I think the implementation should use the proper HTML elements or attributes to achieve this result.

Keyboard Navigation

To navigate through the header toolbar options, a user must use the tab key. In this case, I think it would be more appropriate to implement a solution following the Combobox Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/. It would allows users to use the Down Arrow/Up Arrow keys to navigate the options.

Steps for Reproduction

1. Visit https://quilljs.com/playground/snow
2. Scan the page using a tool like Axe DevTools (Chrome Extension)
3. See error "ARIA commands must have an accessible name" on the header dropdown.

Expected behavior:
The selected option should have an accessible name (visible text, aria-label, aria-labelledby or title attribute).
Each option in the header select should have an accessible name (visible text, aria-label, aria-labelledby or title attribute).

Actual behavior:
The selected option neither every option has an accessible name in the header dropdown.

Platforms:

Windows 11, Mac

Version:

2.0.2