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.ts

@@ -108,20 +108,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>
               `
@@ -143,7 +148,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>
     `;