@webjsdev/ui 0.3.4 → 0.3.6

package/README.md

@@ -30,14 +30,32 @@ is configured, the components render correctly. Variant names, sizes, and
 data-attribute conventions mirror shadcn's so an AI agent's existing
 knowledge of shadcn maps directly.
 
-Tier-2 elements extend `WebComponent` from `@webjsdev/core`, a tiny
-Lit-shaped base class with `static properties` for reactive attributes,
+Tier-2 elements extend the `WebComponent({ ... })` factory from
+`@webjsdev/core`, a tiny Lit-shaped base class whose factory shape declares
+reactive attributes,
 `render()` returning an `` html`...` `` template, and declarative
 bindings (`@click`, `?attr`, `attr=`). Light DOM throughout, so Tailwind
 utility classes on authored children apply directly. The `webjsui add`
 CLI installs `@webjsdev/core` automatically when you add a Tier-2
 component.
 
+## Accessibility
+
+Tier-2 elements are accessible out of the box: they wire their own WAI-ARIA
+pattern, so you do not hand-add ARIA. Tabs cross-links triggers and panels and
+reports orientation, toggle-group uses roving tabindex with Arrow / Home / End,
+dropdown-menu declares orientation and reflects `aria-disabled`, dialog and
+alert-dialog name themselves from their title and description, tooltip wires
+`aria-describedby`, hover-card exposes `aria-haspopup` / `aria-expanded`, and
+sonner is a live region.
+
+Tier-1 class helpers return only classes, so the semantic element and ARIA are
+yours to supply. Each one's JSDoc carries an `A11y (required for accessible
+output)` block stating exactly what to add: a name on an icon-only button, a
+role on an alert, `scope` on table headers, `alt` on an avatar image, a
+labelled `<nav>` with `aria-current="page"` on pagination and breadcrumb, and
+so on. Follow that block and the markup is fully accessible.
+
 ## Install
 
 ### Option A : Webjs users (already have `@webjsdev/cli`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/ui",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "type": "module",
   "description": "An AI-first component library - class-helper functions for visuals, custom elements only where state matters. Source-copied into your repo, you own it. Works with any Tailwind v4 project.",
   "bin": {

package/packages/registry/components/alert-dialog.ts

@@ -32,8 +32,8 @@
  *     </ui-alert-dialog-trigger>
  *     <ui-alert-dialog-content>
  *       <div class=${alertDialogHeaderClass()}>
- *         <h2 class=${alertDialogTitleClass()}>Delete account?</h2>
- *         <p class=${alertDialogDescriptionClass()}>This cannot be undone.</p>
+ *         <h2 data-slot="alert-dialog-title" class=${alertDialogTitleClass()}>Delete account?</h2>
+ *         <p data-slot="alert-dialog-description" class=${alertDialogDescriptionClass()}>This cannot be undone.</p>
  *       </div>
  *       <div class=${alertDialogFooterClass()}>
  *         <ui-alert-dialog-cancel>Cancel</ui-alert-dialog-cancel>
@@ -63,7 +63,9 @@
  *
  * Design tokens used: --background, --border, --muted-foreground.
  */
-import { WebComponent, html } from '@webjsdev/core';
+import { WebComponent, html, prop } from '@webjsdev/core';
+import { ref, createRef } from '@webjsdev/core/directives';
+import { ensureId } from '../lib/utils.ts';
 import { buttonClass, type ButtonVariant, type ButtonSize } from './button.ts';
 
 export const alertDialogContentClass = (): string =>
@@ -130,12 +132,9 @@ function unlockScroll(): void {
 // content child via prop transitions.
 // --------------------------------------------------------------------------
 
-export class UiAlertDialog extends WebComponent {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-  };
-  declare open: boolean;
-
+export class UiAlertDialog extends WebComponent({
+  open: prop(Boolean, { reflect: true }),
+}) {
   constructor() {
     super();
     this.open = false;
@@ -222,11 +221,13 @@ UiAlertDialogTrigger.register('ui-alert-dialog-trigger');
 // explicit choice via Cancel / Action).
 // --------------------------------------------------------------------------
 
-export class UiAlertDialogContent extends WebComponent {
-  static properties = {
-    size: { type: String, reflect: true },
-  };
-  declare size: 'default' | 'sm';
+export class UiAlertDialogContent extends WebComponent({
+  size: prop<'default' | 'sm'>(String, { reflect: true }),
+}) {
+  // ref to the own-rendered native <dialog>. render() creates it, so a
+  // ref() binding is the lit-idiomatic handle (no querySelector against
+  // a string selector into the component's own output).
+  #dialog = createRef<HTMLDialogElement>();
 
   constructor() {
     super();
@@ -234,12 +235,35 @@ export class UiAlertDialogContent extends WebComponent {
   }
 
   showModal(): void {
-    const native = this.querySelector<HTMLDialogElement>('dialog[data-slot="alert-dialog-native"]');
+    this._wireLabels();
+    const native = this.#dialog.value;
     if (native && !native.open) native.showModal();
   }
 
+  // Wire the alertdialog's accessible name + description to its title /
+  // description nodes at open time (an alert dialog only ever appears via
+  // showModal(), so there is no SSR id-stability concern). The title is
+  // data-slot="alert-dialog-title" (falling back to the first heading); the
+  // description is data-slot="alert-dialog-description" (falling back to the
+  // first paragraph). Author-set ARIA always wins. Inlined rather than shared
+  // with dialog.ts so `webjs ui add alert-dialog` stays self-contained.
+  _wireLabels(): void {
+    const panel = this.querySelector('[data-slot="alert-dialog-content"]');
+    if (!panel) return;
+    const title =
+      this.querySelector('[data-slot="alert-dialog-title"]') ?? this.querySelector('h1, h2, h3');
+    const desc =
+      this.querySelector('[data-slot="alert-dialog-description"]') ?? this.querySelector('p');
+    if (title && !panel.hasAttribute('aria-labelledby')) {
+      panel.setAttribute('aria-labelledby', ensureId(title as HTMLElement, 'ui-alert-title'));
+    }
+    if (desc && !panel.hasAttribute('aria-describedby')) {
+      panel.setAttribute('aria-describedby', ensureId(desc as HTMLElement, 'ui-alert-desc'));
+    }
+  }
+
   close(): void {
-    const native = this.querySelector<HTMLDialogElement>('dialog[data-slot="alert-dialog-native"]');
+    const native = this.#dialog.value;
     if (native?.open) native.close();
   }
 
@@ -248,6 +272,7 @@ export class UiAlertDialogContent extends WebComponent {
     return html`<dialog
       data-slot="alert-dialog-native"
       class=${NATIVE_DIALOG_CLASS}
+      ${ref(this.#dialog)}
       @cancel=${this._onNativeCancel}
       @close=${this._onNativeClose}
     ><div
@@ -304,14 +329,10 @@ UiAlertDialogContent.register('ui-alert-dialog-content');
 
 const ALERT_DIALOG_ACTION_GRID_STRETCH = 'group-data-[size=sm]/alert-dialog-content:w-full';
 
-export class UiAlertDialogCancel extends WebComponent {
-  static properties = {
-    variant: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-  };
-  declare variant: ButtonVariant;
-  declare size: ButtonSize;
-
+export class UiAlertDialogCancel extends WebComponent({
+  variant: prop<ButtonVariant>(String, { reflect: true }),
+  size: prop<ButtonSize>(String, { reflect: true }),
+}) {
   constructor() {
     super();
     this.variant = 'outline';
@@ -331,14 +352,10 @@ export class UiAlertDialogCancel extends WebComponent {
 }
 UiAlertDialogCancel.register('ui-alert-dialog-cancel');
 
-export class UiAlertDialogAction extends WebComponent {
-  static properties = {
-    variant: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-  };
-  declare variant: ButtonVariant;
-  declare size: ButtonSize;
-
+export class UiAlertDialogAction extends WebComponent({
+  variant: prop<ButtonVariant>(String, { reflect: true }),
+  size: prop<ButtonSize>(String, { reflect: true }),
+}) {
   constructor() {
     super();
     this.variant = 'default';

package/packages/registry/components/alert.ts

@@ -25,6 +25,11 @@
  *     </div>
  *   </div>
  *
+ * A11y (required for accessible output): put role="alert" on the container
+ * for an urgent, interrupting message, or role="status" for a polite,
+ * non-urgent update. The class helper sets no role, so without one the
+ * banner is silent to assistive tech.
+ *
  * Design tokens used: --card, --card-foreground, --destructive, --muted-foreground.
  */
 import { cn } from '../lib/utils.ts';

package/packages/registry/components/avatar.ts

@@ -23,6 +23,11 @@
  *     <div class=${avatarGroupCountClass()}>+3</div>
  *   </div>
  *
+ * A11y (required for accessible output): the <img> MUST have an alt that
+ * names the person (alt="Vivek Khandelwal"), or alt="" when a visible text
+ * fallback already names them. Always provide the fallback <span> so the
+ * avatar is still named if the image fails to load.
+ *
  * Design tokens used: --muted, --muted-foreground, --primary, --background.
  */
 import { cn } from '../lib/utils.ts';

package/packages/registry/components/badge.ts

@@ -14,6 +14,10 @@
  * The `[a&]:hover:...` hover styles only apply when the element is an `<a>`,
  * so a static `<span>` doesn't pick up an unwanted hover.
  *
+ * A11y (required for accessible output): render a static badge as a plain
+ * <span> (not focusable, no tabindex). Only an interactive badge (an <a>
+ * or <button>) is focusable, and an icon-only one needs an aria-label.
+ *
  * Design tokens used: --primary, --secondary, --destructive, --foreground,
  * --accent, --border, --ring.
  */

package/packages/registry/components/breadcrumb.ts

@@ -26,6 +26,11 @@
  *     </ol>
  *   </nav>
  *
+ * A11y (required for accessible output): wrap the list in <nav
+ * aria-label="breadcrumb">, set aria-current="page" on the current-page
+ * element, and mark each separator role="presentation" aria-hidden="true".
+ * The class helpers emit none of these.
+ *
  * Design tokens used: --muted-foreground, --foreground.
  */
 

package/packages/registry/components/button.ts

@@ -17,6 +17,12 @@
  * shadcn React's `asChild` (Slot) prop has no equivalent here: just call
  * `buttonClass(...)` and spread the classes onto whatever element you want.
  *
+ * A11y (required for accessible output): an icon-only button (the `icon`,
+ * `icon-xs`, `icon-sm`, `icon-lg` sizes) has no visible text, so it MUST
+ * carry an accessible name via aria-label (or aria-labelledby). A button
+ * that opens an overlay should also set aria-haspopup and aria-expanded.
+ * Native <button> focus and keyboard activation are already correct.
+ *
  * Design tokens used: --primary, --primary-foreground, --destructive,
  * --secondary, --secondary-foreground, --accent, --accent-foreground,
  * --background, --input, --ring.

package/packages/registry/components/dialog.ts

@@ -29,8 +29,8 @@
  *     </ui-dialog-trigger>
  *     <ui-dialog-content>
  *       <div class=${dialogHeaderClass()}>
- *         <h2 class=${dialogTitleClass()}>Edit profile</h2>
- *         <p class=${dialogDescriptionClass()}>Make changes and click save.</p>
+ *         <h2 data-slot="dialog-title" class=${dialogTitleClass()}>Edit profile</h2>
+ *         <p data-slot="dialog-description" class=${dialogDescriptionClass()}>Make changes and click save.</p>
  *       </div>
  *       <div class="grid gap-3">
  *         <label class=${labelClass()} for="dlg-name">Name</label>
@@ -63,9 +63,33 @@
  *
  * Design tokens used: --background, --border, --muted-foreground.
  */
-import { WebComponent, html, unsafeHTML } from '@webjsdev/core';
+import { WebComponent, html, unsafeHTML, prop } from '@webjsdev/core';
+import { ref, createRef } from '@webjsdev/core/directives';
+import { ensureId } from '../lib/utils.ts';
 import { buttonClass } from './button.ts';
 
+// Wires a dialog panel's accessible name + description to its title /
+// description nodes. A dialog only ever appears via showModal() (JS), so
+// resolving the relationship at open time is correct and avoids any
+// SSR id-stability concern. The title is the element marked
+// data-slot="dialog-title" (falling back to the first heading); the
+// description is data-slot="dialog-description" (falling back to the first
+// paragraph). Author-set aria-labelledby / aria-describedby always win.
+export function wireDialogLabels(host: Element, panelSelector: string): void {
+  const panel = host.querySelector(panelSelector);
+  if (!panel) return;
+  const title =
+    host.querySelector('[data-slot="dialog-title"]') ?? host.querySelector('h1, h2, h3');
+  const desc =
+    host.querySelector('[data-slot="dialog-description"]') ?? host.querySelector('p');
+  if (title && !panel.hasAttribute('aria-labelledby')) {
+    panel.setAttribute('aria-labelledby', ensureId(title as HTMLElement, 'ui-dialog-title'));
+  }
+  if (desc && !panel.hasAttribute('aria-describedby')) {
+    panel.setAttribute('aria-describedby', ensureId(desc as HTMLElement, 'ui-dialog-desc'));
+  }
+}
+
 // --------------------------------------------------------------------------
 // Class helpers for subparts.
 // --------------------------------------------------------------------------
@@ -156,12 +180,9 @@ function unlockScroll(): void {
 // to showModal() / close() its inner <dialog>.
 // --------------------------------------------------------------------------
 
-export class UiDialog extends WebComponent {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-  };
-  declare open: boolean;
-
+export class UiDialog extends WebComponent({
+  open: prop(Boolean, { reflect: true }),
+}) {
   constructor() {
     super();
     this.open = false;
@@ -256,11 +277,13 @@ UiDialogTrigger.register('ui-dialog-trigger');
 // close button. Exposes showModal() / close() so the parent <ui-dialog>
 // can drive the open state imperatively without a named slot.
 
-export class UiDialogContent extends WebComponent {
-  static properties = {
-    showCloseButton: { type: String, reflect: true, attribute: 'show-close-button' },
-  };
-  declare showCloseButton: string;
+export class UiDialogContent extends WebComponent({
+  showCloseButton: prop(String, { reflect: true, attribute: 'show-close-button' }),
+}) {
+  // ref to the own-rendered native <dialog>. render() creates it, so a
+  // ref() binding is the lit-idiomatic handle (no querySelector against
+  // a string selector into the component's own output).
+  #dialog = createRef<HTMLDialogElement>();
 
   constructor() {
     super();
@@ -268,12 +291,13 @@ export class UiDialogContent extends WebComponent {
   }
 
   showModal(): void {
-    const native = this.querySelector<HTMLDialogElement>('dialog[data-slot="dialog-native"]');
+    wireDialogLabels(this, '[data-slot="dialog-content"]');
+    const native = this.#dialog.value;
     if (native && !native.open) native.showModal();
   }
 
   close(): void {
-    const native = this.querySelector<HTMLDialogElement>('dialog[data-slot="dialog-native"]');
+    const native = this.#dialog.value;
     if (native?.open) native.close();
   }
 
@@ -283,6 +307,7 @@ export class UiDialogContent extends WebComponent {
     return html`<dialog
       data-slot="dialog-native"
       class=${NATIVE_DIALOG_CLASS}
+      ${ref(this.#dialog)}
       @close=${this._onNativeClose}
       @click=${this._onNativeBackdropClick}
     ><div
@@ -352,12 +377,9 @@ UiDialogClose.register('ui-dialog-close');
 // <ui-dialog-footer>
 // --------------------------------------------------------------------------
 
-export class UiDialogFooter extends WebComponent {
-  static properties = {
-    showCloseButton: { type: String, attribute: 'show-close-button' },
-  };
-  declare showCloseButton: string | null;
-
+export class UiDialogFooter extends WebComponent({
+  showCloseButton: prop<string | null>(String, { attribute: 'show-close-button' }),
+}) {
   constructor() {
     super();
     this.showCloseButton = null;

package/packages/registry/components/dropdown-menu.ts

@@ -55,6 +55,9 @@
  *   `type`:    omit (default) | "checkbox" | "radio".
  *   `checked`: boolean. Applies to checkbox / radio items.
  *   `value`:   string. Identifier for radio items.
+ *   `data-disabled`: boolean. Skips keyboard focus and activation, dims the
+ *                    item, and sets aria-disabled. Same attribute on a
+ *                    <ui-dropdown-menu-sub-trigger> disables the submenu.
  *
  * Events:
  *   `ui-open-change` on <ui-dropdown-menu>: `{ detail: { open } }` after a transition.
@@ -74,7 +77,8 @@
  * Design tokens used: --popover, --popover-foreground, --accent,
  * --accent-foreground, --destructive, --muted-foreground, --border.
  */
-import { WebComponent, html, unsafeHTML } from '@webjsdev/core';
+import { WebComponent, html, unsafeHTML, signal, prop } from '@webjsdev/core';
+import { ensureId } from '../lib/utils.ts';
 import { positionFloating, type PopoverSide, type PopoverAlign } from './popover.ts';
 
 // --------------------------------------------------------------------------
@@ -116,12 +120,9 @@ const SUB_CLOSE_DELAY = 200;
 // <ui-dropdown-menu>
 // --------------------------------------------------------------------------
 
-export class UiDropdownMenu extends WebComponent {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-  };
-  declare open: boolean;
-
+export class UiDropdownMenu extends WebComponent({
+  open: prop(Boolean, { reflect: true }),
+}) {
   _typeBuffer = '';
   _typeBufferTimer: number | undefined;
 
@@ -156,15 +157,58 @@ export class UiDropdownMenu extends WebComponent {
     queueMicrotask(() => this._afterRender());
   }
 
+  connectedCallback(): void {
+    super.connectedCallback?.();
+    // webjs projects slotted light-DOM children in a pass after the first
+    // render, so the trigger button and the menu are not in place at
+    // connect. Defer to the next frame, when the projection has run.
+    if (typeof requestAnimationFrame === 'function') {
+      requestAnimationFrame(() => this._wireAria());
+    }
+  }
+
   _afterRender(): void {
     const content = this._content();
     if (content) {
       this._syncContentPopover(content);
     }
+    this._wireAria();
     if (this.open) this._setup();
     else this._teardown();
   }
 
+  // The trigger wraps an author-supplied control (usually a <button>). Expose
+  // the menu relationship on that focusable control: aria-haspopup announces
+  // it opens a menu, aria-expanded tracks open state, aria-controls points at
+  // the menu, and the menu is labelled back by the trigger. Done at runtime
+  // because the menu is JS-driven (never shown without script).
+  _triggerControl(): HTMLElement | null {
+    const trigger = this.querySelector('ui-dropdown-menu-trigger');
+    if (!trigger) return null;
+    return (
+      trigger.querySelector<HTMLElement>('button, [role="button"], a[href], [tabindex]') ??
+      (trigger as HTMLElement)
+    );
+  }
+
+  _menuEl(): HTMLElement | null {
+    return this.querySelector('ui-dropdown-menu-content [role="menu"]');
+  }
+
+  _wireAria(): void {
+    const control = this._triggerControl();
+    if (!control) return;
+    control.setAttribute('aria-haspopup', 'menu');
+    control.setAttribute('aria-expanded', String(this.open));
+    const menu = this._menuEl();
+    if (!menu) return;
+    const menuId = ensureId(menu, 'ui-menu');
+    control.setAttribute('aria-controls', menuId);
+    if (!menu.hasAttribute('aria-label') && !menu.hasAttribute('aria-labelledby')) {
+      menu.setAttribute('aria-labelledby', ensureId(control, 'ui-menu-trigger'));
+    }
+  }
+
   _content(): HTMLElement | null {
     return this.querySelector('ui-dropdown-menu-content [popover]');
   }
@@ -329,6 +373,7 @@ export class UiDropdownMenuContent extends WebComponent {
     return html`<div
       data-slot="dropdown-menu-content"
       role="menu"
+      aria-orientation="vertical"
       popover="manual"
       class=${dropdownMenuContentClass()}
     ><slot></slot></div>`;
@@ -340,13 +385,15 @@ UiDropdownMenuContent.register('ui-dropdown-menu-content');
 // <ui-dropdown-menu-item>
 // --------------------------------------------------------------------------
 
-export class UiDropdownMenuItem extends WebComponent {
-  static properties = {
-    variant: { type: String, reflect: true },
-    inset: { type: Boolean },
-  };
-  declare variant: 'default' | 'destructive';
-  declare inset: boolean;
+export class UiDropdownMenuItem extends WebComponent({
+  variant: prop<'default' | 'destructive'>(String, { reflect: true }),
+  inset: Boolean,
+}) {
+  // Keyboard / pointer highlight state for the own-rendered menuitem. A
+  // local signal bound with ?data-highlighted keeps the highlight in the
+  // declarative template instead of an imperative setAttribute on
+  // e.currentTarget (the lit-idiomatic form).
+  #highlighted = signal(false);
 
   constructor() {
     super();
@@ -355,12 +402,20 @@ export class UiDropdownMenuItem extends WebComponent {
   }
 
   render() {
+    // `data-disabled` on the host is the historical disabled marker (focus
+    // skips it, the click / pointer handlers bail on it). Mirror it onto the
+    // inner menuitem as both data-disabled (CSS) and aria-disabled, so the
+    // state also reaches assistive tech.
+    const disabled = typeof this.hasAttribute === 'function' && this.hasAttribute('data-disabled');
     return html`<div
       data-slot="dropdown-menu-item"
       role="menuitem"
       tabindex="-1"
       data-variant=${this.variant}
       ?data-inset=${this.inset}
+      ?data-disabled=${disabled}
+      aria-disabled=${disabled ? 'true' : 'false'}
+      ?data-highlighted=${this.#highlighted.get()}
       class=${dropdownMenuItemClass()}
       @click=${this._onClick}
       @pointerenter=${this._onPointerEnter}
@@ -381,12 +436,12 @@ export class UiDropdownMenuItem extends WebComponent {
     el.focus();
   };
 
-  _onFocus = (e: Event): void => {
-    (e.currentTarget as HTMLElement).setAttribute('data-highlighted', '');
+  _onFocus = (): void => {
+    this.#highlighted.set(true);
   };
 
-  _onBlur = (e: Event): void => {
-    (e.currentTarget as HTMLElement).removeAttribute('data-highlighted');
+  _onBlur = (): void => {
+    this.#highlighted.set(false);
   };
 }
 UiDropdownMenuItem.register('ui-dropdown-menu-item');
@@ -395,10 +450,7 @@ UiDropdownMenuItem.register('ui-dropdown-menu-item');
 // <ui-dropdown-menu-label>
 // --------------------------------------------------------------------------
 
-export class UiDropdownMenuLabel extends WebComponent {
-  static properties = { inset: { type: Boolean } };
-  declare inset: boolean;
-
+export class UiDropdownMenuLabel extends WebComponent({ inset: Boolean }) {
   constructor() {
     super();
     this.inset = false;
@@ -461,12 +513,9 @@ UiDropdownMenuGroup.register('ui-dropdown-menu-group');
 // Submenu: Sub / SubTrigger / SubContent
 // --------------------------------------------------------------------------
 
-export class UiDropdownMenuSub extends WebComponent {
-  static properties = {
-    open: { type: Boolean, reflect: true },
-  };
-  declare open: boolean;
-
+export class UiDropdownMenuSub extends WebComponent({
+  open: prop(Boolean, { reflect: true }),
+}) {
   _closeTimer: number | undefined;
 
   constructor() {
@@ -548,10 +597,7 @@ export class UiDropdownMenuSub extends WebComponent {
 }
 UiDropdownMenuSub.register('ui-dropdown-menu-sub');
 
-export class UiDropdownMenuSubTrigger extends WebComponent {
-  static properties = { inset: { type: Boolean } };
-  declare inset: boolean;
-
+export class UiDropdownMenuSubTrigger extends WebComponent({ inset: Boolean }) {
   constructor() {
     super();
     this.inset = false;
@@ -565,14 +611,17 @@ export class UiDropdownMenuSubTrigger extends WebComponent {
 
   render() {
     const open = !!this._sub()?.open;
+    const disabled = typeof this.hasAttribute === 'function' && this.hasAttribute('data-disabled');
     return html`<div
       data-slot="dropdown-menu-sub-trigger"
       role="menuitem"
       tabindex="-1"
       aria-haspopup="menu"
       aria-expanded=${String(open)}
+      aria-disabled=${disabled ? 'true' : 'false'}
       data-state=${open ? 'open' : 'closed'}
       ?data-inset=${this.inset}
+      ?data-disabled=${disabled}
       class=${dropdownMenuSubTriggerClass()}
       @click=${this._onClick}
       @pointerenter=${this._onPointerEnter}
@@ -599,6 +648,7 @@ export class UiDropdownMenuSubContent extends WebComponent {
     return html`<div
       data-slot="dropdown-menu-sub-content"
       role="menu"
+      aria-orientation="vertical"
       popover="manual"
       class=${dropdownMenuSubContentClass()}
     ><slot></slot></div>`;