securingsincity / react-ace

React Ace Component
http://securingsincity.github.io/react-ace/
MIT License
4.06k stars 605 forks source link

Accessibility: ARIA toggle fields must have an accessible name #1823

Open quiquetubi opened 1 year ago

quiquetubi commented 1 year ago

[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