From e04a6a7825595f690f4a22de895d362e4c73eab4 Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Mon, 1 May 2023 02:57:32 -0400
Subject: [PATCH] Improves icon button aria labels
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Adds some labels to missing icon buttons
- Fixes metadata `aria-label` usage → `label` so it actually gets added to the rendered `button`
- Changes the "More" label to a (hopefully) more descriptive "Actions" label for dropdown actions menus
---
 frontend/src/components/crawl-list.ts           | 2 +-
 frontend/src/components/input/input.ts          | 2 ++
 frontend/src/components/profile-browser.ts      | 3 +++
 frontend/src/components/workflow-list.ts        | 2 +-
 frontend/src/index.ts                           | 1 +
 frontend/src/pages/org/browser-profiles-list.ts | 2 +-
 frontend/src/pages/org/crawl-detail.ts          | 2 +-
 7 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/crawl-list.ts b/frontend/src/components/crawl-list.ts
index fcf9c65f..e162dffb 100644
--- a/frontend/src/components/crawl-list.ts
+++ b/frontend/src/components/crawl-list.ts
@@ -339,7 +339,7 @@ export class CrawlListItem extends LitElement {
           <sl-icon-button
             class="dropdownTrigger"
             name="three-dots-vertical"
-            label=${msg("More")}
+            label=${msg("Actions")}
             @click=${(e: MouseEvent) => {
               // Prevent anchor link default behavior
               e.preventDefault();
diff --git a/frontend/src/components/input/input.ts b/frontend/src/components/input/input.ts
index cbbeb020..ee48aa28 100644
--- a/frontend/src/components/input/input.ts
+++ b/frontend/src/components/input/input.ts
@@ -1,6 +1,7 @@
 import { html } from "lit";
 import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { msg } from "@lit/localize";
 
 import LiteElement from "../../utils/LiteElement";
 import "./input.css";
@@ -71,6 +72,7 @@ export class Input extends LiteElement {
           ? html`
               <sl-icon-button
                 class="sl-input-icon-button"
+                label=${this.isPasswordVisible ? msg("Hide password") : msg("Show password")}
                 name=${this.isPasswordVisible ? "eye-slash" : "eye"}
                 @click=${this.onTogglePassword}
               ></sl-icon-button>
diff --git a/frontend/src/components/profile-browser.ts b/frontend/src/components/profile-browser.ts
index 2a1fb48a..689caf12 100644
--- a/frontend/src/components/profile-browser.ts
+++ b/frontend/src/components/profile-browser.ts
@@ -148,6 +148,7 @@ export class ProfileBrowser extends LiteElement {
           ${this.renderSidebarButton()}
           <sl-icon-button
             name="fullscreen-exit"
+            label=${msg("Exit fullscreen")}
             @click=${() => document.exitFullscreen()}
           ></sl-icon-button>
         </div>
@@ -159,6 +160,7 @@ export class ProfileBrowser extends LiteElement {
         ${this.renderSidebarButton()}
         <sl-icon-button
           name="arrows-fullscreen"
+          label=${msg("Enter fullscreen")}
           @click=${() => this.enterFullscreen("interactive-browser")}
         ></sl-icon-button>
       </div>
@@ -198,6 +200,7 @@ export class ProfileBrowser extends LiteElement {
     return html`
       <sl-icon-button
         name="layout-sidebar-reverse"
+        label=${!this.showOriginSidebar ? msg("Show sidebar") : msg("Hide sidebar")}
         class="${this.showOriginSidebar ? "text-blue-600" : ""}"
         @click=${() => (this.showOriginSidebar = !this.showOriginSidebar)}
       ></sl-icon-button>
diff --git a/frontend/src/components/workflow-list.ts b/frontend/src/components/workflow-list.ts
index 6924ddee..6136fce6 100644
--- a/frontend/src/components/workflow-list.ts
+++ b/frontend/src/components/workflow-list.ts
@@ -392,7 +392,7 @@ export class WorkflowListItem extends LitElement {
         <sl-icon-button
           class="dropdownTrigger"
           name="three-dots-vertical"
-          label=${msg("More")}
+          label=${msg("Actions")}
           @click=${(e: MouseEvent) => {
             // Prevent anchor link default behavior
             e.preventDefault();
diff --git a/frontend/src/index.ts b/frontend/src/index.ts
index cf7aca04..89f41b6a 100644
--- a/frontend/src/index.ts
+++ b/frontend/src/index.ts
@@ -319,6 +319,7 @@ export class App extends LiteElement {
                     <sl-icon-button
                       slot="trigger"
                       name="person-circle"
+                      label=${msg("Open user menu")}
                       style="font-size: 1.5rem;"
                     ></sl-icon-button>
 
diff --git a/frontend/src/pages/org/browser-profiles-list.ts b/frontend/src/pages/org/browser-profiles-list.ts
index 2589efcc..51aad110 100644
--- a/frontend/src/pages/org/browser-profiles-list.ts
+++ b/frontend/src/pages/org/browser-profiles-list.ts
@@ -143,7 +143,7 @@ export class BrowserProfilesList extends LiteElement {
         <sl-icon-button
           slot="trigger"
           name="three-dots"
-          label=${msg("More")}
+          label=${msg("Actions")}
           style="font-size: 1rem"
         ></sl-icon-button>
         <ul
diff --git a/frontend/src/pages/org/crawl-detail.ts b/frontend/src/pages/org/crawl-detail.ts
index 531f504e..ddf2a77b 100644
--- a/frontend/src/pages/org/crawl-detail.ts
+++ b/frontend/src/pages/org/crawl-detail.ts
@@ -176,7 +176,7 @@ export class CrawlDetail extends LiteElement {
                           }`}
                           name="pencil"
                           @click=${this.openMetadataEditor}
-                          aria-label=${msg("Edit Metadata")}
+                          label=${msg("Edit Metadata")}
                           ?disabled=${this.isActive}
                         ></sl-icon-button>
                       </sl-tooltip>