walberglez
commented
1 month ago 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: https://github.com/slab/quill/issues/1173
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:
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::beforeScreen 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
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