diff --git a/.changeset/a11y-button.md b/.changeset/a11y-button.md
new file mode 100644
index 00000000..5040a5fd
--- /dev/null
+++ b/.changeset/a11y-button.md
@@ -0,0 +1,6 @@
+---
+'@surfnet/curve-react': patch
+'@surfnet/curve-angular': patch
+---
+
+Button: the focus indicator is now a solid 2px outline with a 2px gap in `--primary-strong` (`--destructive` for destructive buttons), which meets 3:1 contrast in every theme, in light and dark mode.
diff --git a/.changeset/a11y-calendar.md b/.changeset/a11y-calendar.md
new file mode 100644
index 00000000..4a2609bd
--- /dev/null
+++ b/.changeset/a11y-calendar.md
@@ -0,0 +1,5 @@
+---
+'@surfnet/curve-angular': patch
+---
+
+Calendar / Date Picker: day buttons are announced with the full date, and the grid has the month and year as its name, which is also announced when the month changes.
diff --git a/.changeset/a11y-combobox.md b/.changeset/a11y-combobox.md
new file mode 100644
index 00000000..45a8ef94
--- /dev/null
+++ b/.changeset/a11y-combobox.md
@@ -0,0 +1,5 @@
+---
+'@surfnet/curve-angular': patch
+---
+
+Combobox: the input now sets `aria-controls` and `aria-activedescendant`, so screen readers announce the highlighted option.
diff --git a/.changeset/a11y-command.md b/.changeset/a11y-command.md
new file mode 100644
index 00000000..acb295b4
--- /dev/null
+++ b/.changeset/a11y-command.md
@@ -0,0 +1,5 @@
+---
+'@surfnet/curve-angular': patch
+---
+
+Command: the input has a default accessible name, the same as React.
diff --git a/.changeset/a11y-context-menu.md b/.changeset/a11y-context-menu.md
new file mode 100644
index 00000000..069c3553
--- /dev/null
+++ b/.changeset/a11y-context-menu.md
@@ -0,0 +1,6 @@
+---
+'@surfnet/curve-react': patch
+'@surfnet/curve-angular': patch
+---
+
+Context Menu: the trigger can be focused and opened with Shift+F10 or the Menu key, and shows the button focus outline. In Angular, focus now returns to the trigger when the menu closes.
diff --git a/.changeset/a11y-sonner.md b/.changeset/a11y-sonner.md
new file mode 100644
index 00000000..b4fd60f0
--- /dev/null
+++ b/.changeset/a11y-sonner.md
@@ -0,0 +1,6 @@
+---
+'@surfnet/curve-react': minor
+'@surfnet/curve-angular': minor
+---
+
+Toast (Sonner): toasts now stay 8 seconds (was 4) and show a close button by default. Pass `duration` / `closeButton` to change this.
diff --git a/packages/angular/src/lib/ui/button/src/lib/hlm-button.css b/packages/angular/src/lib/ui/button/src/lib/hlm-button.css
index d0c9bb5a..16f7e9a8 100644
--- a/packages/angular/src/lib/ui/button/src/lib/hlm-button.css
+++ b/packages/angular/src/lib/ui/button/src/lib/hlm-button.css
@@ -30,9 +30,11 @@
   transform: translateY(1px);
 }
 
+/* Solid 2px outline with a 2px gap: >= 3:1 against the page in every theme and mode.
+   --primary-strong is used because --ring is below 3:1 in several themes (see #250). */
 .curve-button:focus-visible {
-  border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
+  outline: 2px solid var(--primary-strong);
+  outline-offset: 2px;
 }
 
 .curve-button:disabled,
@@ -135,12 +137,7 @@
 }
 
 .curve-button--variant-destructive:focus-visible {
-  border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
-}
-
-.dark .curve-button--variant-destructive:focus-visible {
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+  outline-color: var(--destructive);
 }
 
 .curve-button--variant-link {
diff --git a/packages/angular/src/lib/ui/button/src/lib/hlm-button.stories.ts b/packages/angular/src/lib/ui/button/src/lib/hlm-button.stories.ts
index 57263098..ad817030 100644
--- a/packages/angular/src/lib/ui/button/src/lib/hlm-button.stories.ts
+++ b/packages/angular/src/lib/ui/button/src/lib/hlm-button.stories.ts
@@ -12,8 +12,6 @@ type ButtonArgs = HlmButton & { disabled: boolean };
 
 const meta: Meta<ButtonArgs> = {
   title: 'Components/Button',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-minor'],
   component: HlmButton,
   decorators: [
     moduleMetadata({
diff --git a/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar-multi.ts b/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar-multi.ts
index 199c3775..b47aa6b5 100644
--- a/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar-multi.ts
+++ b/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar-multi.ts
@@ -86,16 +86,20 @@ import type { ClassValue } from 'clsx';
                 }
                 @case ('dropdown-months') {
                   <ng-container [ngTemplateOutlet]="month" />
-                  <div brnCalendarHeader class="curve-calendar-heading">{{ heading.year }}</div>
+                  <div class="curve-calendar-heading" aria-hidden="true">{{ heading.year }}</div>
                 }
                 @case ('dropdown-years') {
-                  <div brnCalendarHeader class="curve-calendar-heading">{{ heading.month }}</div>
+                  <div class="curve-calendar-heading" aria-hidden="true">{{ heading.month }}</div>
                   <ng-container [ngTemplateOutlet]="year" />
                 }
                 @case ('label') {
                   <div brnCalendarHeader class="curve-calendar-heading">{{ heading.header }}</div>
                 }
               }
+              <!-- Full month + year for screen readers: names the grid and announces month changes. -->
+              @if (captionLayout() !== 'label') {
+                <div brnCalendarHeader class="curve-calendar-sr-only">{{ heading.header }}</div>
+              }
             </div>
 
             <div class="curve-calendar-nav-group">
@@ -134,7 +138,12 @@ import type { ClassValue } from 'clsx';
             <tr *brnCalendarWeek="let week" class="curve-calendar-week">
               @for (date of week; track _dateAdapter.getTime(date)) {
                 <td brnCalendarCell class="curve-calendar-cell">
-                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
+                  <button
+                    brnCalendarCellButton
+                    [date]="date"
+                    [class]="_btnClass"
+                    [attr.aria-label]="_labelDay(date)"
+                  >
                     {{ _dateAdapter.getDate(date) }}
                   </button>
                 </td>
@@ -226,4 +235,18 @@ export class HlmCalendarMulti<T> {
   );
 
   protected readonly _selectClass = 'curve-calendar-select-trigger';
+
+  /** Full date for screen readers, e.g. "Wednesday, 4 November 2026" (the button only shows "4"). */
+  protected _labelDay(date: T): string {
+    return new Date(
+      this._dateAdapter.getYear(date),
+      this._dateAdapter.getMonth(date),
+      this._dateAdapter.getDate(date),
+    ).toLocaleDateString(undefined, {
+      weekday: 'long',
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    });
+  }
 }
diff --git a/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar-range.ts b/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar-range.ts
index 8c595378..e7eeca9d 100644
--- a/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar-range.ts
+++ b/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar-range.ts
@@ -85,16 +85,20 @@ import type { ClassValue } from 'clsx';
                 }
                 @case ('dropdown-months') {
                   <ng-container [ngTemplateOutlet]="month" />
-                  <div brnCalendarHeader class="curve-calendar-heading">{{ heading.year }}</div>
+                  <div class="curve-calendar-heading" aria-hidden="true">{{ heading.year }}</div>
                 }
                 @case ('dropdown-years') {
-                  <div brnCalendarHeader class="curve-calendar-heading">{{ heading.month }}</div>
+                  <div class="curve-calendar-heading" aria-hidden="true">{{ heading.month }}</div>
                   <ng-container [ngTemplateOutlet]="year" />
                 }
                 @case ('label') {
                   <div brnCalendarHeader class="curve-calendar-heading">{{ heading.header }}</div>
                 }
               }
+              <!-- Full month + year for screen readers: names the grid and announces month changes. -->
+              @if (captionLayout() !== 'label') {
+                <div brnCalendarHeader class="curve-calendar-sr-only">{{ heading.header }}</div>
+              }
             </div>
 
             <div class="curve-calendar-nav-group">
@@ -133,7 +137,12 @@ import type { ClassValue } from 'clsx';
             <tr *brnCalendarWeek="let week" class="curve-calendar-week">
               @for (date of week; track _dateAdapter.getTime(date)) {
                 <td brnCalendarCell class="curve-calendar-cell curve-calendar-cell--range">
-                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
+                  <button
+                    brnCalendarCellButton
+                    [date]="date"
+                    [class]="_btnClass"
+                    [attr.aria-label]="_labelDay(date)"
+                  >
                     {{ _dateAdapter.getDate(date) }}
                   </button>
                 </td>
@@ -218,4 +227,18 @@ export class HlmCalendarRange<T> {
   );
 
   protected readonly _selectClass = 'curve-calendar-select-trigger';
+
+  /** Full date for screen readers, e.g. "Wednesday, 4 November 2026" (the button only shows "4"). */
+  protected _labelDay(date: T): string {
+    return new Date(
+      this._dateAdapter.getYear(date),
+      this._dateAdapter.getMonth(date),
+      this._dateAdapter.getDate(date),
+    ).toLocaleDateString(undefined, {
+      weekday: 'long',
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    });
+  }
 }
diff --git a/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar.css b/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar.css
index c101326e..2e20d487 100644
--- a/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar.css
+++ b/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar.css
@@ -310,3 +310,16 @@
   border-radius: calc(infinity * 1px);
   background-color: var(--destructive);
 }
+
+/* Visually hidden month + year heading (screen readers only). */
+.curve-calendar-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
diff --git a/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar.ts b/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar.ts
index 9584305c..4348c51a 100644
--- a/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar.ts
+++ b/packages/angular/src/lib/ui/calendar/src/lib/hlm-calendar.ts
@@ -84,16 +84,20 @@ import type { ClassValue } from 'clsx';
                 }
                 @case ('dropdown-months') {
                   <ng-container [ngTemplateOutlet]="month" />
-                  <div brnCalendarHeader class="curve-calendar-heading">{{ heading.year }}</div>
+                  <div class="curve-calendar-heading" aria-hidden="true">{{ heading.year }}</div>
                 }
                 @case ('dropdown-years') {
-                  <div brnCalendarHeader class="curve-calendar-heading">{{ heading.month }}</div>
+                  <div class="curve-calendar-heading" aria-hidden="true">{{ heading.month }}</div>
                   <ng-container [ngTemplateOutlet]="year" />
                 }
                 @case ('label') {
                   <div brnCalendarHeader class="curve-calendar-heading">{{ heading.header }}</div>
                 }
               }
+              <!-- Full month + year for screen readers: names the grid and announces month changes. -->
+              @if (captionLayout() !== 'label') {
+                <div brnCalendarHeader class="curve-calendar-sr-only">{{ heading.header }}</div>
+              }
             </div>
 
             <div class="curve-calendar-nav-group">
@@ -126,7 +130,12 @@ import type { ClassValue } from 'clsx';
             <tr *brnCalendarWeek="let week" class="curve-calendar-week">
               @for (date of week; track _dateAdapter.getTime(date)) {
                 <td brnCalendarCell class="curve-calendar-cell">
-                  <button brnCalendarCellButton [date]="date" [class]="_btnClass">
+                  <button
+                    brnCalendarCellButton
+                    [date]="date"
+                    [class]="_btnClass"
+                    [attr.aria-label]="_labelDay(date)"
+                  >
                     {{ _dateAdapter.getDate(date) }}
                   </button>
                 </td>
@@ -208,4 +217,18 @@ export class HlmCalendar<T> {
   );
 
   protected readonly _selectClass = 'curve-calendar-select-trigger';
+
+  /** Full date for screen readers, e.g. "Wednesday, 4 November 2026" (the button only shows "4"). */
+  protected _labelDay(date: T): string {
+    return new Date(
+      this._dateAdapter.getYear(date),
+      this._dateAdapter.getMonth(date),
+      this._dateAdapter.getDate(date),
+    ).toLocaleDateString(undefined, {
+      weekday: 'long',
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    });
+  }
 }
diff --git a/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-chip-input.ts b/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-chip-input.ts
index 22ff52a5..e9cd8b95 100644
--- a/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-chip-input.ts
+++ b/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-chip-input.ts
@@ -1,13 +1,20 @@
 import { Directive } from '@angular/core';
 import { BrnComboboxChipInput } from '@spartan-ng/brain/combobox';
 import { classes } from '../../../utils/src';
+import { injectHlmComboboxAria } from './hlm-combobox-listbox-id';
 
 @Directive({
   selector: 'input[hlmComboboxChipInput]',
   hostDirectives: [{ directive: BrnComboboxChipInput, inputs: ['id', 'aria-invalid'] }],
-  host: { 'data-slot': 'combobox-chip-input' },
+  host: {
+    'data-slot': 'combobox-chip-input',
+    '[attr.aria-controls]': '_aria.controls()',
+    '[attr.aria-activedescendant]': '_aria.activeDescendant()',
+  },
 })
 export class HlmComboboxChipInput {
+  protected readonly _aria = injectHlmComboboxAria();
+
   constructor() {
     classes(() => 'curve-combobox-chip-input');
   }
diff --git a/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-input.ts b/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-input.ts
index 075989be..418c7aee 100644
--- a/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-input.ts
+++ b/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-input.ts
@@ -8,7 +8,7 @@ import {
   injectBrnComboboxBase,
 } from '@spartan-ng/brain/combobox';
 import { HlmInputGroupImports } from '../../../input-group/src';
-import { injectHlmComboboxListboxId } from './hlm-combobox-listbox-id';
+import { injectHlmComboboxAria, injectHlmComboboxListboxId } from './hlm-combobox-listbox-id';
 
 @Component({
   selector: 'hlm-combobox-input',
@@ -26,6 +26,8 @@ import { injectHlmComboboxListboxId } from './hlm-combobox-listbox-id';
         [placeholder]="placeholder()"
         [forceInvalid]="forceInvalid()"
         [aria-invalid]="ariaInvalidOverride()"
+        [attr.aria-controls]="_aria.controls()"
+        [attr.aria-activedescendant]="_aria.activeDescendant()"
       />
 
       <hlm-input-group-addon align="inline-end">
@@ -72,6 +74,7 @@ export class HlmComboboxInput {
   private readonly _combobox = injectBrnComboboxBase();
   protected readonly _listboxId = injectHlmComboboxListboxId();
   protected readonly _isExpanded = this._combobox.isExpanded;
+  protected readonly _aria = injectHlmComboboxAria();
 
   public readonly inputId = input<string>(`hlm-combobox-input-${HlmComboboxInput._id++}`);
   public readonly placeholder = input<string>('');
diff --git a/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-listbox-id.ts b/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-listbox-id.ts
index d313316c..87038c7f 100644
--- a/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-listbox-id.ts
+++ b/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox-listbox-id.ts
@@ -1,4 +1,6 @@
-import { inject, InjectionToken, type ValueProvider } from '@angular/core';
+import { computed, inject, InjectionToken, type Signal, type ValueProvider } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { injectBrnComboboxBase } from '@spartan-ng/brain/combobox';
 
 let listboxId = 0;
 
@@ -14,3 +16,27 @@ export function provideHlmComboboxListboxId(): ValueProvider {
 export function injectHlmComboboxListboxId(): string | null {
   return inject(HlmComboboxListboxId, { optional: true });
 }
+
+/**
+ * ARIA links for a combobox input: `aria-controls` points at the open listbox and
+ * `aria-activedescendant` at the highlighted option, so screen readers announce the
+ * option while focus stays in the input. Both are `null` while the popup is closed.
+ */
+export function injectHlmComboboxAria(): {
+  controls: Signal<string | null>;
+  activeDescendant: Signal<string | null>;
+} {
+  const combobox = injectBrnComboboxBase();
+  const listboxId = injectHlmComboboxListboxId();
+  // `change` emits the new active index; reading it makes the computed below re-run.
+  const activeIndex = toSignal(combobox.keyManager.change, { initialValue: -1 });
+
+  return {
+    controls: computed(() => (combobox.isExpanded() ? listboxId : null)),
+    activeDescendant: computed(() => {
+      activeIndex();
+      if (!combobox.isExpanded()) return null;
+      return combobox.keyManager.activeItem?.id() ?? null;
+    }),
+  };
+}
diff --git a/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox.stories.ts b/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox.stories.ts
index b89ab579..e3ad4bf5 100644
--- a/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox.stories.ts
+++ b/packages/angular/src/lib/ui/combobox/src/lib/hlm-combobox.stories.ts
@@ -6,15 +6,14 @@ import { comboboxContract } from '@surfnet/curve-contracts';
 import { HlmCombobox } from './hlm-combobox';
 import { HlmComboboxImports } from '..';
 import { HlmFieldImports } from '../../../field/src';
+import { HlmLabelImports } from '../../../label/src';
 
 const meta: Meta<HlmCombobox> = {
   title: 'Components/Combobox',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-gap'],
   component: HlmCombobox,
   decorators: [
     moduleMetadata({
-      imports: [HlmComboboxImports, HlmFieldImports, ReactiveFormsModule],
+      imports: [HlmComboboxImports, HlmFieldImports, HlmLabelImports, ReactiveFormsModule],
     }),
   ],
   parameters: {
@@ -37,8 +36,10 @@ type Story = StoryObj<HlmCombobox>;
 export const Default: Story = {
   render: () => ({
     template: `
-			<hlm-combobox>
-				<hlm-combobox-input placeholder="Search a country…" showClear class="w-64" />
+			<div class="flex flex-col gap-2">
+<label hlmLabel for="combobox-country">Country</label>
+<hlm-combobox>
+				<hlm-combobox-input inputId="combobox-country" placeholder="Search a country…" showClear class="w-64" />
 				<hlm-combobox-content *hlmComboboxPortal>
 					<hlm-combobox-empty>No countries found.</hlm-combobox-empty>
 					<div hlmComboboxList>
@@ -55,6 +56,7 @@ export const Default: Story = {
 					</div>
 				</hlm-combobox-content>
 			</hlm-combobox>
+</div>
 		`,
   }),
 };
@@ -63,8 +65,10 @@ export const Default: Story = {
 export const Grouped: Story = {
   render: () => ({
     template: `
-			<hlm-combobox>
-				<hlm-combobox-input placeholder="Search a framework…" class="w-64" />
+			<div class="flex flex-col gap-2">
+<label hlmLabel for="combobox-framework">Framework</label>
+<hlm-combobox>
+				<hlm-combobox-input inputId="combobox-framework" placeholder="Search a framework…" class="w-64" />
 				<hlm-combobox-content *hlmComboboxPortal>
 					<hlm-combobox-empty>No frameworks found.</hlm-combobox-empty>
 					<div hlmComboboxList>
@@ -86,34 +90,38 @@ export const Grouped: Story = {
 					</div>
 				</hlm-combobox-content>
 			</hlm-combobox>
+</div>
 		`,
   }),
 };
 
 @Component({
   selector: 'combobox-multiple-demo',
-  imports: [HlmComboboxImports],
+  imports: [HlmComboboxImports, HlmLabelImports],
   template: `
-    <hlm-combobox-multiple [(value)]="values">
-      <hlm-combobox-chips class="w-64">
-        <ng-template hlmComboboxValues let-values>
-          @for (value of values; track value) {
-            <hlm-combobox-chip [value]="value">{{ value }}</hlm-combobox-chip>
-          }
-        </ng-template>
-        <input hlmComboboxChipInput placeholder="Add a language…" />
-      </hlm-combobox-chips>
-      <hlm-combobox-content *hlmComboboxPortal>
-        <hlm-combobox-empty>No languages found.</hlm-combobox-empty>
-        <div hlmComboboxList>
-          <hlm-combobox-item value="TypeScript">TypeScript</hlm-combobox-item>
-          <hlm-combobox-item value="JavaScript">JavaScript</hlm-combobox-item>
-          <hlm-combobox-item value="Python">Python</hlm-combobox-item>
-          <hlm-combobox-item value="Rust">Rust</hlm-combobox-item>
-          <hlm-combobox-item value="Go">Go</hlm-combobox-item>
-        </div>
-      </hlm-combobox-content>
-    </hlm-combobox-multiple>
+    <div class="flex flex-col gap-2">
+      <label hlmLabel for="combobox-languages">Languages</label>
+      <hlm-combobox-multiple [(value)]="values">
+        <hlm-combobox-chips class="w-64">
+          <ng-template hlmComboboxValues let-values>
+            @for (value of values; track value) {
+              <hlm-combobox-chip [value]="value">{{ value }}</hlm-combobox-chip>
+            }
+          </ng-template>
+          <input hlmComboboxChipInput id="combobox-languages" placeholder="Add a language…" />
+        </hlm-combobox-chips>
+        <hlm-combobox-content *hlmComboboxPortal>
+          <hlm-combobox-empty>No languages found.</hlm-combobox-empty>
+          <div hlmComboboxList>
+            <hlm-combobox-item value="TypeScript">TypeScript</hlm-combobox-item>
+            <hlm-combobox-item value="JavaScript">JavaScript</hlm-combobox-item>
+            <hlm-combobox-item value="Python">Python</hlm-combobox-item>
+            <hlm-combobox-item value="Rust">Rust</hlm-combobox-item>
+            <hlm-combobox-item value="Go">Go</hlm-combobox-item>
+          </div>
+        </hlm-combobox-content>
+      </hlm-combobox-multiple>
+    </div>
   `,
 })
 class ComboboxMultipleDemo {
@@ -134,12 +142,15 @@ export const Multiple: Story = {
 export const Disabled: Story = {
   render: () => ({
     template: `
-			<hlm-combobox disabled>
-				<hlm-combobox-input placeholder="Search a country…" class="w-64" />
+			<div class="flex flex-col gap-2">
+<label hlmLabel for="combobox-country-disabled">Country</label>
+<hlm-combobox disabled>
+				<hlm-combobox-input inputId="combobox-country-disabled" placeholder="Search a country…" class="w-64" />
 				<hlm-combobox-content *hlmComboboxPortal>
 					<hlm-combobox-item value="Netherlands">Netherlands</hlm-combobox-item>
 				</hlm-combobox-content>
 			</hlm-combobox>
+</div>
 		`,
   }),
 };
diff --git a/packages/angular/src/lib/ui/command/src/lib/hlm-command-input.ts b/packages/angular/src/lib/ui/command/src/lib/hlm-command-input.ts
index 1679cac1..21718765 100644
--- a/packages/angular/src/lib/ui/command/src/lib/hlm-command-input.ts
+++ b/packages/angular/src/lib/ui/command/src/lib/hlm-command-input.ts
@@ -32,8 +32,10 @@ export class HlmCommandInput {
   public readonly inputId = input<string | undefined>();
   public readonly placeholder = input<string>('');
 
-  /** Accessible name applied to the underlying combobox input. */
-  public readonly ariaLabel = input<string | null>(null, { alias: 'aria-label' });
+  /** Accessible name applied to the underlying combobox input. Same default as React. */
+  public readonly ariaLabel = input<string | null>('Type a command or search...', {
+    alias: 'aria-label',
+  });
 
   /** Accessible name applied to the underlying combobox input via a visible label. */
   public readonly ariaLabelledby = input<string | null>(null, { alias: 'aria-labelledby' });
diff --git a/packages/angular/src/lib/ui/context-menu/src/lib/hlm-context-menu-trigger.ts b/packages/angular/src/lib/ui/context-menu/src/lib/hlm-context-menu-trigger.ts
index 9561dd20..fd6d8df0 100644
--- a/packages/angular/src/lib/ui/context-menu/src/lib/hlm-context-menu-trigger.ts
+++ b/packages/angular/src/lib/ui/context-menu/src/lib/hlm-context-menu-trigger.ts
@@ -1,6 +1,14 @@
 import { type BooleanInput } from '@angular/cdk/coercion';
 import { CdkContextMenuTrigger } from '@angular/cdk/menu';
-import { booleanAttribute, computed, Directive, effect, inject, input } from '@angular/core';
+import {
+  booleanAttribute,
+  computed,
+  Directive,
+  effect,
+  ElementRef,
+  inject,
+  input,
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { createMenuPosition, type MenuAlign, type MenuSide } from '@spartan-ng/brain/core';
 import { injectHlmContextMenuConfig } from './hlm-context-menu-token';
@@ -23,10 +31,14 @@ import { injectHlmContextMenuConfig } from './hlm-context-menu-token';
   ],
   host: {
     'data-slot': 'context-menu-trigger',
+    // Focusable so keyboard users can open the menu with Shift+F10 or the Menu key (WCAG 2.1.1).
+    '[attr.tabindex]': 'disabled() ? null : 0',
+    '(keydown)': '_onKeydown($event)',
     '[attr.data-disabled]': 'disabled() ? "" : null',
   },
 })
 export class HlmContextMenuTrigger {
+  private readonly _host = inject<ElementRef<HTMLElement>>(ElementRef);
   private readonly _cdkTrigger = inject(CdkContextMenuTrigger, { host: true });
   private readonly _config = injectHlmContextMenuConfig();
 
@@ -39,6 +51,26 @@ export class HlmContextMenuTrigger {
 
   private readonly _menuPosition = computed(() => createMenuPosition(this.align(), this.side()));
 
+  /**
+   * Shift+F10 or the Menu key opens the menu. Not every browser fires `contextmenu` for these
+   * keys, so fire it ourselves, positioned at the bottom-left corner of the trigger.
+   */
+  protected _onKeydown(event: KeyboardEvent): void {
+    const isMenuKey = event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10');
+    if (event.defaultPrevented || !isMenuKey || this.disabled()) return;
+    event.preventDefault();
+    const element = this._host.nativeElement;
+    const rect = element.getBoundingClientRect();
+    element.dispatchEvent(
+      new MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        clientX: rect.left,
+        clientY: rect.bottom,
+      }),
+    );
+  }
+
   constructor() {
     // once the trigger opens we wait until the next tick and then grab the last position
     // used to position the menu. we store this in our trigger which the brnMenu directive has
@@ -55,5 +87,14 @@ export class HlmContextMenuTrigger {
     effect(() => {
       this._cdkTrigger.menuPosition = this._menuPosition();
     });
+
+    // Return focus to the trigger when the menu closes and focus was left on the page body
+    // (WCAG 2.4.3), as React's Base UI context menu does.
+    this._cdkTrigger.closed.pipe(takeUntilDestroyed()).subscribe(() =>
+      setTimeout(() => {
+        const active = document.activeElement;
+        if (!active || active === document.body) this._host.nativeElement.focus();
+      }),
+    );
   }
 }
diff --git a/packages/angular/src/lib/ui/context-menu/src/lib/hlm-context-menu.css b/packages/angular/src/lib/ui/context-menu/src/lib/hlm-context-menu.css
new file mode 100644
index 00000000..acd7ff27
--- /dev/null
+++ b/packages/angular/src/lib/ui/context-menu/src/lib/hlm-context-menu.css
@@ -0,0 +1,5 @@
+/* Same focus outline as Button: the trigger is focusable so keyboard users can open the menu. */
+[data-slot='context-menu-trigger']:focus-visible {
+  outline: 2px solid var(--primary-strong);
+  outline-offset: 2px;
+}
diff --git a/packages/angular/src/lib/ui/context-menu/src/lib/hlm-context-menu.stories.ts b/packages/angular/src/lib/ui/context-menu/src/lib/hlm-context-menu.stories.ts
index dcbaca33..2b8431b7 100644
--- a/packages/angular/src/lib/ui/context-menu/src/lib/hlm-context-menu.stories.ts
+++ b/packages/angular/src/lib/ui/context-menu/src/lib/hlm-context-menu.stories.ts
@@ -5,8 +5,6 @@ import { HlmDropdownMenuImports } from '../../../dropdown-menu/src';
 
 const meta: Meta<HlmContextMenuTrigger> = {
   title: 'Components/ContextMenu',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-gap'],
   component: HlmContextMenuTrigger,
   decorators: [
     moduleMetadata({
@@ -37,7 +35,7 @@ export const Default: Story = {
   render: () => ({
     template: `
 			<div [hlmContextMenuTrigger]="menu" align="start" side="right" class="${triggerAreaClass}">
-				Right click here
+				Right-click here, or focus and press Shift+F10
 			</div>
 			<ng-template #menu>
 				<hlm-dropdown-menu class="w-48">
@@ -45,7 +43,6 @@ export const Default: Story = {
 						<hlm-dropdown-menu-label>My Account</hlm-dropdown-menu-label>
 						<button hlmDropdownMenuItem>
 							<span>Profile</span>
-							<hlm-dropdown-menu-shortcut>⇧⌘P</hlm-dropdown-menu-shortcut>
 						</button>
 						<button hlmDropdownMenuItem>Settings</button>
 					</hlm-dropdown-menu-group>
@@ -62,7 +59,7 @@ export const WithCheckboxItems: Story = {
   render: () => ({
     template: `
 			<div [hlmContextMenuTrigger]="menu" align="start" side="right" class="${triggerAreaClass}">
-				Right click here
+				Right-click here, or focus and press Shift+F10
 			</div>
 			<ng-template #menu>
 				<hlm-dropdown-menu class="w-44">
@@ -90,7 +87,7 @@ export const WithRadioItems: Story = {
   render: () => ({
     template: `
 			<div [hlmContextMenuTrigger]="menu" align="start" side="right" class="${triggerAreaClass}">
-				Right click here
+				Right-click here, or focus and press Shift+F10
 			</div>
 			<ng-template #menu>
 				<hlm-dropdown-menu class="w-44">
@@ -118,7 +115,7 @@ export const WithSubmenu: Story = {
   render: () => ({
     template: `
 			<div [hlmContextMenuTrigger]="menu" align="start" side="right" class="${triggerAreaClass}">
-				Right click here
+				Right-click here, or focus and press Shift+F10
 			</div>
 			<ng-template #menu>
 				<hlm-dropdown-menu class="w-48">
diff --git a/packages/angular/src/lib/ui/date-picker/src/lib/hlm-date-picker.stories.ts b/packages/angular/src/lib/ui/date-picker/src/lib/hlm-date-picker.stories.ts
index e9f8bb4d..e7360e1f 100644
--- a/packages/angular/src/lib/ui/date-picker/src/lib/hlm-date-picker.stories.ts
+++ b/packages/angular/src/lib/ui/date-picker/src/lib/hlm-date-picker.stories.ts
@@ -8,8 +8,6 @@ import { HlmFieldImports } from '../../../field/src';
 
 const meta: Meta<HlmDatePicker<Date>> = {
   title: 'Components/DatePicker',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-minor'],
   component: HlmDatePicker,
   decorators: [
     moduleMetadata({
diff --git a/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.stories.ts b/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.stories.ts
index d3bca152..5a560e3c 100644
--- a/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.stories.ts
+++ b/packages/angular/src/lib/ui/input-otp/src/lib/hlm-input-otp.stories.ts
@@ -12,8 +12,6 @@ type InputOtpArgs = HlmInputOtp & { maxLength: number; disabled: boolean };
 
 const meta: Meta<InputOtpArgs> = {
   title: 'Components/InputOTP',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-gap'],
   component: HlmInputOtp,
   decorators: [
     moduleMetadata({
diff --git a/packages/angular/src/lib/ui/sonner/src/lib/hlm-toaster.stories.ts b/packages/angular/src/lib/ui/sonner/src/lib/hlm-toaster.stories.ts
index f6c298c5..d498a981 100644
--- a/packages/angular/src/lib/ui/sonner/src/lib/hlm-toaster.stories.ts
+++ b/packages/angular/src/lib/ui/sonner/src/lib/hlm-toaster.stories.ts
@@ -8,8 +8,6 @@ import { HlmToaster, HlmToasterImports } from '..';
 
 const meta: Meta<HlmToaster> = {
   title: 'Components/Sonner',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-minor'],
   component: HlmToaster,
   decorators: [
     moduleMetadata({
@@ -56,7 +54,7 @@ const meta: Meta<HlmToaster> = {
   args: {
     position: 'bottom-right',
     richColors: false,
-    closeButton: false,
+    closeButton: true,
     expand: false,
   },
 };
diff --git a/packages/angular/src/lib/ui/sonner/src/lib/hlm-toaster.ts b/packages/angular/src/lib/ui/sonner/src/lib/hlm-toaster.ts
index cb330240..ef549bb7 100644
--- a/packages/angular/src/lib/ui/sonner/src/lib/hlm-toaster.ts
+++ b/packages/angular/src/lib/ui/sonner/src/lib/hlm-toaster.ts
@@ -79,13 +79,13 @@ export class HlmToaster {
   public readonly expand = input<ToasterProps['expand'], BooleanInput>(false, {
     transform: booleanAttribute,
   });
-  public readonly duration = input<ToasterProps['duration'], NumberInput>(4000, {
+  public readonly duration = input<ToasterProps['duration'], NumberInput>(8000, {
     transform: numberAttribute,
   });
   public readonly visibleToasts = input<ToasterProps['visibleToasts'], NumberInput>(3, {
     transform: numberAttribute,
   });
-  public readonly closeButton = input<ToasterProps['closeButton'], BooleanInput>(false, {
+  public readonly closeButton = input<ToasterProps['closeButton'], BooleanInput>(true, {
     transform: booleanAttribute,
   });
   public readonly toastOptions = input<ToasterProps['toastOptions']>({});
diff --git a/packages/angular/src/styles.css b/packages/angular/src/styles.css
index 2ad06ab6..3ea58a50 100644
--- a/packages/angular/src/styles.css
+++ b/packages/angular/src/styles.css
@@ -60,6 +60,7 @@
 @import './lib/ui/carousel/src/lib/hlm-carousel.css' layer(components);
 @import './lib/ui/combobox/src/lib/hlm-combobox.css' layer(components);
 @import './lib/ui/command/src/lib/hlm-command.css' layer(components);
+@import './lib/ui/context-menu/src/lib/hlm-context-menu.css' layer(components);
 @import './lib/ui/curve-data-table/src/lib/curve-data-table.css' layer(components);
 @import './lib/ui/data-table/src/lib/hlm-data-table.css' layer(components);
 @import './lib/ui/date-picker/src/lib/hlm-date-picker.css' layer(components);
diff --git a/packages/react/src/components/ui/button/button.module.css b/packages/react/src/components/ui/button/button.module.css
index cdba4cdf..77d98758 100644
--- a/packages/react/src/components/ui/button/button.module.css
+++ b/packages/react/src/components/ui/button/button.module.css
@@ -20,9 +20,11 @@
   -webkit-tap-highlight-color: transparent;
 }
 
+/* Solid 2px outline with a 2px gap: >= 3:1 against the page in every theme and mode.
+   --primary-strong is used because --ring is below 3:1 in several themes (see #250). */
 .button:focus-visible {
-  border-color: var(--ring);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 32%, transparent);
+  outline: 2px solid var(--primary-strong);
+  outline-offset: 2px;
 }
 
 .button:active:not([aria-haspopup]) {
@@ -132,12 +134,7 @@
 }
 
 .variantDestructive:focus-visible {
-  border-color: color-mix(in oklch, var(--destructive) 40%, transparent);
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent);
-}
-
-:global(.dark) .variantDestructive:focus-visible {
-  box-shadow: 0 0 0 3px color-mix(in oklch, var(--destructive) 40%, transparent);
+  outline-color: var(--destructive);
 }
 
 .variantLink {
diff --git a/packages/react/src/components/ui/button/button.stories.tsx b/packages/react/src/components/ui/button/button.stories.tsx
index 7d4c2a67..d2fd6e9c 100644
--- a/packages/react/src/components/ui/button/button.stories.tsx
+++ b/packages/react/src/components/ui/button/button.stories.tsx
@@ -6,8 +6,6 @@ import { Button } from './button';
 
 const meta = {
   title: 'Components/Button',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-minor'],
   component: Button,
   parameters: {
     docs: {
diff --git a/packages/react/src/components/ui/combobox/combobox.stories.tsx b/packages/react/src/components/ui/combobox/combobox.stories.tsx
index 12ba6500..9c76215d 100644
--- a/packages/react/src/components/ui/combobox/combobox.stories.tsx
+++ b/packages/react/src/components/ui/combobox/combobox.stories.tsx
@@ -19,6 +19,7 @@ import {
   ComboboxValue,
   useComboboxAnchor,
 } from './combobox';
+import { Label } from '@/components/ui/label';
 
 const countries = [
   'Belgium',
@@ -42,8 +43,6 @@ const languages = ['TypeScript', 'JavaScript', 'Python', 'Rust', 'Go'];
 
 const meta = {
   title: 'Components/Combobox',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-gap'],
   component: Combobox,
   parameters: {
     docs: {
@@ -65,48 +64,59 @@ type Story = StoryObj<typeof meta>;
 /** A searchable, filterable select — type to filter, with a trigger and clear button. */
 export const Default: Story = {
   render: () => (
-    <Combobox items={countries}>
-      <ComboboxInput placeholder="Search a country…" showClear className="w-64" />
-      <ComboboxContent>
-        <ComboboxEmpty>No countries found.</ComboboxEmpty>
-        <ComboboxList>
-          {(item: string) => (
-            <ComboboxItem key={item} value={item}>
-              {item}
-            </ComboboxItem>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
+    <div className="flex flex-col gap-2">
+      <Label htmlFor="combobox-country">Country</Label>
+      <Combobox items={countries}>
+        <ComboboxInput
+          id="combobox-country"
+          placeholder="Search a country…"
+          showClear
+          className="w-64"
+        />
+        <ComboboxContent>
+          <ComboboxEmpty>No countries found.</ComboboxEmpty>
+          <ComboboxList>
+            {(item: string) => (
+              <ComboboxItem key={item} value={item}>
+                {item}
+              </ComboboxItem>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </div>
   ),
 };
 
 /** Options organized into labelled, independently-filtered groups. */
 export const Grouped: Story = {
   render: () => (
-    <Combobox items={frameworkGroups}>
-      <ComboboxInput placeholder="Search a framework…" className="w-64" />
-      <ComboboxContent>
-        <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
-        <ComboboxList>
-          {(group: (typeof frameworkGroups)[number], index: number) => (
-            <React.Fragment key={group.value}>
-              {index > 0 && <ComboboxSeparator />}
-              <ComboboxGroup items={group.items}>
-                <ComboboxLabel>{group.value}</ComboboxLabel>
-                <ComboboxCollection>
-                  {(item: string) => (
-                    <ComboboxItem key={item} value={item}>
-                      {item}
-                    </ComboboxItem>
-                  )}
-                </ComboboxCollection>
-              </ComboboxGroup>
-            </React.Fragment>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
+    <div className="flex flex-col gap-2">
+      <Label htmlFor="combobox-framework">Framework</Label>
+      <Combobox items={frameworkGroups}>
+        <ComboboxInput id="combobox-framework" placeholder="Search a framework…" className="w-64" />
+        <ComboboxContent>
+          <ComboboxEmpty>No frameworks found.</ComboboxEmpty>
+          <ComboboxList>
+            {(group: (typeof frameworkGroups)[number], index: number) => (
+              <React.Fragment key={group.value}>
+                {index > 0 && <ComboboxSeparator />}
+                <ComboboxGroup items={group.items}>
+                  <ComboboxLabel>{group.value}</ComboboxLabel>
+                  <ComboboxCollection>
+                    {(item: string) => (
+                      <ComboboxItem key={item} value={item}>
+                        {item}
+                      </ComboboxItem>
+                    )}
+                  </ComboboxCollection>
+                </ComboboxGroup>
+              </React.Fragment>
+            )}
+          </ComboboxList>
+        </ComboboxContent>
+      </Combobox>
+    </div>
   ),
 };
 
@@ -115,25 +125,54 @@ export const Multiple: Story = {
   render: function MultipleCombobox() {
     const anchor = useComboboxAnchor();
     return (
-      <Combobox items={languages} multiple defaultValue={['TypeScript']}>
-        <div ref={anchor}>
-          <ComboboxChips>
-            <ComboboxValue>
-              {(value: string[]) => (
-                <>
-                  {value.map((language) => (
-                    <ComboboxChip key={language} removeLabel={`Remove ${language}`}>
-                      {language}
-                    </ComboboxChip>
-                  ))}
-                  <ComboboxChipsInput placeholder="Add a language…" />
-                </>
+      <div className="flex flex-col gap-2">
+        <Label htmlFor="combobox-languages">Languages</Label>
+        <Combobox items={languages} multiple defaultValue={['TypeScript']}>
+          <div ref={anchor}>
+            <ComboboxChips>
+              <ComboboxValue>
+                {(value: string[]) => (
+                  <>
+                    {value.map((language) => (
+                      <ComboboxChip key={language} removeLabel={`Remove ${language}`}>
+                        {language}
+                      </ComboboxChip>
+                    ))}
+                    <ComboboxChipsInput id="combobox-languages" placeholder="Add a language…" />
+                  </>
+                )}
+              </ComboboxValue>
+            </ComboboxChips>
+          </div>
+          <ComboboxContent anchor={anchor}>
+            <ComboboxEmpty>No languages found.</ComboboxEmpty>
+            <ComboboxList>
+              {(item: string) => (
+                <ComboboxItem key={item} value={item}>
+                  {item}
+                </ComboboxItem>
               )}
-            </ComboboxValue>
-          </ComboboxChips>
-        </div>
-        <ComboboxContent anchor={anchor}>
-          <ComboboxEmpty>No languages found.</ComboboxEmpty>
+            </ComboboxList>
+          </ComboboxContent>
+        </Combobox>
+      </div>
+    );
+  },
+};
+
+/** Disabled state — the input, trigger, and clear button all ignore interaction. */
+export const Disabled: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Label htmlFor="combobox-country-disabled">Country</Label>
+      <Combobox items={countries} defaultValue="Netherlands" disabled>
+        <ComboboxInput
+          id="combobox-country-disabled"
+          placeholder="Search a country…"
+          showClear
+          className="w-64"
+        />
+        <ComboboxContent>
           <ComboboxList>
             {(item: string) => (
               <ComboboxItem key={item} value={item}>
@@ -143,24 +182,6 @@ export const Multiple: Story = {
           </ComboboxList>
         </ComboboxContent>
       </Combobox>
-    );
-  },
-};
-
-/** Disabled state — the input, trigger, and clear button all ignore interaction. */
-export const Disabled: Story = {
-  render: () => (
-    <Combobox items={countries} defaultValue="Netherlands" disabled>
-      <ComboboxInput placeholder="Search a country…" showClear className="w-64" />
-      <ComboboxContent>
-        <ComboboxList>
-          {(item: string) => (
-            <ComboboxItem key={item} value={item}>
-              {item}
-            </ComboboxItem>
-          )}
-        </ComboboxList>
-      </ComboboxContent>
-    </Combobox>
+    </div>
   ),
 };
diff --git a/packages/react/src/components/ui/context-menu/context-menu.module.css b/packages/react/src/components/ui/context-menu/context-menu.module.css
index 66c149a3..96ca7c6d 100644
--- a/packages/react/src/components/ui/context-menu/context-menu.module.css
+++ b/packages/react/src/components/ui/context-menu/context-menu.module.css
@@ -2,6 +2,12 @@
   user-select: none;
 }
 
+/* Same focus outline as Button. */
+.trigger:focus-visible {
+  outline: 2px solid var(--primary-strong);
+  outline-offset: 2px;
+}
+
 .positioner {
   isolation: isolate;
   z-index: 50;
diff --git a/packages/react/src/components/ui/context-menu/context-menu.stories.tsx b/packages/react/src/components/ui/context-menu/context-menu.stories.tsx
index c603e32a..79d6c34c 100644
--- a/packages/react/src/components/ui/context-menu/context-menu.stories.tsx
+++ b/packages/react/src/components/ui/context-menu/context-menu.stories.tsx
@@ -11,7 +11,6 @@ import {
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
   ContextMenuSeparator,
-  ContextMenuShortcut,
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
@@ -20,8 +19,6 @@ import {
 
 const meta = {
   title: 'Components/ContextMenu',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-gap'],
   component: ContextMenu,
   parameters: {
     docs: {
@@ -47,14 +44,13 @@ const triggerAreaClassName =
 export const Default: Story = {
   render: () => (
     <ContextMenu>
-      <ContextMenuTrigger className={triggerAreaClassName}>Right click here</ContextMenuTrigger>
+      <ContextMenuTrigger className={triggerAreaClassName}>
+        Right-click here, or focus and press Shift+F10
+      </ContextMenuTrigger>
       <ContextMenuContent className="w-48">
         <ContextMenuGroup>
           <ContextMenuLabel>My account</ContextMenuLabel>
-          <ContextMenuItem>
-            Profile
-            <ContextMenuShortcut>⇧⌘P</ContextMenuShortcut>
-          </ContextMenuItem>
+          <ContextMenuItem>Profile</ContextMenuItem>
           <ContextMenuItem>Settings</ContextMenuItem>
         </ContextMenuGroup>
         <ContextMenuSeparator />
@@ -68,7 +64,9 @@ export const Default: Story = {
 export const WithCheckboxItems: Story = {
   render: () => (
     <ContextMenu>
-      <ContextMenuTrigger className={triggerAreaClassName}>Right click here</ContextMenuTrigger>
+      <ContextMenuTrigger className={triggerAreaClassName}>
+        Right-click here, or focus and press Shift+F10
+      </ContextMenuTrigger>
       <ContextMenuContent className="w-44">
         <ContextMenuGroup>
           <ContextMenuLabel>Toggle columns</ContextMenuLabel>
@@ -85,7 +83,9 @@ export const WithCheckboxItems: Story = {
 export const WithRadioItems: Story = {
   render: () => (
     <ContextMenu>
-      <ContextMenuTrigger className={triggerAreaClassName}>Right click here</ContextMenuTrigger>
+      <ContextMenuTrigger className={triggerAreaClassName}>
+        Right-click here, or focus and press Shift+F10
+      </ContextMenuTrigger>
       <ContextMenuContent className="w-44">
         <ContextMenuRadioGroup defaultValue="list">
           <ContextMenuLabel>View</ContextMenuLabel>
@@ -102,7 +102,9 @@ export const WithRadioItems: Story = {
 export const WithSubmenu: Story = {
   render: () => (
     <ContextMenu>
-      <ContextMenuTrigger className={triggerAreaClassName}>Right click here</ContextMenuTrigger>
+      <ContextMenuTrigger className={triggerAreaClassName}>
+        Right-click here, or focus and press Shift+F10
+      </ContextMenuTrigger>
       <ContextMenuContent className="w-48">
         <ContextMenuItem>Back</ContextMenuItem>
         <ContextMenuItem>Forward</ContextMenuItem>
diff --git a/packages/react/src/components/ui/context-menu/context-menu.tsx b/packages/react/src/components/ui/context-menu/context-menu.tsx
index f2ea4b7b..96a7b753 100644
--- a/packages/react/src/components/ui/context-menu/context-menu.tsx
+++ b/packages/react/src/components/ui/context-menu/context-menu.tsx
@@ -17,11 +17,44 @@ function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {
   return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
 }
 
-function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {
+/** Shift+F10 or the Menu key: the keyboard way to open a context menu. */
+function isContextMenuKey(event: React.KeyboardEvent) {
+  return event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10');
+}
+
+/**
+ * Focusable by default (`tabIndex={0}`) so keyboard users can open the menu with Shift+F10
+ * or the Menu key (WCAG 2.1.1). Offer the same actions somewhere visible as well.
+ */
+function ContextMenuTrigger({
+  className,
+  tabIndex = 0,
+  onKeyDown,
+  ...props
+}: ContextMenuPrimitive.Trigger.Props) {
+  const handleKeyDown: ContextMenuPrimitive.Trigger.Props['onKeyDown'] = (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || !isContextMenuKey(event)) return;
+    // Not every browser fires `contextmenu` for these keys, so fire it ourselves,
+    // positioned at the bottom-left corner of the trigger.
+    event.preventDefault();
+    const rect = event.currentTarget.getBoundingClientRect();
+    event.currentTarget.dispatchEvent(
+      new MouseEvent('contextmenu', {
+        bubbles: true,
+        cancelable: true,
+        clientX: rect.left,
+        clientY: rect.bottom,
+      }),
+    );
+  };
+
   return (
     <ContextMenuPrimitive.Trigger
       data-slot="context-menu-trigger"
       className={cn(styles.trigger, className)}
+      tabIndex={tabIndex}
+      onKeyDown={handleKeyDown}
       {...props}
     />
   );
@@ -198,6 +231,7 @@ function ContextMenuSeparator({ className, ...props }: ContextMenuPrimitive.Sepa
   );
 }
 
+/** Only show a shortcut that really works, and set `aria-keyshortcuts` on its item. */
 function ContextMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span data-slot="context-menu-shortcut" className={cn(styles.shortcut, className)} {...props} />
diff --git a/packages/react/src/components/ui/date-picker/date-picker.stories.tsx b/packages/react/src/components/ui/date-picker/date-picker.stories.tsx
index 40612740..265fa962 100644
--- a/packages/react/src/components/ui/date-picker/date-picker.stories.tsx
+++ b/packages/react/src/components/ui/date-picker/date-picker.stories.tsx
@@ -9,8 +9,6 @@ import { DatePickerInput } from './date-picker-input';
 
 const meta = {
   title: 'Components/DatePicker',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-minor'],
   component: DatePicker,
   parameters: {
     docs: {
diff --git a/packages/react/src/components/ui/input-otp/input-otp.stories.tsx b/packages/react/src/components/ui/input-otp/input-otp.stories.tsx
index 02bf9404..abe3a069 100644
--- a/packages/react/src/components/ui/input-otp/input-otp.stories.tsx
+++ b/packages/react/src/components/ui/input-otp/input-otp.stories.tsx
@@ -10,8 +10,6 @@ import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './inpu
 
 const meta = {
   title: 'Components/InputOTP',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-gap'],
   component: InputOTP,
   parameters: {
     docs: {
diff --git a/packages/react/src/components/ui/sonner/sonner.stories.tsx b/packages/react/src/components/ui/sonner/sonner.stories.tsx
index d12e65ae..857cb8a6 100644
--- a/packages/react/src/components/ui/sonner/sonner.stories.tsx
+++ b/packages/react/src/components/ui/sonner/sonner.stories.tsx
@@ -8,8 +8,6 @@ import { Toaster } from './sonner';
 
 const meta = {
   title: 'Components/Sonner',
-  // Unverified: shadcn/ui WCAG 2.2 AA audit (thefrontkit, 2026).
-  tags: ['a11y-minor'],
   component: Toaster,
   parameters: {
     docs: {
@@ -51,7 +49,7 @@ const meta = {
   args: {
     position: 'bottom-right',
     richColors: false,
-    closeButton: false,
+    closeButton: true,
     expand: false,
   },
 } satisfies Meta<typeof Toaster>;
diff --git a/packages/react/src/components/ui/sonner/sonner.tsx b/packages/react/src/components/ui/sonner/sonner.tsx
index 96ee0fc5..05cf8213 100644
--- a/packages/react/src/components/ui/sonner/sonner.tsx
+++ b/packages/react/src/components/ui/sonner/sonner.tsx
@@ -12,13 +12,19 @@ import { Toaster as Sonner, type ToasterProps } from 'sonner';
 
 import styles from './sonner.module.css';
 
-const Toaster = ({ ...props }: ToasterProps) => {
+/**
+ * Defaults follow WCAG 2.2.1 (Timing Adjustable): toasts stay 8 seconds and always have a
+ * close button. Use `duration: Infinity` for messages the user must act on.
+ */
+const Toaster = ({ duration = 8000, closeButton = true, ...props }: ToasterProps) => {
   const { theme = 'system' } = useTheme();
 
   return (
     <Sonner
       theme={theme as ToasterProps['theme']}
       className={styles.toaster}
+      duration={duration}
+      closeButton={closeButton}
       icons={{
         success: <CheckCircleIcon className={styles.icon} />,
         info: <InfoIcon className={styles.icon} />,
diff --git a/tests/visual/__screenshots__/angular/components-combobox--default-dark.png b/tests/visual/__screenshots__/angular/components-combobox--default-dark.png
index 88816000..fd0fe453 100644
Binary files a/tests/visual/__screenshots__/angular/components-combobox--default-dark.png and b/tests/visual/__screenshots__/angular/components-combobox--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--default-light.png b/tests/visual/__screenshots__/angular/components-combobox--default-light.png
index b29c8990..2f03210c 100644
Binary files a/tests/visual/__screenshots__/angular/components-combobox--default-light.png and b/tests/visual/__screenshots__/angular/components-combobox--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--disabled-dark.png b/tests/visual/__screenshots__/angular/components-combobox--disabled-dark.png
index 0e27bd87..bb66d6f0 100644
Binary files a/tests/visual/__screenshots__/angular/components-combobox--disabled-dark.png and b/tests/visual/__screenshots__/angular/components-combobox--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--disabled-light.png b/tests/visual/__screenshots__/angular/components-combobox--disabled-light.png
index e32b0ce7..d063edaa 100644
Binary files a/tests/visual/__screenshots__/angular/components-combobox--disabled-light.png and b/tests/visual/__screenshots__/angular/components-combobox--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--grouped-dark.png b/tests/visual/__screenshots__/angular/components-combobox--grouped-dark.png
index c0adc049..f76c1f19 100644
Binary files a/tests/visual/__screenshots__/angular/components-combobox--grouped-dark.png and b/tests/visual/__screenshots__/angular/components-combobox--grouped-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--grouped-light.png b/tests/visual/__screenshots__/angular/components-combobox--grouped-light.png
index 6eca3253..a0b4a7d6 100644
Binary files a/tests/visual/__screenshots__/angular/components-combobox--grouped-light.png and b/tests/visual/__screenshots__/angular/components-combobox--grouped-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--multiple-dark.png b/tests/visual/__screenshots__/angular/components-combobox--multiple-dark.png
index 788b690e..792d8a85 100644
Binary files a/tests/visual/__screenshots__/angular/components-combobox--multiple-dark.png and b/tests/visual/__screenshots__/angular/components-combobox--multiple-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-combobox--multiple-light.png b/tests/visual/__screenshots__/angular/components-combobox--multiple-light.png
index beae9e04..f4b7daca 100644
Binary files a/tests/visual/__screenshots__/angular/components-combobox--multiple-light.png and b/tests/visual/__screenshots__/angular/components-combobox--multiple-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--default-dark.png b/tests/visual/__screenshots__/angular/components-contextmenu--default-dark.png
index 5a4f543b..e94b0d5a 100644
Binary files a/tests/visual/__screenshots__/angular/components-contextmenu--default-dark.png and b/tests/visual/__screenshots__/angular/components-contextmenu--default-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--default-light.png b/tests/visual/__screenshots__/angular/components-contextmenu--default-light.png
index ed89900e..d0477268 100644
Binary files a/tests/visual/__screenshots__/angular/components-contextmenu--default-light.png and b/tests/visual/__screenshots__/angular/components-contextmenu--default-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-dark.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-dark.png
index 5a4f543b..e94b0d5a 100644
Binary files a/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-dark.png and b/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-light.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-light.png
index ed89900e..d0477268 100644
Binary files a/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-light.png and b/tests/visual/__screenshots__/angular/components-contextmenu--with-checkbox-items-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-dark.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-dark.png
index 5a4f543b..e94b0d5a 100644
Binary files a/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-dark.png and b/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-light.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-light.png
index ed89900e..d0477268 100644
Binary files a/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-light.png and b/tests/visual/__screenshots__/angular/components-contextmenu--with-radio-items-light.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-dark.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-dark.png
index 5a4f543b..e94b0d5a 100644
Binary files a/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-dark.png and b/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-dark.png differ
diff --git a/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-light.png b/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-light.png
index ed89900e..d0477268 100644
Binary files a/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-light.png and b/tests/visual/__screenshots__/angular/components-contextmenu--with-submenu-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--default-dark.png b/tests/visual/__screenshots__/react/components-combobox--default-dark.png
index 7911100f..5f0dd85e 100644
Binary files a/tests/visual/__screenshots__/react/components-combobox--default-dark.png and b/tests/visual/__screenshots__/react/components-combobox--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--default-light.png b/tests/visual/__screenshots__/react/components-combobox--default-light.png
index 1d282746..27a785dc 100644
Binary files a/tests/visual/__screenshots__/react/components-combobox--default-light.png and b/tests/visual/__screenshots__/react/components-combobox--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--disabled-dark.png b/tests/visual/__screenshots__/react/components-combobox--disabled-dark.png
index 5ba688b9..11addde5 100644
Binary files a/tests/visual/__screenshots__/react/components-combobox--disabled-dark.png and b/tests/visual/__screenshots__/react/components-combobox--disabled-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--disabled-light.png b/tests/visual/__screenshots__/react/components-combobox--disabled-light.png
index a644dd81..ae1ebbaa 100644
Binary files a/tests/visual/__screenshots__/react/components-combobox--disabled-light.png and b/tests/visual/__screenshots__/react/components-combobox--disabled-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--grouped-dark.png b/tests/visual/__screenshots__/react/components-combobox--grouped-dark.png
index ed9f110c..015ca081 100644
Binary files a/tests/visual/__screenshots__/react/components-combobox--grouped-dark.png and b/tests/visual/__screenshots__/react/components-combobox--grouped-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--grouped-light.png b/tests/visual/__screenshots__/react/components-combobox--grouped-light.png
index 8a9ff929..3d5355f0 100644
Binary files a/tests/visual/__screenshots__/react/components-combobox--grouped-light.png and b/tests/visual/__screenshots__/react/components-combobox--grouped-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--multiple-dark.png b/tests/visual/__screenshots__/react/components-combobox--multiple-dark.png
index 9b630875..9e621c78 100644
Binary files a/tests/visual/__screenshots__/react/components-combobox--multiple-dark.png and b/tests/visual/__screenshots__/react/components-combobox--multiple-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-combobox--multiple-light.png b/tests/visual/__screenshots__/react/components-combobox--multiple-light.png
index 45a79ca9..cbbe8eff 100644
Binary files a/tests/visual/__screenshots__/react/components-combobox--multiple-light.png and b/tests/visual/__screenshots__/react/components-combobox--multiple-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--default-dark.png b/tests/visual/__screenshots__/react/components-contextmenu--default-dark.png
index 5a4f543b..e94b0d5a 100644
Binary files a/tests/visual/__screenshots__/react/components-contextmenu--default-dark.png and b/tests/visual/__screenshots__/react/components-contextmenu--default-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--default-light.png b/tests/visual/__screenshots__/react/components-contextmenu--default-light.png
index ed89900e..d0477268 100644
Binary files a/tests/visual/__screenshots__/react/components-contextmenu--default-light.png and b/tests/visual/__screenshots__/react/components-contextmenu--default-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-dark.png b/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-dark.png
index 5a4f543b..e94b0d5a 100644
Binary files a/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-dark.png and b/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-light.png b/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-light.png
index ed89900e..d0477268 100644
Binary files a/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-light.png and b/tests/visual/__screenshots__/react/components-contextmenu--with-checkbox-items-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-dark.png b/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-dark.png
index 5a4f543b..e94b0d5a 100644
Binary files a/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-dark.png and b/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-light.png b/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-light.png
index ed89900e..d0477268 100644
Binary files a/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-light.png and b/tests/visual/__screenshots__/react/components-contextmenu--with-radio-items-light.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-dark.png b/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-dark.png
index 5a4f543b..e94b0d5a 100644
Binary files a/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-dark.png and b/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-dark.png differ
diff --git a/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-light.png b/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-light.png
index ed89900e..d0477268 100644
Binary files a/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-light.png and b/tests/visual/__screenshots__/react/components-contextmenu--with-submenu-light.png differ