Uploaded image for project: 'Compass '
  1. Compass
  2. COMPASS-6016

Add keyboard nav accessibility for all react-ace editors

    • Type: Icon: Task Task
    • Resolution: Gone away
    • Priority: Icon: Minor - P4 Minor - P4
    • No version
    • Affects Version/s: None
    • Component/s: Accessibility
    • None
    • Not Needed

      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.

            Assignee:
            Unassigned Unassigned
            Reporter:
            rhys.howell@mongodb.com Rhys Howell
            Votes:
            0 Vote for this issue
            Watchers:
            1 Start watching this issue

              Created:
              Updated:
              Resolved: