[COMPASS-6016] Add keyboard nav accessibility for all react-ace editors Created: 15/Aug/22  Updated: 27/Oct/23  Resolved: 19/Jun/23

Status: Closed
Project: Compass
Component/s: Accessibility
Affects Version/s: None
Fix Version/s: No version

Type: Task Priority: Minor - P4
Reporter: Rhys Howell Assignee: Unassigned
Resolution: Gone away Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Issue Links:
Related
is related to MONGOSH-1288 Add keyboard accessibility improvemen... Open
is related to COMPASS-4900 Tab Lock in Query Bar Closed
Epic Link: COMPASS-5564
Story Points: 3
Documentation Changes: Not Needed

 Description   

Currently Compass uses ace-editor in a way that makes it a focus trap, meaning that when a user tabs into the aggregation stage editor input they are unable to use the keyboard to leave (except with undocumented option+tab). We should improve this accessibility issue by providing an aria description with the key a user can press to navigate out of the element.

I'm thinking we can add an `Escape` key handler which disables the ace editors `indent` and `outdent` commands until the ace editor is refocused. Similar to the example Sergey linked in COMPASS-4900: https://codemirror.net/examples/tab/
https://www.w3.org/TR/2016/WD-wai-aria-practices-1.1-20160317/#richtext
We'll then document this escape key handler using aria-label or similar.



 Comments   
Comment by Rhys Howell [ 19/Jun/23 ]

Gone away with code mirror update.

Generated at Wed Feb 07 22:41:36 UTC 2024 using Jira 9.7.1#970001-sha1:2222b88b221c4928ef0de3161136cc90c8356a66.