Merge "Submit Requirements - Add tab navigation for hovercards"
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary.ts
index 24409c6..2272133 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary.ts
@@ -122,8 +122,8 @@
}
renderState(icon: string, aggregation: string | TemplateResult) {
- return html`<span class="${icon}"
- ><gr-submit-requirement-dashboard-hovercard .change=${this.change}>
+ return html`<span class="${icon}" role="button" tabindex="0">
+ <gr-submit-requirement-dashboard-hovercard .change=${this.change}>
</gr-submit-requirement-dashboard-hovercard>
<iron-icon class="${icon}" icon="gr-icons:${icon}" role="img"></iron-icon
>${aggregation}</span
diff --git a/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary_test.ts b/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary_test.ts
index 6dc9af1..9021e46 100644
--- a/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary_test.ts
+++ b/polygerrit-ui/app/elements/change-list/gr-change-list-column-requirements-summary/gr-change-list-column-requirements-summary_test.ts
@@ -72,7 +72,11 @@
html`<gr-change-list-column-requirements-summary .change=${change}>
</gr-change-list-column-requirements-summary>`
);
- expect(element).shadowDom.to.equal(/* HTML */ ` <span class="block">
+ expect(element).shadowDom.to.equal(/* HTML */ ` <span
+ class="block"
+ role="button"
+ tabindex="0"
+ >
<gr-submit-requirement-dashboard-hovercard>
</gr-submit-requirement-dashboard-hovercard>
<iron-icon class="block" icon="gr-icons:block" role="img"></iron-icon>
@@ -92,7 +96,11 @@
html`<gr-change-list-column-requirements-summary .change=${change}>
</gr-change-list-column-requirements-summary>`
);
- expect(element).shadowDom.to.equal(/* HTML */ ` <span class="block">
+ expect(element).shadowDom.to.equal(/* HTML */ ` <span
+ class="block"
+ role="button"
+ tabindex="0"
+ >
<gr-submit-requirement-dashboard-hovercard>
</gr-submit-requirement-dashboard-hovercard>
<iron-icon class="block" icon="gr-icons:block" role="img"></iron-icon>
diff --git a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts
index ceb0ba4..46e600e 100644
--- a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts
+++ b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts
@@ -193,9 +193,8 @@
}
renderRequirement(requirement: SubmitRequirementResultInfo, index: number) {
- return html`
- <tr id="requirement-${index}-${charsOnly(requirement.name)}">
- <td>${this.renderStatus(requirement.status)}</td>
+ const row = html`
+ <td>${this.renderStatus(requirement.status)}</td>
<td class="name">
<gr-limited-text
class="name"
@@ -212,6 +211,22 @@
</td>
</tr>
`;
+
+ if (this.disableHovercards) {
+ // when hovercards are disabled, we don't make line focusable (tabindex)
+ // since otherwise there is no action associated with the line
+ return html`<tr>
+ ${row}
+ </tr>`;
+ } else {
+ return html`<tr
+ id="requirement-${index}-${charsOnly(requirement.name)}"
+ role="button"
+ tabindex="0"
+ >
+ ${row}
+ </tr>`;
+ }
}
renderEndpoint(
diff --git a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements_test.ts b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements_test.ts
index f6dc75c..0487316 100644
--- a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements_test.ts
+++ b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements_test.ts
@@ -85,7 +85,7 @@
</tr>
</thead>
<tbody>
- <tr id="requirement-0-Verified">
+ <tr id="requirement-0-Verified" role="button" tabindex="0">
<td>
<iron-icon
aria-label="satisfied"
diff --git a/polygerrit-ui/app/mixins/hovercard-mixin/hovercard-mixin.ts b/polygerrit-ui/app/mixins/hovercard-mixin/hovercard-mixin.ts
index a17b75f..815266c 100644
--- a/polygerrit-ui/app/mixins/hovercard-mixin/hovercard-mixin.ts
+++ b/polygerrit-ui/app/mixins/hovercard-mixin/hovercard-mixin.ts
@@ -338,7 +338,7 @@
/**
* Hides/closes the hovercard. This occurs when the user triggers the
* `mouseleave` event on the hovercard's `target` element (as long as the
- * user is not hovering over the hovercard). If event not specified
+ * user is not hovering over the hovercard). If event is not specified
* in props, code assumes mouseEvent
*/
readonly hide = (props: MouseKeyboardOrFocusEvent) => {
@@ -409,7 +409,7 @@
/**
* Shows/opens the hovercard. This occurs when the user triggers the
* `mousenter` event on the hovercard's `target` element or when a user
- * presses enter/space on the hovercard's `target` element. If event not
+ * presses enter/space on the hovercard's `target` element. If event is not
* specified in props, code assumes mouseEvent
*/
readonly show = async (props: MouseKeyboardOrFocusEvent) => {
