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

packages/craftcms-cp/package.json

@@ -73,6 +73,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.styles.ts

@@ -164,6 +164,25 @@ export default css`
   craft-button-reset,
   craft-button-submit {
     /* Temporarily make it very obvious when these are used */
-    outline: 10px solid red;
+    outline: 10px solid var(--c-button-danger-border);
+  }
+
+  .a11y-error {
+    position: relative;
+    outline: 2px solid var(--c-color-danger-border-normal) !important;
+    background-color: rgba(255, 0, 0, 0.1) !important;
+
+    &:after {
+      content: '!';
+      position: absolute;
+      display: inline-flex;
+      font-size: calc(11rem / 16);
+      padding: 0.125em 0.5em 0.25em;
+      inset-block-start: -2px;
+      inset-inline-start: 0;
+      background: var(--c-color-danger-bg-emphasis);
+      color: white;
+      transform: translateX(-100%);
+    }
   }
 `;

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';
 import {classMap} from 'lit/directives/class-map.js';
 
 /**
@@ -26,6 +28,27 @@ export default class CraftButton extends LionButtonSubmit {
     return [...super.styles, styles];
   }
 
+  override async firstUpdated(changedProperties: Map<string, any>) {
+    super.firstUpdated(changedProperties);
+
+    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';
 
@@ -43,13 +66,17 @@ export default class CraftButton extends LionButtonSubmit {
   /** Set align-items for the content */
   @property() align: 'start' | 'end' | 'center' = 'center';
 
+  @state()
+  private _hasAccessibilityError: boolean = false;
+
   override render() {
     return html`
       <div
         class="${classMap({
           'button-content': true,
           'button-content--start': this.align === 'start',
           'button-content--end': this.align === 'end',
+          'a11y-error': this._hasAccessibilityError,
         })}"
         part="content"
       >

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

@@ -4,7 +4,7 @@ export default css`
   .nav-item {
     display: grid;
     gap: var(--c-spacing-md);
-    grid-template-columns: 1fr auto;
+    grid-template-columns: calc(24rem / 16) 1fr auto;
     align-items: center;
     text-decoration: none;
     color: inherit;

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

@@ -104,20 +104,25 @@ export default class CraftNavItem extends LitElement {
         <slot name="suffix">
           ${hasSubnav
             ? html`
-                <craft-button
-                  @click="${this.toggleSubnav}"
-                  icon
-                  size="small"
-                  aria-controls="${this.id}-subnav"
-                  aria-expanded="${this.subnavState === 'open'
-                    ? 'true'
-                    : 'false'}"
-                >
-                  <craft-icon
-                    name="${this.subnavState === 'closed'
-                      ? 'chevron-down'
-                      : 'chevron-up'}"
-                    style="font-size: calc(10rem / 16)"
+                  <craft-button
+                    @click="${this.toggleSubnav}"
+                    icon
+                    size="small"
+                    aria-controls="${this.id}-subnav"
+                    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('Toggle subnavigation')}"
                   ></craft-icon>
                 </craft-button>
               `
@@ -138,7 +143,7 @@ export default class CraftNavItem extends LitElement {
         aria-current="${this.active ? 'page' : false}"
       >
         ${hasPrefix ? this.renderPrefix() : nothing}
-        <slot></slot>
+        <slot id="${this.id}-label"></slot>
         ${this.renderSuffix(hasSubnav)}
       </a>
     `;

resources/build/manifest.json

@@ -29,11 +29,11 @@
     "name": "CalloutReadOnly.vue_vue_type_script_setup_true_lang",
     "imports": [
       "resources/js/cp.ts",
+      "__plugin-vue_export-helper.js",
       "_nav-item.ts.js",
       "_lit-element.js",
       "packages/craftcms-cp/dist/components/nav-list/nav-list.ts.mjs",
-      "_progress-DOMF4PIT.js",
-      "__plugin-vue_export-helper.js"
+      "_progress-DOMF4PIT.js"
     ],
     "css": [
       "assets/CalloutReadOnly.css"

resources/js/components/CpSidebar.vue

@@ -4,6 +4,7 @@
   import EditionInfo from '@/components/EditionInfo.vue';
   import DevModeIndicator from '@/components/DevModeIndicator.vue';
   import {watch, computed, nextTick} from 'vue';
+  import {t} from '@craftcms/cp/utilities/translate.ts.mjs';
 
   const emit = defineEmits<{
     (e: 'close'): void;
@@ -42,7 +43,11 @@
           <SystemInfo />
           <div class="ml-auto"></div>
           <craft-button size="small" icon @click="emit('close')" type="button">
-            <craft-icon name="x" style="font-size: 0.7em"></craft-icon>
+            <craft-icon
+              name="x"
+              style="font-size: 0.7em"
+              :label="t('Close')"
+            ></craft-icon>
           </craft-button>
         </div>
       </div>

resources/js/layout/AppLayout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-  import {t} from '@craftcms/cp';
   import SystemInfo from '@/components/SystemInfo.vue';
+  import {t} from '@craftcms/cp/utilities/translate.ts.mjs';
   import {computed, reactive, ref, watch, useTemplateRef} from 'vue';
   import CpSidebar from '@/components/CpSidebar.vue';
   import {useMediaQuery} from '@vueuse/core';
@@ -101,13 +101,16 @@
           v-if="!isLargeScreen"
           ref="sidebarToggle"
         >
-          <craft-icon :name="sidebarIcon"></craft-icon>
+          <craft-icon
+            :name="sidebarIcon"
+            :label="t('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('Search')"></craft-icon>
         </craft-button>
       </div>
       <!-- TODO: this is just temporary placement -->

resources/js/pages/SettingsGeneralPage.vue

@@ -127,7 +127,10 @@
           </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('More actions')"
+              ></craft-icon>
             </craft-button>
 
             <div slot="content">