securingsincity/react-ace

Accessibility: ARIA toggle fields must have an accessible name

quiquetubi opened this issue · 0 comments

[Problem]
When having content in the editor and focusing in a line we need to ensure that every ARIA toggle field has an accesible name. We became aware of this a11y issue when running an axe dev tool scan in Chrome.

The element location is .ace_line[role="option"]:nth-child(1) with the element source being <div class="ace_line" role="option" style="height: 16.4px; top; 0px;"><div>

[Recommendation]
The element has to either have a text that is visible to screen readers or add an aria-label or aria-labelledby.

See relevant information in https://dequeuniversity.com/rules/axe/4.0/aria-toggle-field-name