Location: 06 Discussion - Add Post
Description: The Toolbar for the Post textarea is implemented as a toolbar with ARIA role="toolbar", however the keyboard interaction does not correspond to that of a toolbar. When screen reader users hear toolbar, they will expect to interact with it as a toolbar with one tab stop and arrow keys to navigate through the buttons within the toolbar.
Auditor Note: Developers should implement custom controls with the default keyboard interaction that corresponds to the role chosen. This will help assistive technology users interact with the controls properly. Follow the authoring practice for a toolbar: https://www.w3.org/TR/wai-aria-practices/#toolbar
In addition, provide a label for the toolbar to make it more intuitive for screen reader users. Since you don't have an onscreen label, you can use aria-label within the div with the toolbar role.
Internal Note: We either need to fork this WYSIWYG editor and fix it, or find a new WYSIWYG editor for this control. Talk to Ari. I think she had found an accessible React WYSIWYG editor.
The proposed react WYSIWYG editor (https://draftjs.org/) is excellent, but the infrastructure push to get it integrated within the backbone/underscore construction is too heavy a lift for the time allotted.
This is a straight a11y fix for the current editor.