A11y - Keyboard focus moves only to interactive elements on Dashboard
1. Remove tabindex on gr-change-list to make it not keyboard focusable
2. Set tabindex only on selected gr-change-list-item to continue
functionality of using enter to go to selected change, but make other
gr-change-list-items not keyboard focusable
3. Remove css `.content a`, since it made `a` a block and `outline`
didn’t work when `a` focused. The same css rules are in .content
and after removal page works and looks the same.
Change-Id: Ica3f279623506c847f058674ecf9defb41c1ba31
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.js b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.js
index b31ab9b..f29c8bf 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.js
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-item/gr-change-list-item_html.js
@@ -45,13 +45,6 @@
white-space: nowrap;
width: 100%;
}
- .content a {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- width: 100%;
- }
.comments,
.reviewers {
white-space: nowrap;
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js
index bd78ae9..baf9920 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list.js
@@ -168,7 +168,6 @@
/** @override */
ready() {
super.ready();
- this._ensureAttribute('tabindex', 0);
this.$.restAPI.getConfig().then(config => {
this._config = config;
});
@@ -296,6 +295,11 @@
return idx == selectedIndex;
}
+ _computeTabIndex(sectionIndex, index, selectedIndex) {
+ return this._computeItemSelected(sectionIndex, index, selectedIndex)
+ ? 0 : undefined;
+ }
+
_computeItemNeedsReview(account, change, showReviewedState) {
return showReviewedState && !change.reviewed &&
!change.work_in_progress &&
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.js b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.js
index f7c50e6..2e50cd8 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.js
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list/gr-change-list_html.js
@@ -138,7 +138,7 @@
visible-change-table-columns="[[visibleChangeTableColumns]]"
show-number="[[showNumber]]"
show-star="[[showStar]]"
- tabindex="0"
+ tabindex$="[[_computeTabIndex(sectionIndex, index, selectedIndex)]]"
label-names="[[labelNames]]"
></gr-change-list-item>
</template>
