Closed Bug 919711 Opened 6 years ago Closed 8 months ago

[a11y] Make CodeMirror more accessible

Categories

(DevTools :: Source Editor, defect, P2)

defect

Tracking

(firefox68 fixed)

RESOLVED FIXED
Firefox 68
Tracking Status
firefox68 --- fixed

People

(Reporter: bgrins, Assigned: nchevobbe)

References

(Blocks 2 open bugs)

Details

(Keywords: access)

Attachments

(1 file)

Accessibility support in CodeMirror is not great.  I've been researching what changes would be required to add screen reader support to CodeMirror.  I have documented some of my findings here: http://bgrins.github.io/codemirror-accessible/.  I found a way to make selection movement work by updating the contents and selection of the focused textarea that CodeMirror is using behind the scenes.

I'm open to feedback about the implementation.  I'm particularly interested in feedback from someone who has accessibility experience and and who could comment on if it seems suitable (see the live demo on the project page).  I outline more details on the project page, and added a screencast with a quick demo.

This implementation is not ideal, since it relies on a timeout to help NVDA catch changes.  So we need to find a better way to do this.

Also, see https://bugzilla.mozilla.org/show_bug.cgi?id=816756#c39 for more information.
A comment from Max Li via email:

> Tried this out a bit. The basic functionality does seem to work. With 
the current approach, you can't read back the current line you're on 
(e.g. in NVDA, pressing insert+up (depending on keyboard layout) should 
read the current line you're on). I wouldn't be surprised if other 
similar things wouldn't work either. Also tried quickly using JAWS (the 
most popular commercial screen reader on Windows). It does seem to work 
with the demo'ed functionality. It does seem to exit from editing mode 
randomly when pressing the up or down arrow rapidly. I vaguely remember 
having this issue in Orion; setting an ARIA role of "application" either 
on the focused element or a container of it would probably fix it.

> With respect to the moving in/out of the keyboard, using Escape to blur 
the editor is probably not a good idea. I  think both NVDA and JAWS use 
escape for their own purposes. The (somewhat suboptimal due to 
discoverability) option taken in Orion was to follow the ARIA Guide and 
use Ctrl(+Shift)+M to move in and out. In any case, you'd probably have 
to consider what keys aren't consumed by the most common screen readers.

> Max
How's the progress going? Any blockers?
Flags: needinfo?(bgrinstead)
(In reply to Anton Kovalyov (:anton) from comment #2)
> How's the progress going? Any blockers?

I have not made any more progress on this.  The issue is that, at least with NVDA, it does not respond well to the textarea value changing right before setting the textarea selection.  Meaning that it intermittently fails when trying many different solutions that *don't* involve keeping the entire contents of the textarea in tact at all times and allowing input directly into the textarea.  This requires large changes in the internals of CodeMirror.  I will spend some more time looking into it unless if anyone else wants to.
Flags: needinfo?(bgrinstead)
Component: Developer Tools → Developer Tools: Source Editor
cc'ing Marco.
Keywords: access
Summary: Make CodeMirror more accessible → [a11y] Make CodeMirror more accessible
Yes, role="application" may be a good way to go here, to prevent screen readers from exiting their focus/forms modes. Also, it might be worth looking at what other rich edit controls are doing, such as the Microsoft Office Online, TinyMCE Editor or CKEditor. The latter two are using contentEditable instead of a textarea, and Microsoft may be using some hybrid markup, too.
The code editor is an important part, but without labeling the other stuff first, this should be following. Setting to P2 for now.
Priority: -- → P2
More and more editors are using the codeMirror approach behind the scenes. That is great for this project, but as long as these access issues aren't taken care of that also means more and more places are using inaccessible code editors. I did find a very accessible implementation of a code editor in the Stanford public online courses like the cs101 course. 
Right now the link in the OP's post works a lot better than the standard implementation of CodeMirror. Perhaps at least adding that patch upstream would at least lessen the problems for screenreader users even if it isn't a complete fix yet, because frankly the editor is quite useless the way it is now when you use a screenreader. :)
(In reply to Florian Beijers from comment #7)
> More and more editors are using the codeMirror approach behind the scenes.
> That is great for this project, but as long as these access issues aren't
> taken care of that also means more and more places are using inaccessible
> code editors.

The CodeMirror author commented about switching back to contentEditable here: https://bugzilla.mozilla.org/show_bug.cgi?id=1088804#c12.  I'll follow up there to see if there has been any progress.
Depends on: 1088804
Per policy at https://wiki.mozilla.org/Bug_Triage/Projects/Bug_Handling/Bug_Husbandry#Inactive_Bugs. If this bug is not an enhancement request or a bug not present in a supported release of Firefox, then it may be reopened.
Status: NEW → RESOLVED
Closed: 2 years ago
Resolution: --- → INACTIVE
Blocks: 1465146
Status: RESOLVED → REOPENED
Resolution: INACTIVE → ---
Product: Firefox → DevTools

This is by no mean finish, only a patch to test
that it works as expected.

Attachment #9053660 - Attachment description: Bug 919711 - Add a CodeMirror inputStyle to make it accessible; r=Jamie. → Bug 919711 - Add a CodeMirror inputStyle to make it accessible; r=bgrins.
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/979503384353
Add a CodeMirror inputStyle to make it accessible; r=bgrins.
Status: REOPENED → RESOLVED
Closed: 2 years ago8 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Assignee: nobody → nchevobbe
Blocks: 1088804
No longer depends on: 1088804
Blocks: 1558405
You need to log in before you can comment on or make changes to this bug.