This change makes the Changes drawer editor more accessible by adding a
gutter column with +/- symbols on added or deleted rows, respectively.
This information was previously conveyed only through color, a WCAG
violation.
In order to communicate whether a line is an addition or deletion to
screen reader users, I created a new code mirror input style that
prepends 'Addition:' or 'Deletion:' to the text that screen readers read
out for each diff line. This solution was settled on after discussing it
with other devs working on accessibility in order to avoid implementing
something more complex like VS Code's screen reader diff experience [1].
Screenshot: https://gyazo.com/8fe95b563a9e74d0d8b1a88900876c2a
[1] https://github.com/Microsoft/vscode/issues/17263#issuecomment-305701496
Bug: 963183
Change-Id: Ieeab30b8058fb36ef3a0d9ef4beac52419f6dc33
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/1891836
Reviewed-by: Robert Paveza <Rob.Paveza@microsoft.com>
Commit-Queue: Jack Lynch <jalyn@microsoft.com>