react-ace icon indicating copy to clipboard operation
react-ace copied to clipboard

Accessibility: Add role=log attribute to autocomplete popup.

Open abaransy opened this issue 2 years ago • 0 comments

Problem

Detail the problem here, including any possible solutions.

[Problem] Autocomplete suggestions (that become available in the autocomplete popup when a user types anything in) are not announced to users with screen readers.

Screen reader users will be unaware of important updates to this content when they occur.

[Recommendation] Indicate live regions for dynamically changing content. Live regions can be created by adding a role attribute set to "log", "status", "alert", "progressbar", "marquee", or "timer" as appropriate.

Literally all that needs to be done is to add role="log" to the autocomplete popup container. Can you please add it?

See relevant example in https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA23 under "Example 1: Updating the contents of a chat conversation"

Sample code to reproduce your issue

return ( <AceEditor mode='html' width="100%" name='my-ace-editor' highlightActiveLine tabSize={2} showPrintMargin={false} className='my-ace-editor' enableLiveAutocompletion enableBasicAutocompletion wrapEnabled showGutter setOptions={{ enableSnippets: true, showLineNumbers: true, }} /> );

References

Progress on: #

abaransy avatar Jan 10 '23 19:01 abaransy