commit 0bb3ca52941ebf39f1d48d47fdcd7cfa1644b8cd
author Ben Rohlfs <brohlfs@google.com> Fri Oct 28 22:01:59 2022 +0200
committer Ben Rohlfs <brohlfs@google.com> Fri Oct 28 22:04:34 2022 +0200
tree 0ae2e14e75b27324a2a0dbbbe0d1819382e8b9bc
parent e0288b2efba0cde84b93da822ca98eb8f3d7e14a

Improve a11y of code owners status column

At the moment screenreaders would typically read "check" and "policy",
which are just the names of the icons. Let's add some aria attributes
for making the message concise and informative.

Release-Notes: skip
Google-Bug-Id: b/254516540
Change-Id: I13c8c257c78ecb17fe88c08990e8136c64895c61

web/owner-status-column.ts

diff --git a/web/owner-status-column.ts b/web/owner-status-column.ts
index f59212b..80871f6 100644
--- a/web/owner-status-column.ts
+++ b/web/owner-status-column.ts
@@ -61,6 +61,16 @@
   [STATUS_CODE.ERROR]: 'info',
 };
 
+const STATUS_SUMMARY = {
+  [STATUS_CODE.PENDING]: 'Pending',
+  [STATUS_CODE.MISSING]: 'Missing',
+  [STATUS_CODE.PENDING_OLD_PATH]: 'Pending Old Path',
+  [STATUS_CODE.MISSING_OLD_PATH]: 'Missing Old Path',
+  [STATUS_CODE.APPROVED]: 'Approved',
+  [STATUS_CODE.ERROR]: 'Failed',
+  [STATUS_CODE.ERROR_OLD_PATH]: 'Failed Old Path',
+};
+
 const STATUS_TOOLTIP = {
   [STATUS_CODE.PENDING]: 'Pending code owner approval',
   [STATUS_CODE.MISSING]: 'Missing code owner approval',
@@ -204,11 +214,17 @@
   }
 
   private renderStatus() {
-    const statusInfo = this.computeTooltip();
-    const statusIcon = this.computeStatusIcon();
+    const info = STATUS_TOOLTIP[this.ownerStatus!];
+    const summary = STATUS_SUMMARY[this.ownerStatus!];
+    const icon = STATUS_ICON[this.ownerStatus!];
     return html`
-      <gr-tooltip-content title=${statusInfo} has-tooltip>
-        <gr-icon class="status" icon=${statusIcon}></gr-icon>
+      <gr-tooltip-content
+        title=${info}
+        aria-label=${summary}
+        aria-description=${info}
+        has-tooltip
+      >
+        <gr-icon class="status" icon=${icon} aria-hidden="true"></gr-icon>
       </gr-tooltip-content>
     `;
   }
@@ -216,8 +232,13 @@
   private renderOwnership() {
     if (!this.isOwned()) return nothing;
     return html`
-      <gr-tooltip-content title="You are in OWNERS for this file" has-tooltip>
-        <gr-icon filled icon="policy"></gr-icon>
+      <gr-tooltip-content
+        title="You are in OWNERS for this file"
+        aria-label="owned"
+        aria-description="You are an owner of this file"
+        has-tooltip
+      >
+        <gr-icon filled icon="policy" aria-hidden="true"></gr-icon>
       </gr-tooltip-content>
     `;
   }
@@ -271,14 +292,6 @@
     );
   }
 
-  private computeStatusIcon() {
-    return STATUS_ICON[this.ownerStatus!];
-  }
-
-  private computeTooltip() {
-    return STATUS_TOOLTIP[this.ownerStatus!];
-  }
-
   private extractStatus(statusItem: FileStatus, oldPath: boolean) {
     if (statusItem === undefined) {
       return oldPath ? STATUS_CODE.ERROR_OLD_PATH : STATUS_CODE.ERROR;