Merge pull request #809 from webrecorder/frontend-icon-button-aria-label-fixes

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();

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>

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>

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();

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>
 

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

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>