Add accName to icon buttons, implement error icon when button doesn't have an accessible name

packages/craftcms-cp/package.json

@@ -71,6 +71,7 @@
     "@vitest/coverage-v8": "^3.2.4",
     "@wc-toolkit/storybook-helpers": "^9.0.1",
     "del": "^8.0.1",
+    "dom-accessibility-api": "^0.7.1",
     "globby": "^14.1.0",
     "happy-dom": "^18.0.1",
     "lit": "^3.3.1",

packages/craftcms-cp/src/components/button/button.ts

@@ -1,8 +1,10 @@
 import {LionButtonSubmit} from '@lion/ui/button.js';
 import {html, nothing} from 'lit';
-import {property} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import styles from './button.styles.js';
 import '../spinner/spinner.js';
+import '../icon/icon.js';
+import {computeAccessibleName} from "dom-accessibility-api";
 
 /**
  * @summary Interactive element that triggers an action or event.
@@ -25,6 +27,26 @@ export default class CraftButton extends LionButtonSubmit {
     return [...super.styles, styles];
   }
 
+  override async firstUpdated() {
+    super.firstUpdated();
+
+    await this.updateComplete;
+
+    const childComponents = this.querySelectorAll('craft-icon, craft-spinner');
+    await Promise.all(
+      Array.from(childComponents).map((child: any) => child.updateComplete)
+    );
+
+    if (!this.accessibleName) {
+      this.accessibleName = computeAccessibleName(this);
+    }
+
+    this._hasAccessibilityError = !this.accessibleName || this.accessibleName.trim() === '';
+  }
+
+  /** The computed accessible name */
+  @property() accessibleName: string;
+
   /** Visual appearance of the button */
   @property({reflect: true}) appearance: 'accent' | 'plain' = 'accent';
 
@@ -39,13 +61,19 @@ export default class CraftButton extends LionButtonSubmit {
   /** Show a spinner instead of the label */
   @property({reflect: true, type: Boolean}) loading: boolean = false;
 
+  @state()
+  private _hasAccessibilityError: boolean = false;
+
   override render() {
     return html`
       <div class="button-content" part="content">
         <slot name="prefix" class="prefix" part="prefix"></slot>
         <slot class="label" part="label"></slot>
         <slot name="suffix" class="suffix" part="suffix"></slot>
       </div>
+      ${this._hasAccessibilityError
+        ? html`<craft-icon name="exclamation-triangle" :label="t('app', 'Error')"></craft-icon>`
+        : nothing}
       ${this.loading
         ? html`<craft-spinner part="spinner"></craft-spinner>`
         : nothing}

packages/craftcms-cp/src/components/nav-item/nav-item.ts

@@ -2,6 +2,7 @@ import {html, LitElement, css, nothing} from 'lit';
 import {styleMap} from 'lit/directives/style-map.js';
 import {property, state} from 'lit/decorators.js';
 import styles from './nav-item.styles';
+import {t} from '@craftcms/cp/utilities/translate.ts.mjs';
 
 /**
  *
@@ -130,7 +131,7 @@ export default class CraftNavItem extends LitElement {
             ${this.indicator ? html`<span class="indicator"></span>` : nothing}
           </slot>
         </span>
-        <slot></slot>
+        <slot id="${this.id}-label"></slot>
 
         <div class="nav-item__suffix">
           <slot name="suffix">
@@ -144,12 +145,15 @@ export default class CraftNavItem extends LitElement {
                     aria-expanded="${this.subnavState === 'open'
                       ? 'true'
                       : 'false'}"
+                    aria-labelledby="${this.id}-toggle-icon ${this.id}-label"
                   >
                     <craft-icon
+                      id="${this.id}-toggle-icon""
                       name="${this.subnavState === 'closed'
                         ? 'chevron-down'
                         : 'chevron-up'}"
                       style="font-size: calc(10rem / 16)"
+                      label="${t('app', 'Toggle subnavigation')}"
                     ></craft-icon>
                   </craft-button>
                 `

resources/js/layout/AppLayout.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import SystemInfo from '@/components/SystemInfo.vue';
+  import {t} from '@craftcms/cp/utilities/translate.ts.mjs';
   import {computed, reactive, watch} from 'vue';
   import CpSidebar from '@/components/CpSidebar.vue';
   import {useMediaQuery} from '@vueuse/core';
@@ -71,13 +72,13 @@
           @click="toggleSidebar"
           v-if="!isLargeScreen"
         >
-          <craft-icon :name="sidebarIcon"></craft-icon>
+          <craft-icon :name="sidebarIcon" :label="t('app', 'Toggle menu')"></craft-icon>
         </craft-button>
         <SystemInfo v-if="isLargeScreen" />
 
         <div class="ml-auto"></div>
         <craft-button icon appearance="plain">
-          <craft-icon name="search"></craft-icon>
+          <craft-icon name="search" :label="t('app', 'Search')"></craft-icon>
         </craft-button>
       </div>
     </div>

resources/js/pages/SettingsGeneralPage.vue

@@ -125,7 +125,7 @@
           </craft-button>
           <craft-action-menu>
             <craft-button slot="invoker" variant="primary" type="button" icon>
-              <craft-icon name="chevron-down"></craft-icon>
+              <craft-icon name="chevron-down" :label="t('app', 'More actions')"></craft-icon>
             </craft-button>
 
             <div slot="content">