Improve a11y for diff viewing
Adds an aria-label to added and removed rows marking the row as "added"
or "removed" for screen readers. As part of this change, the <tr>
elements that make up the diff are now focusable.
Test plan:
- Somewhat included as a part of testing this functionality is the use
of WCT's a11ySuite function[1]. This will be introduced in a later
change.
[1] https://goo.gl/P15eE6
Bug: Issue 6435
Change-Id: I676fc171d404ca6e8e9276965192b1452595fa61
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-side-by-side.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-side-by-side.js
index 6f47f9b..9695b18 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-side-by-side.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-side-by-side.js
@@ -66,6 +66,7 @@
row.classList.add('diff-row', 'side-by-side');
row.setAttribute('left-type', leftLine.type);
row.setAttribute('right-type', rightLine.type);
+ row.tabIndex = -1;
this._appendPair(section, row, leftLine, leftLine.beforeNumber,
GrDiffBuilder.Side.LEFT);
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified.js
index 64c8f95..b1dd789 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder-unified.js
@@ -67,6 +67,7 @@
lineEl.classList.add('right');
row.appendChild(lineEl);
row.classList.add('diff-row', 'unified');
+ row.tabIndex = -1;
const action = this._createContextControl(section, line);
if (action) {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
index bb23572..3cb1a39 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-builder/gr-diff-builder.js
@@ -385,6 +385,13 @@
if (opt_class) {
td.classList.add(opt_class);
}
+
+ if (line.type === GrDiffLine.Type.REMOVE) {
+ td.setAttribute('aria-label', `${number} removed`);
+ } else if (line.type === GrDiffLine.Type.ADD) {
+ td.setAttribute('aria-label', `${number} added`);
+ }
+
if (line.type === GrDiffLine.Type.BLANK) {
return td;
} else if (line.type === GrDiffLine.Type.CONTEXT_CONTROL) {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.html b/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.html
index 2d0786a..3ae3159 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.html
@@ -23,6 +23,7 @@
id="cursorManager"
scroll-behavior="[[_scrollBehavior]]"
cursor-target-class="target-row"
+ focus-on-move
target="{{diffRow}}"></gr-cursor-manager>
</template>
<script src="gr-diff-cursor.js"></script>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
index d101fea..a61b9ca 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html
@@ -77,6 +77,9 @@
font-family: var(--font-family);
font-style: italic;
}
+ .diff-row {
+ outline: none;
+ }
.diff-row.target-row.target-side-left .lineNum.left,
.diff-row.target-row.target-side-right .lineNum.right,
.diff-row.target-row.unified .lineNum {
@@ -210,7 +213,10 @@
is-image-diff="[[isImageDiff]]"
base-image="[[_baseImage]]"
revision-image="[[_revisionImage]]">
- <table id="diffTable" class$="[[_diffTableClass]]"></table>
+ <table
+ id="diffTable"
+ class$="[[_diffTableClass]]"
+ role="presentation"></table>
</gr-diff-builder>
</gr-diff-highlight>
</gr-diff-selection>
