commit 47b16bca8515068f84e09ede863e809d15abe4c9
author Paladox none <thomasmulhall410@yahoo.com> Thu Apr 08 16:01:57 2021 +0000
committer Gerrit Code Review <noreply-gerritcodereview@google.com> Thu Apr 08 16:01:57 2021 +0000
tree 72558f46c258f8e64827123481d40748bc9225ac
parent a24775b555347e6130b4dc8d08c4fbc4ffa81d15
parent 273bf25101143c6fb6850f29cc126578a3a44f9f

Merge "A11y - show outline when focused on change subject in dashboard" into stable-3.4

polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts

diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts
index da63314..62cfcb4 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.ts
@@ -136,6 +136,9 @@
   @property({type: Object})
   preferences?: PreferencesInput;
 
+  @property({type: Boolean})
+  isCursorMoving = false;
+
   @property({type: Object})
   _config?: ServerInfo;
 
@@ -356,7 +359,13 @@
     return idx === selectedIndex;
   }
 
-  _computeTabIndex(sectionIndex: number, index: number, selectedIndex: number) {
+  _computeTabIndex(
+    sectionIndex: number,
+    index: number,
+    selectedIndex: number,
+    isCursorMoving: boolean
+  ) {
+    if (isCursorMoving) return 0;
     return this._computeItemSelected(sectionIndex, index, selectedIndex)
       ? 0
       : undefined;
@@ -399,7 +408,9 @@
     }
 
     e.preventDefault();
+    this.isCursorMoving = true;
     this.cursor.next();
+    this.isCursorMoving = false;
     this.selectedIndex = this.cursor.index;
   }
 
@@ -409,7 +420,9 @@
     }
 
     e.preventDefault();
+    this.isCursorMoving = true;
     this.cursor.previous();
+    this.isCursorMoving = false;
     this.selectedIndex = this.cursor.index;
   }
 
@@ -538,6 +551,11 @@
   _isEmpty(section: DashboardSection) {
     return !section.results?.length;
   }
+
+  _computeAriaLabel(change?: ChangeInfo, sectionName?: string) {
+    if (!change) return '';
+    return change.subject + (sectionName ? `, section: ${sectionName}` : '');
+  }
 }
 
 declare global {

polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.ts

diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.ts b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.ts
index b6b4160..a1c27dc 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.ts
@@ -154,8 +154,9 @@
             visible-change-table-columns="[[_computeColumns(changeSection, visibleChangeTableColumns)]]"
             show-number="[[showNumber]]"
             show-star="[[showStar]]"
-            tabindex$="[[_computeTabIndex(sectionIndex, index, selectedIndex)]]"
+            tabindex$="[[_computeTabIndex(sectionIndex, index, selectedIndex, isCursorMoving)]]"
             label-names="[[labelNames]]"
+            aria-label$="[[_computeAriaLabel(change, changeSection.name)]]"
           ></gr-change-list-item>
         </template>
       </tbody>