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/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>
