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

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);

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) {

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) {

polygerrit-ui/app/elements/diff/gr-diff-cursor/gr-diff-cursor.html

@@ -23,6 +23,7 @@ limitations under the License.
         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>

polygerrit-ui/app/elements/diff/gr-diff/gr-diff.html

@@ -77,6 +77,9 @@ limitations under the License.
         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 @@ limitations under the License.
               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>