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

[walberglez]

Workaround to add accessibility names to the Toolbar Header dropdown, this can be applied when the Quill editor is created:

applyToolbarAccessibilityHacks(quill:` any) {
    const toolbar = quill.getModule('toolbar');

    if (!toolbar) {
      return;
    }

    // Add aria-label to header picker
    const headerPicker = toolbar.container.querySelector('.ql-header, .ql-picker');
    if (headerPicker) {
      const label = headerPicker.getElementsByClassName('ql-picker-label')[0];
      label?.setAttribute('aria-label', 'Header');

      const optionsContainer = headerPicker.getElementsByClassName('ql-picker-options')[0];
      const options = optionsContainer?.getElementsByClassName('ql-picker-item');
      for (const item of options) {
        // Read the css 'content' values and generate aria labels
        const itemContent = window.getComputedStyle(item, ':before').content.replaceAll('"', '');
        item.setAttribute('aria-label', itemContent);
      }
    }
  }

Based on a workaround found here: #1173