WYSIWYG controls are not accessible

Description

Location: 06 Discussion - Add Post

Severity: 6

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.

Pattern: None

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.

Steps to Reproduce

None

Current Behavior

None

Expected Behavior

None

Reason for Variance

None

Release Notes

None

User Impact Summary

None

Status

Assignee

Sofiya Semenova

Reporter

Mark Sadecki

Reach

None

Impact

None

Platform Area

None

Customer

None

Partner Manager

None

URL

None

Contributor Name

None

Groups with Read-Only Access

None

Story Points

None

Actual Points

None

Category of Work

None

Platform Map Area (Levels 1 & 2)

None

Platform Map Area (Levels 3 & 4)

None

Epic Link

Sprint

None

Fix versions

Due date

2014/04/15

Priority

CAT-2
Configure