@openvoxproject/voxblocks 0.10.0 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openvoxproject/voxblocks",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Web components for OpenVox community web sites and apps",
   "type": "module",
   "license": "Apache-2.0",

package/src/components/accordion/vox-accordion.ts

@@ -48,9 +48,13 @@ export class VoxAccordion extends LitElement {
  */
 @customElement('vox-accordion-item')
 export class VoxAccordionItem extends LitElement {
+  private static nextId = 0;
+
   @property() heading = '';
   @property({ type: Boolean, reflect: true }) open = false;
 
+  private readonly panelId = `vox-accordion-panel-${VoxAccordionItem.nextId++}`;
+
   static styles = css`
     :host {
       display: block;
@@ -127,6 +131,7 @@ export class VoxAccordionItem extends LitElement {
         <button
           class="trigger"
           aria-expanded=${this.open ? 'true' : 'false'}
+          aria-controls=${this.panelId}
           @click=${this.toggle}
         >
           ${this.heading}
@@ -135,7 +140,7 @@ export class VoxAccordionItem extends LitElement {
           </svg>
         </button>
       </h3>
-      <div class="panel" ?hidden=${!this.open}>
+      <div id=${this.panelId} class="panel" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;

package/src/components/alert/vox-alert.ts

@@ -154,8 +154,12 @@ export class VoxAlert extends LitElement {
   }
 
   render() {
+    const isUrgent = this.variant === 'danger' || this.variant === 'warning';
     return html`
-      <div class="alert ${this.variant}" role="alert">
+      <div
+        class="alert ${this.variant}"
+        role=${isUrgent ? 'alert' : 'status'}
+      >
         <svg
           class="icon"
           viewBox="0 0 48 48"

package/src/components/avatar/vox-avatar.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -63,8 +63,15 @@ export class VoxAvatar extends LitElement {
   `;
 
   render() {
+    // Without `alt`, fall back to letting AT read the initials as plain text
+    // rather than hiding them behind an empty aria-label via role="img".
+    const labelled = !this.src && this.alt;
     return html`
-      <span class="avatar" role=${this.src ? 'presentation' : 'img'} aria-label=${this.alt}>
+      <span
+        class="avatar"
+        role=${labelled ? 'img' : nothing}
+        aria-label=${labelled ? this.alt : nothing}
+      >
         ${this.src
           ? html`<img src=${this.src} alt=${this.alt} />`
           : this.initials}

package/src/components/card/vox-card.ts

@@ -129,7 +129,7 @@ export class VoxCard extends LitElement {
       <div class="badge ${this.hasBadge ? 'has-badge' : ''}">
         <slot name="badge" @slotchange=${this.handleBadgeSlotChange}></slot>
       </div>
-      <div class="icon ${this.hasIcon ? 'has-icon' : ''}">
+      <div class="icon ${this.hasIcon ? 'has-icon' : ''}" aria-hidden="true">
         <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
       </div>
       <h3 class="heading">${this.heading}</h3>

package/src/components/checkbox/vox-checkbox.ts

@@ -60,10 +60,9 @@ export class VoxCheckbox extends VoxFieldElement {
 
   updated() {
     this.internals.setFormValue(this.checked ? this.value : null);
+    this.invalid = this.required && !this.checked;
     this.internals.setValidity(
-      this.required && !this.checked
-        ? { valueMissing: true }
-        : {},
+      this.invalid ? { valueMissing: true } : {},
       'Please check this box.',
       this.renderRoot.querySelector('input') ?? undefined,
     );
@@ -81,6 +80,8 @@ export class VoxCheckbox extends VoxFieldElement {
           type="checkbox"
           .checked=${this.checked}
           ?disabled=${this.disabled}
+          ?required=${this.required}
+          aria-invalid=${this.invalid ? 'true' : 'false'}
           @change=${this.handleChange}
         />
         <span class="box" aria-hidden="true">

package/src/components/dialog/vox-dialog.ts

@@ -148,12 +148,12 @@ export class VoxDialog extends LitElement {
   render() {
     return html`
       <dialog
-        aria-label=${this.heading || nothing}
+        aria-labelledby=${this.heading ? 'heading' : nothing}
         @close=${this.handleNativeClose}
         @click=${this.handleClick}
       >
         <div class="header">
-          <h2 class="heading">${this.heading}</h2>
+          <h2 class="heading" id="heading">${this.heading}</h2>
           <button class="close" aria-label="Close dialog" @click=${this.close}>
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
               <path d="M18 6 6 18M6 6l12 12" />

package/src/components/disclosure/vox-disclosure.ts

@@ -9,9 +9,13 @@ import { customElement, property } from 'lit/decorators.js';
  */
 @customElement('vox-disclosure')
 export class VoxDisclosure extends LitElement {
+  private static nextId = 0;
+
   @property() summary = 'Show details';
   @property({ type: Boolean, reflect: true }) open = false;
 
+  private readonly panelId = `vox-disclosure-panel-${VoxDisclosure.nextId++}`;
+
   static styles = css`
     :host {
       display: block;
@@ -77,6 +81,7 @@ export class VoxDisclosure extends LitElement {
       <button
         class="trigger"
         aria-expanded=${this.open ? 'true' : 'false'}
+        aria-controls=${this.panelId}
         @click=${this.toggle}
       >
         <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
@@ -84,7 +89,7 @@ export class VoxDisclosure extends LitElement {
         </svg>
         ${this.summary}
       </button>
-      <div class="panel" ?hidden=${!this.open}>
+      <div id=${this.panelId} class="panel" ?hidden=${!this.open}>
         <slot></slot>
       </div>
     `;

package/src/components/dropdown/vox-dropdown.ts

@@ -122,12 +122,14 @@ export class VoxDropdown extends LitElement {
     super.connectedCallback();
     document.addEventListener('click', this.handleOutsideClick);
     this.addEventListener('keydown', this.handleKeydown);
+    this.addEventListener('focusout', this.handleFocusOut);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('click', this.handleOutsideClick);
     this.removeEventListener('keydown', this.handleKeydown);
+    this.removeEventListener('focusout', this.handleFocusOut);
   }
 
   private handleOutsideClick = (event: MouseEvent) => {
@@ -136,6 +138,20 @@ export class VoxDropdown extends LitElement {
     }
   };
 
+  /** Close when focus leaves the component entirely (e.g. Tab past the last item). */
+  private handleFocusOut = (event: FocusEvent) => {
+    const next = event.relatedTarget as Node | null;
+    if (this.open && !(next && this.contains(next))) {
+      this.open = false;
+    }
+  };
+
+  private focusItem(index: number) {
+    const items = [...this.querySelectorAll<HTMLElement>('a, button')];
+    if (items.length === 0) return;
+    items[(index + items.length) % items.length].focus();
+  }
+
   private handleKeydown = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && this.open) {
       this.open = false;
@@ -143,20 +159,27 @@ export class VoxDropdown extends LitElement {
       return;
     }
 
-    if ((event.key === 'ArrowDown' || event.key === 'ArrowUp') && this.open) {
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
       event.preventDefault();
-      const items = [...this.querySelectorAll<HTMLElement>('a, button')];
-      if (items.length === 0) return;
-      const active = document.activeElement as HTMLElement;
-      const index = items.indexOf(active);
       const delta = event.key === 'ArrowDown' ? 1 : -1;
-      const next = items[(Math.max(index, 0) + delta + items.length) % items.length];
-      next.focus();
+      if (!this.open) {
+        this.open = true;
+        this.updateComplete.then(() =>
+          this.focusItem(event.key === 'ArrowDown' ? 0 : -1),
+        );
+        return;
+      }
+      const items = [...this.querySelectorAll<HTMLElement>('a, button')];
+      const index = items.indexOf(document.activeElement as HTMLElement);
+      this.focusItem(Math.max(index, 0) + delta);
     }
   };
 
   private toggle() {
     this.open = !this.open;
+    if (this.open) {
+      this.updateComplete.then(() => this.focusItem(0));
+    }
   }
 
   render() {
@@ -165,6 +188,7 @@ export class VoxDropdown extends LitElement {
         class="trigger"
         aria-expanded=${this.open ? 'true' : 'false'}
         aria-haspopup="true"
+        aria-controls="menu"
         @click=${this.toggle}
       >
         ${this.label}
@@ -172,7 +196,7 @@ export class VoxDropdown extends LitElement {
           <path d="m6 9 6 6 6-6" />
         </svg>
       </button>
-      <div class="menu">
+      <div id="menu" class="menu">
         <slot @click=${() => (this.open = false)}></slot>
       </div>
     `;

package/src/components/empty-state/vox-empty-state.ts

@@ -60,7 +60,7 @@ export class VoxEmptyState extends LitElement {
   render() {
     return html`
       <div class="empty">
-        <div class="icon"><slot name="icon"></slot></div>
+        <div class="icon" aria-hidden="true"><slot name="icon"></slot></div>
         <h3 class="heading">${this.heading}</h3>
         <div class="body"><slot></slot></div>
         <div class="actions"><slot name="actions"></slot></div>

package/src/components/file-input/vox-file-input.ts

@@ -84,8 +84,9 @@ export class VoxFileInput extends VoxFieldElement {
     for (const file of files) data.append(this.name, file);
     this.internals.setFormValue(files.length > 0 ? data : null);
 
+    this.invalid = this.required && files.length === 0;
     this.internals.setValidity(
-      this.required && files.length === 0 ? { valueMissing: true } : {},
+      this.invalid ? { valueMissing: true } : {},
       'Please select a file.',
       this.inputEl,
     );
@@ -103,6 +104,8 @@ export class VoxFileInput extends VoxFieldElement {
             accept=${ifDefined(this.accept)}
             ?multiple=${this.multiple}
             ?disabled=${this.disabled}
+            aria-describedby=${ifDefined(this.noteId)}
+            aria-invalid=${this.invalid ? 'true' : 'false'}
             @change=${this.handleChange}
           />
           <span class="picker">

package/src/components/header/vox-header.ts

@@ -157,12 +157,14 @@ export class VoxHeader extends LitElement {
     super.connectedCallback();
     document.addEventListener('click', this.handleOutsideClick);
     this.addEventListener('keydown', this.handleKeydown);
+    this.addEventListener('focusout', this.handleFocusOut);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('click', this.handleOutsideClick);
     this.removeEventListener('keydown', this.handleKeydown);
+    this.removeEventListener('focusout', this.handleFocusOut);
   }
 
   private handleOutsideClick = (event: MouseEvent) => {
@@ -171,6 +173,14 @@ export class VoxHeader extends LitElement {
     }
   };
 
+  /** Close the mobile menu once focus tabs past its last item. */
+  private handleFocusOut = (event: FocusEvent) => {
+    const next = event.relatedTarget as Node | null;
+    if (this.mobileOpen && !(next && this.contains(next))) {
+      this.mobileOpen = false;
+    }
+  };
+
   private handleKeydown = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && this.mobileOpen) {
       this.mobileOpen = false;

package/src/components/input/vox-input.ts

@@ -56,6 +56,8 @@ export class VoxInput extends VoxFieldElement {
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
           aria-label=${this.label ? nothing : 'text input'}
+          aria-describedby=${ifDefined(this.noteId)}
+          aria-invalid=${this.invalid ? 'true' : 'false'}
           @input=${this.handleInput}
           @change=${this.handleChange}
         />

package/src/components/link-hub/vox-link-hub.ts

@@ -106,7 +106,7 @@ export class VoxLinkHubItem extends LitElement {
     return html`
       <a href=${this.href}>
         <span class="heading">
-          <span class="icon ${this.hasIcon ? 'has-icon' : ''}">
+          <span class="icon ${this.hasIcon ? 'has-icon' : ''}" aria-hidden="true">
             <slot name="icon" @slotchange=${this.handleIconSlotChange}></slot>
           </span>
           ${this.heading}

package/src/components/pagination/vox-pagination.ts

@@ -2,18 +2,20 @@ import { LitElement, html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 /**
- * Page-number navigation. Children are plain links; mark the current
- * page with `aria-current="page"`:
+ * Page-number navigation. Children are plain links, with the current
+ * page as a non-interactive `<span aria-current="page">` — like
+ * `<vox-breadcrumbs>`, it shouldn't be a link to itself:
  *
  * ```html
  * <vox-pagination>
  *   <a href="?page=1">1</a>
- *   <a href="?page=2" aria-current="page">2</a>
+ *   <span aria-current="page">2</span>
  *   <a href="?page=3">3</a>
  * </vox-pagination>
  * ```
  *
- * @slot - `<a>` elements (including any prev/next links).
+ * @slot - `<a>` elements (including any prev/next links) and the
+ * current-page `<span>`.
  */
 @customElement('vox-pagination')
 export class VoxPagination extends LitElement {
@@ -31,7 +33,8 @@ export class VoxPagination extends LitElement {
       flex-wrap: wrap;
     }
 
-    ::slotted(a) {
+    ::slotted(a),
+    ::slotted(span) {
       display: inline-flex;
       align-items: center;
       justify-content: center;
@@ -53,7 +56,7 @@ export class VoxPagination extends LitElement {
       background-color: var(--vox-color-brand-soft);
     }
 
-    ::slotted(a[aria-current='page']) {
+    ::slotted([aria-current='page']) {
       background-color: var(--vox-color-brand-3);
       color: var(--vox-color-text-inverse);
       font-weight: 600;

package/src/components/radio/vox-radio-group.ts

@@ -1,5 +1,6 @@
-import { html, css } from 'lit';
+import { html, css, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { VoxFieldElement, fieldStyles } from '../../internal/field.js';
 import type { VoxRadio } from './vox-radio.js';
 
@@ -35,8 +36,9 @@ export class VoxRadioGroup extends VoxFieldElement {
 
   updated() {
     this.internals.setFormValue(this.value || null);
+    this.invalid = this.required && !this.value;
     this.internals.setValidity(
-      this.required && !this.value ? { valueMissing: true } : {},
+      this.invalid ? { valueMissing: true } : {},
       'Please select an option.',
       this,
     );
@@ -46,10 +48,12 @@ export class VoxRadioGroup extends VoxFieldElement {
   private syncRadios() {
     const radios = this.radios;
     const anyChecked = radios.some((r) => r.value === this.value && this.value !== '');
-    radios.forEach((radio, index) => {
+    const firstEnabled = radios.find((r) => !r.disabled);
+    radios.forEach((radio) => {
       radio.checked = this.value !== '' && radio.value === this.value;
-      // Roving tabindex: the checked radio is tabbable, else the first one.
-      const tabbable = anyChecked ? radio.checked : index === 0;
+      // Roving tabindex: the checked radio is tabbable, else the first
+      // enabled one (a disabled radio can't receive focus at all).
+      const tabbable = anyChecked ? radio.checked : radio === firstEnabled;
       radio.shadowRoot
         ?.querySelector('.radio')
         ?.setAttribute('tabindex', tabbable ? '0' : '-1');
@@ -89,7 +93,14 @@ export class VoxRadioGroup extends VoxFieldElement {
 
   render() {
     return html`
-      <div class="field" role="radiogroup" aria-label=${this.label}>
+      <div
+        class="field"
+        role="radiogroup"
+        aria-label=${this.label || nothing}
+        aria-describedby=${ifDefined(this.noteId)}
+        aria-invalid=${this.invalid ? 'true' : 'false'}
+        aria-required=${this.required ? 'true' : 'false'}
+      >
         ${this.label
           ? html`<span class="label">
               ${this.label}${this.required

package/src/components/select/vox-select.ts

@@ -1,5 +1,6 @@
 import { html, css } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { VoxFieldElement, fieldStyles } from '../../internal/field.js';
 
 /**
@@ -73,6 +74,8 @@ export class VoxSelect extends VoxFieldElement {
           class="control"
           ?required=${this.required}
           ?disabled=${this.disabled}
+          aria-describedby=${ifDefined(this.noteId)}
+          aria-invalid=${this.invalid ? 'true' : 'false'}
           @change=${this.handleChange}
         ></select>
         ${this.renderNote()}

package/src/components/sidenav/vox-sidenav.ts

@@ -94,12 +94,14 @@ export class VoxSidenav extends LitElement {
     super.connectedCallback();
     document.addEventListener('click', this.handleOutsideClick);
     this.addEventListener('keydown', this.handleKeydown);
+    this.addEventListener('focusout', this.handleFocusOut);
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener('click', this.handleOutsideClick);
     this.removeEventListener('keydown', this.handleKeydown);
+    this.removeEventListener('focusout', this.handleFocusOut);
   }
 
   private handleOutsideClick = (event: MouseEvent) => {
@@ -108,6 +110,14 @@ export class VoxSidenav extends LitElement {
     }
   };
 
+  /** Close the mobile menu once focus tabs past its last item. */
+  private handleFocusOut = (event: FocusEvent) => {
+    const next = event.relatedTarget as Node | null;
+    if (this.mobileOpen && !(next && this.contains(next))) {
+      this.mobileOpen = false;
+    }
+  };
+
   private handleKeydown = (event: KeyboardEvent) => {
     if (event.key === 'Escape' && this.mobileOpen) {
       this.mobileOpen = false;
@@ -170,9 +180,13 @@ export class VoxSidenav extends LitElement {
  */
 @customElement('vox-sidenav-group')
 export class VoxSidenavGroup extends LitElement {
+  private static nextId = 0;
+
   @property() heading = '';
   @property({ type: Boolean, reflect: true }) open = false;
 
+  private readonly itemsId = `vox-sidenav-group-items-${VoxSidenavGroup.nextId++}`;
+
   static styles = css`
     :host {
       display: block;
@@ -240,6 +254,7 @@ export class VoxSidenavGroup extends LitElement {
       <button
         class="trigger"
         aria-expanded=${this.open ? 'true' : 'false'}
+        aria-controls=${this.itemsId}
         @click=${this.toggle}
       >
         ${this.heading}
@@ -247,7 +262,7 @@ export class VoxSidenavGroup extends LitElement {
           <path d="m9 6 6 6-6 6" />
         </svg>
       </button>
-      <div class="items"><slot></slot></div>
+      <div id=${this.itemsId} class="items"><slot></slot></div>
     `;
   }
 }

package/src/components/step-indicator/vox-step-indicator.ts

@@ -1,4 +1,4 @@
-import { LitElement, html, css } from 'lit';
+import { LitElement, html, css, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
 export type StepState = 'complete' | 'current' | 'upcoming';
@@ -122,6 +122,15 @@ export class VoxStep extends LitElement {
       font-weight: 600;
       color: var(--vox-color-text-1);
     }
+
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip: rect(0 0 0 0);
+      white-space: nowrap;
+    }
   `;
 
   render() {
@@ -138,7 +147,12 @@ export class VoxStep extends LitElement {
               </svg>`
             : this.number}
         </span>
-        <span class="label">${this.label}</span>
+        <span class="label">
+          ${this.label}
+          ${this.state !== 'current'
+            ? html`<span class="visually-hidden"> (${this.state})</span>`
+            : nothing}
+        </span>
       </div>
     `;
   }

package/src/components/tabs/vox-tabs.ts

@@ -65,11 +65,18 @@ export class VoxTabs extends LitElement {
   }
 
   private handleKeydown(event: KeyboardEvent) {
+    const tabs = this.tabs;
+    if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      const target = tabs[event.key === 'Home' ? 0 : tabs.length - 1];
+      target.select();
+      target.focusTab();
+      return;
+    }
     const deltas: Record<string, number> = { ArrowRight: 1, ArrowLeft: -1 };
     const delta = deltas[event.key];
     if (!delta) return;
     event.preventDefault();
-    const tabs = this.tabs;
     const index = tabs.findIndex((t) => t.selected);
     const next = tabs[(index + delta + tabs.length) % tabs.length];
     next.select();
@@ -150,9 +157,11 @@ export class VoxTab extends LitElement {
   render() {
     return html`
       <button
+        id="tab-${this.panel}"
         class="tab"
         role="tab"
         aria-selected=${this.selected ? 'true' : 'false'}
+        aria-controls="panel-${this.panel}"
         tabindex=${this.selected ? '0' : '-1'}
         @click=${this.select}
       >
@@ -185,10 +194,25 @@ export class VoxTabPanel extends LitElement {
     :host([active]) {
       display: block;
     }
+
+    div:focus-visible {
+      outline: 2px solid var(--vox-color-brand-1);
+      outline-offset: 2px;
+      border-radius: var(--vox-radius-sm);
+    }
   `;
 
   render() {
-    return html`<div role="tabpanel"><slot></slot></div>`;
+    return html`
+      <div
+        id="panel-${this.name}"
+        role="tabpanel"
+        aria-labelledby="tab-${this.name}"
+        tabindex="0"
+      >
+        <slot></slot>
+      </div>
+    `;
   }
 }
 

package/src/components/textarea/vox-textarea.ts

@@ -59,6 +59,8 @@ export class VoxTextarea extends VoxFieldElement {
           ?required=${this.required}
           ?readonly=${this.readonly}
           ?disabled=${this.disabled}
+          aria-describedby=${ifDefined(this.noteId)}
+          aria-invalid=${this.invalid ? 'true' : 'false'}
           @input=${this.handleInput}
           @change=${this.handleChange}
         ></textarea>

package/src/internal/field.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css, nothing } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 
 /**
  * Shared base for form-associated VoxBlocks controls. Uses ElementInternals
@@ -10,6 +10,9 @@ export class VoxFieldElement extends LitElement {
 
   protected internals: ElementInternals;
 
+  /** Whether the control currently fails validation; drives `aria-invalid`. */
+  @state() protected invalid = false;
+
   @property() name = '';
   @property() label = '';
   @property() note = '';
@@ -46,6 +49,7 @@ export class VoxFieldElement extends LitElement {
     inner: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement,
   ) {
     this.internals.setValidity(inner.validity, inner.validationMessage, inner);
+    this.invalid = !inner.validity.valid;
   }
 
   protected renderLabel(forId: string) {
@@ -59,8 +63,13 @@ export class VoxFieldElement extends LitElement {
     `;
   }
 
+  /** `note`'s id when present, for `aria-describedby` on the native control. */
+  protected get noteId(): string | undefined {
+    return this.note ? 'note' : undefined;
+  }
+
   protected renderNote() {
-    return this.note ? html`<p class="note">${this.note}</p>` : nothing;
+    return this.note ? html`<p class="note" id="note">${this.note}</p>` : nothing;
   }
 }
 
@@ -119,6 +128,15 @@ export const fieldStyles = css`
     box-shadow: 0 0 0 3px var(--vox-color-brand-soft);
   }
 
+  .control[aria-invalid='true'] {
+    border-color: var(--vox-color-danger-1);
+  }
+
+  .control[aria-invalid='true']:focus {
+    border-color: var(--vox-color-danger-1);
+    box-shadow: 0 0 0 3px var(--vox-color-danger-soft);
+  }
+
   /* Corner flattening when placed inside a <vox-input-group>. */
   :host([data-vox-group]) .control {
     border-radius: 0;