mirror of
https://github.com/react/react-native-devtools-frontend.git
synced 2026-09-30 17:27:22 +08:00
Jack Lynch
9542a8be14
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>
21 lines
608 B
JavaScript
21 lines
608 B
JavaScript
// Copyright 2019 The Chromium Authors. All rights reserved.
|
|
// Use of this source code is governed by a BSD-style license that can be
|
|
// found in the LICENSE file.
|
|
|
|
import './ChangesHighlighter.js';
|
|
import './ChangesView.js';
|
|
import './ChangesSidebar.js';
|
|
import './ChangesTextEditor.js';
|
|
|
|
import * as ChangesHighlighter from './ChangesHighlighter.js';
|
|
import * as ChangesSidebar from './ChangesSidebar.js';
|
|
import * as ChangesTextEditor from './ChangesTextEditor.js';
|
|
import * as ChangesView from './ChangesView.js';
|
|
|
|
export {
|
|
ChangesHighlighter,
|
|
ChangesSidebar,
|
|
ChangesTextEditor,
|
|
ChangesView,
|
|
};
|