@astryxdesign/core 0.7.4-canary.faa934f → 0.7.4

package/src/CommandPalette/CommandPaletteItem.test.tsx

@@ -195,17 +195,6 @@ describe('CommandPaletteItem', () => {
     expect(item).toHaveAttribute('aria-selected', 'true');
   });
 
-  it('paints context-derived highlight when the item is not selected', () => {
-    renderWithContext(
-      <CommandPaletteItem value="test">Item</CommandPaletteItem>,
-      {highlightedIndex: 0},
-    );
-
-    expect(getComputedStyle(screen.getByRole('option')).backgroundColor).toBe(
-      'var(--color-overlay-hover)',
-    );
-  });
-
   it('lets explicit visual state override context-derived state', () => {
     renderWithContext(
       <CommandPaletteItem value="test" isHighlighted={false} isSelected={false}>
@@ -216,7 +205,8 @@ describe('CommandPaletteItem', () => {
 
     const item = screen.getByRole('option');
     expect(item).toHaveAttribute('aria-selected', 'false');
-    expect(getComputedStyle(item).backgroundColor).toBe('rgba(0, 0, 0, 0)');
+    expect(item).not.toHaveAttribute('data-selected');
+    expect(item).not.toHaveAttribute('data-highlighted');
   });
 
   it('protects owned option semantics from native passthrough props', () => {
@@ -354,6 +344,69 @@ describe('CommandPaletteItem', () => {
     expect(item).toHaveStyle({marginBlockStart: '8px'});
   });
 
+  it('reflects selected and disabled state on its theme target', () => {
+    render(
+      <>
+        <CommandPaletteItem value="rest">Rest</CommandPaletteItem>
+        <CommandPaletteItem value="selected" isSelected>
+          Selected
+        </CommandPaletteItem>
+        <CommandPaletteItem value="disabled" isDisabled>
+          Disabled
+        </CommandPaletteItem>
+      </>,
+    );
+
+    const rest = screen.getByRole('option', {name: 'Rest'});
+    expect(rest).not.toHaveAttribute('data-selected');
+    expect(rest).not.toHaveAttribute('data-disabled');
+    expect(screen.getByRole('option', {name: 'Selected'})).toHaveAttribute(
+      'data-selected',
+      'selected',
+    );
+    expect(screen.getByRole('option', {name: 'Disabled'})).toHaveAttribute(
+      'data-disabled',
+      'disabled',
+    );
+  });
+
+  it('reflects context-derived selection on its theme target', () => {
+    renderWithContext(
+      <CommandPaletteItem value="test">Item</CommandPaletteItem>,
+      {value: 'test'},
+    );
+
+    expect(screen.getByRole('option')).toHaveAttribute(
+      'data-selected',
+      'selected',
+    );
+  });
+
+  it('reflects explicit and context-derived highlight on its theme target', () => {
+    renderWithContext(
+      <>
+        <CommandPaletteItem value="test">
+          Context highlighted
+        </CommandPaletteItem>
+        <CommandPaletteItem value="other" isHighlighted>
+          Explicitly highlighted
+        </CommandPaletteItem>
+        <CommandPaletteItem value="rest">Rest</CommandPaletteItem>
+      </>,
+      {highlightedIndex: 0},
+    );
+
+    expect(
+      screen.getByRole('option', {name: 'Context highlighted'}),
+    ).toHaveAttribute('data-highlighted', 'highlighted');
+    expect(
+      screen.getByRole('option', {name: 'Explicitly highlighted'}),
+    ).toHaveAttribute('data-highlighted', 'highlighted');
+    expect(screen.getByRole('option', {name: 'Rest'})).not.toHaveAttribute(
+      'data-highlighted',
+    );
+  });
+
   it('sets data-value attribute', () => {
     render(<CommandPaletteItem value="my-value">Item</CommandPaletteItem>);
     expect(screen.getByRole('option')).toHaveAttribute(

package/src/CommandPalette/CommandPaletteItem.tsx

@@ -88,6 +88,7 @@ export interface CommandPaletteItemProps extends Omit<
   isHighlighted?: boolean;
   /**
    * Whether this item is currently selected (picker mode).
+   * When omitted inside CommandPalette, derived from the palette value.
    * @default false
    */
   isSelected?: boolean;
@@ -202,7 +203,11 @@ export function CommandPaletteItem({
       }
       onMouseEnter={onMouseEnterProp}
       {...mergeProps(
-        themeProps('command-palette-item'),
+        themeProps('command-palette-item', {
+          highlighted: isHighlighted ? 'highlighted' : null,
+          selected: isSelected ? 'selected' : null,
+          disabled: isDisabled ? 'disabled' : null,
+        }),
         stylex.props(
           styles.item,
           !isDisabled && interactionOverlayStyles.backgroundColor,

package/src/CommandPalette/__tests__/CommandPaletteItemAudit.a11y.chromium.spec.ts

@@ -2,7 +2,9 @@
 
 /**
  * @file CommandPaletteItemAudit.a11y.chromium.spec.ts
- * @input Exact-head CommandPaletteItem stories across semantics, states, themes, direction, and viewport sizes
+ * @input Exact-head CommandPaletteItem stories, plus the inline grouped palette in
+ *   the CommandPalette audit matrix, across states, themes, direction, pointers,
+ *   and viewport sizes
  * @output Screenshots and fail-closed sensor receipts for the CommandPaletteItem whole-component audit
  * @position Component-owned Night Watch browser evidence; CI runs it only for a CommandPaletteItem audit pull request
  */
@@ -11,7 +13,13 @@ import {createHash} from 'node:crypto';
 import {execFileSync} from 'node:child_process';
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import {expect, test, type Page} from '@playwright/test';
+import {
+  expect,
+  test,
+  type CDPSession,
+  type Locator,
+  type Page,
+} from '@playwright/test';
 import {holdMotionStill} from '@astryxdesign/a11y-spec/chromium';
 import {
   DEFAULT_STORYBOOK_DIR,
@@ -26,8 +34,17 @@ const NARROW = {width: 320, height: 720};
 type Mode = 'light' | 'dark';
 type Direction = 'ltr' | 'rtl';
 type Theme = 'neutral' | 'butter';
-type Story = 'states' | 'combined-and-long';
-type State = 'rest' | 'hover';
+type Pointer = 'fine' | 'coarse';
+type Story = 'states' | 'combined-and-long' | 'palette';
+type State =
+  | 'rest'
+  | 'hover'
+  | 'pressed'
+  | 'pressed-highlighted'
+  | 'disabled-hover'
+  | 'touch-press'
+  | 'keyboard-highlight'
+  | 'keyboard-selected-highlight';
 
 type AuditCase = {
   key: string;
@@ -36,6 +53,8 @@ type AuditCase = {
   direction: Direction;
   theme: Theme;
   state: State;
+  pointer: Pointer;
+  forcedColors: boolean;
   viewport: {width: number; height: number};
 };
 
@@ -57,6 +76,8 @@ function addPair(
       direction: options.direction ?? 'ltr',
       theme: options.theme ?? 'neutral',
       state: options.state ?? 'rest',
+      pointer: options.pointer ?? 'fine',
+      forcedColors: options.forcedColors ?? false,
       viewport: options.viewport ?? WIDE,
     });
   }
@@ -64,9 +85,19 @@ function addPair(
 
 addPair('states-rest');
 addPair('states-hover', {state: 'hover'});
+addPair('states-pressed', {state: 'pressed'});
+addPair('states-pressed-highlighted', {state: 'pressed-highlighted'});
+addPair('states-disabled-hover', {state: 'disabled-hover'});
 addPair('states-custom-theme', {theme: 'butter'});
 addPair('states-rtl', {direction: 'rtl'});
 addPair('states-narrow', {viewport: NARROW});
+addPair('states-coarse', {viewport: NARROW, pointer: 'coarse'});
+addPair('states-touch-press', {
+  viewport: NARROW,
+  pointer: 'coarse',
+  state: 'touch-press',
+});
+addPair('states-forced-colors', {forcedColors: true});
 addPair('combined-rest', {story: 'combined-and-long'});
 addPair('combined-custom-theme', {
   story: 'combined-and-long',
@@ -76,6 +107,45 @@ addPair('combined-narrow', {
   story: 'combined-and-long',
   viewport: NARROW,
 });
+addPair('palette-keyboard-highlight', {
+  story: 'palette',
+  state: 'keyboard-highlight',
+});
+addPair('palette-keyboard-selected-highlight', {
+  story: 'palette',
+  state: 'keyboard-selected-highlight',
+});
+addPair('palette-keyboard-selected-highlight-custom-theme', {
+  story: 'palette',
+  state: 'keyboard-selected-highlight',
+  theme: 'butter',
+});
+
+addPair('palette-keyboard-highlight-forced-colors', {
+  story: 'palette',
+  state: 'keyboard-highlight',
+  forcedColors: true,
+});
+addPair('palette-keyboard-selected-highlight-forced-colors', {
+  story: 'palette',
+  state: 'keyboard-selected-highlight',
+  forcedColors: true,
+});
+
+/** Option each pointer state acts on, by its accessible text. */
+const POINTER_TARGET: Partial<Record<State, string>> = {
+  hover: 'Open file',
+  pressed: 'Open file',
+  'pressed-highlighted': 'Search files',
+  'disabled-hover': 'Archived command',
+  'touch-press': 'Open file',
+};
+
+/** Option the palette keyboard states move the active descendant to. */
+const KEYBOARD_TARGET: Partial<Record<State, string>> = {
+  'keyboard-highlight': 'Home',
+  'keyboard-selected-highlight': 'Settings',
+};
 
 test.describe.configure({mode: 'serial', retries: 0});
 let server: StaticServer;
@@ -83,7 +153,9 @@ let checkoutSha: string;
 let storybookSha: string;
 
 function storyId(item: AuditCase) {
-  return `core-commandpaletteitem--${item.story}`;
+  return item.story === 'palette'
+    ? 'core-commandpalette--audit-matrix'
+    : `core-commandpaletteitem--${item.story}`;
 }
 
 function storyUrl(item: AuditCase) {
@@ -96,6 +168,38 @@ async function settle(page: Page) {
   await page.waitForTimeout(40);
 }
 
+async function centerOf(locator: Locator) {
+  const box = await locator.boundingBox();
+  if (box == null) {
+    throw new Error('target option has no rendered bounds');
+  }
+  return {x: box.x + box.width / 2, y: box.y + box.height / 2};
+}
+
+async function highlightedName(input: Locator) {
+  return input.evaluate(element => {
+    const id = element.getAttribute('aria-activedescendant');
+    const option = id ? document.getElementById(id) : null;
+    return option?.textContent?.replace(/\s+/g, ' ').trim() ?? null;
+  });
+}
+
+/** PageUp moves the palette to its first result; ArrowDown walks forward. */
+async function highlightFromKeyboard(
+  page: Page,
+  input: Locator,
+  target: string,
+) {
+  await input.focus();
+  await page.keyboard.press('PageUp');
+  for (let step = 0; step < 4; step++) {
+    if ((await highlightedName(input)) === target) {
+      return;
+    }
+    await page.keyboard.press('ArrowDown');
+  }
+}
+
 test.beforeAll(async () => {
   fs.rmSync(OUTPUT, {recursive: true, force: true});
   fs.mkdirSync(OUTPUT, {recursive: true});
@@ -133,6 +237,8 @@ for (const item of cases) {
       viewport: item.viewport,
       colorScheme: item.mode,
       reducedMotion: 'reduce',
+      hasTouch: item.pointer === 'coarse',
+      forcedColors: item.forcedColors ? 'active' : 'none',
     });
     const page = await context.newPage();
     const pageErrors: string[] = [];
@@ -140,13 +246,20 @@ for (const item of cases) {
     await page.goto(storyUrl(item), {waitUntil: 'load'});
     await page.locator('#storybook-root').waitFor();
 
-    const listName =
-      item.story === 'states'
-        ? 'Command item states'
-        : 'Combined and long command item states';
-    const list = page.getByRole('listbox', {name: listName});
+    const isPalette = item.story === 'palette';
+    const subject = isPalette
+      ? page.getByRole('region', {name: 'Grouped command palette'})
+      : page.locator('#storybook-root');
+    const list = isPalette
+      ? subject.getByRole('listbox')
+      : subject.getByRole('listbox', {
+          name:
+            item.story === 'states'
+              ? 'Command item states'
+              : 'Combined and long command item states',
+        });
     const options = list.getByRole('option');
-    const expectedCount = item.story === 'states' ? 4 : 2;
+    const expectedCount = item.story === 'combined-and-long' ? 2 : 4;
     const expectedDisabled = item.story === 'states' ? 1 : 0;
     await expect(list).toBeVisible();
     await expect(options).toHaveCount(expectedCount);
@@ -156,12 +269,51 @@ for (const item of cases) {
     await expect(
       list.locator('[role="option"][aria-disabled="true"]'),
     ).toHaveCount(expectedDisabled);
-    await expect(list.locator('button, a, [tabindex]')).toHaveCount(0);
+    await expect(
+      list.locator('[role="option"] :is(button, a, [tabindex])'),
+    ).toHaveCount(0);
+
+    const pointerTarget = POINTER_TARGET[item.state];
+    const keyboardTarget = KEYBOARD_TARGET[item.state];
+    const target = pointerTarget ?? keyboardTarget ?? null;
+    const targetOption =
+      target == null ? null : options.filter({hasText: target}).first();
+    let cdp: CDPSession | null = null;
 
-    if (item.state === 'hover') {
-      await options.first().hover();
-    }
     await settle(page);
+    if (item.state === 'hover' || item.state === 'disabled-hover') {
+      await targetOption?.hover();
+    } else if (
+      item.state === 'pressed' ||
+      item.state === 'pressed-highlighted'
+    ) {
+      if (targetOption == null) {
+        throw new Error(`${item.key}: no press target`);
+      }
+      await targetOption.hover();
+      await page.mouse.down();
+    } else if (item.state === 'touch-press') {
+      if (targetOption == null) {
+        throw new Error(`${item.key}: no touch target`);
+      }
+      const point = await centerOf(targetOption);
+      cdp = await context.newCDPSession(page);
+      await cdp.send('Input.dispatchTouchEvent', {
+        type: 'touchStart',
+        touchPoints: [{x: point.x, y: point.y, id: 1}],
+      });
+      // The touch press controller believes a stationary press after its
+      // onset delay; hold past it before reading the painted state.
+      await page.waitForTimeout(320);
+    } else if (keyboardTarget != null) {
+      await highlightFromKeyboard(
+        page,
+        subject.getByRole('combobox'),
+        keyboardTarget,
+      );
+    }
+    await page.evaluate(async () => document.fonts.ready);
+    await page.waitForTimeout(40);
 
     const observed = await page.evaluate(() => ({
       theme: document
@@ -173,20 +325,41 @@ for (const item of cases) {
       ).direction,
       viewport: {width: innerWidth, height: innerHeight},
       reducedMotion: matchMedia('(prefers-reduced-motion: reduce)').matches,
+      coarsePointer: matchMedia('(pointer: coarse)').matches,
+      forcedColors: matchMedia('(forced-colors: active)').matches,
       horizontalOverflow: document.documentElement.scrollWidth > innerWidth + 1,
       fonts: document.fonts.status,
     }));
+    const listBackdrop = await list.evaluate(element => {
+      let node: Element | null = element;
+      while (node) {
+        const color = getComputedStyle(node).backgroundColor;
+        if (color !== 'rgba(0, 0, 0, 0)' && color !== 'transparent') {
+          return color;
+        }
+        node = node.parentElement;
+      }
+      return getComputedStyle(document.body).backgroundColor;
+    });
     const optionStates = await options.evaluateAll(nodes =>
       nodes.map(node => {
         const style = getComputedStyle(node);
         const box = node.getBoundingClientRect();
         return {
           name: node.textContent?.replace(/\s+/g, ' ').trim(),
+          id: node.id || null,
           selected: node.getAttribute('aria-selected'),
           disabled: node.getAttribute('aria-disabled'),
+          themeSelected: node.getAttribute('data-selected'),
+          themeDisabled: node.getAttribute('data-disabled'),
+          active: node.matches(':active'),
+          hovered: node.matches(':hover'),
+          press: node.getAttribute('data-astryx-press'),
           backgroundColor: style.backgroundColor,
+          backgroundImage: style.backgroundImage,
           color: style.color,
           opacity: style.opacity,
+          cursor: style.cursor,
           geometry: {
             x: box.x,
             y: box.y,
@@ -196,6 +369,18 @@ for (const item of cases) {
         };
       }),
     );
+    const combobox = isPalette
+      ? await subject.getByRole('combobox').evaluate(element => ({
+          focused: element === document.activeElement,
+          activeDescendant: element.getAttribute('aria-activedescendant'),
+        }))
+      : null;
+
+    const targetState =
+      target == null
+        ? null
+        : (optionStates.find(option => option.name?.startsWith(target)) ??
+          null);
     const semanticsPass =
       optionStates.length === expectedCount &&
       optionStates.filter(option => option.selected === 'true').length === 1 &&
@@ -204,11 +389,48 @@ for (const item of cases) {
       optionStates.every(
         option => option.geometry.width > 0 && option.geometry.height > 0,
       );
+    let statePass = true;
+    if (item.state === 'hover') {
+      statePass = targetState?.hovered === true;
+    } else if (item.state === 'disabled-hover') {
+      statePass =
+        targetState?.hovered === true &&
+        targetState.disabled === 'true' &&
+        targetState.backgroundColor === 'rgba(0, 0, 0, 0)' &&
+        targetState.cursor === 'default';
+    } else if (
+      item.state === 'pressed' ||
+      item.state === 'pressed-highlighted'
+    ) {
+      statePass = targetState?.active === true;
+    } else if (item.state === 'touch-press') {
+      statePass = targetState?.press === 'on';
+    } else if (keyboardTarget != null) {
+      statePass =
+        combobox?.focused === true &&
+        targetState?.id != null &&
+        combobox.activeDescendant === targetState.id &&
+        (item.state === 'keyboard-selected-highlight'
+          ? targetState.selected === 'true'
+          : targetState.selected === 'false');
+    }
+
+    const png = isPalette
+      ? await subject.screenshot({animations: 'disabled'})
+      : await page.screenshot({animations: 'disabled', fullPage: true});
+    if (item.state === 'pressed' || item.state === 'pressed-highlighted') {
+      await page.mouse.up();
+    }
+    if (cdp != null) {
+      await cdp.send('Input.dispatchTouchEvent', {
+        type: 'touchEnd',
+        touchPoints: [],
+      });
+    }
 
-    const png = await page.screenshot({animations: 'disabled', fullPage: true});
     const image = `${item.key}.png`;
     const receipt = {
-      schemaVersion: 1,
+      schemaVersion: 2,
       expected: {
         build: checkoutSha,
         storyId: storyId(item),
@@ -216,6 +438,9 @@ for (const item of cases) {
         direction: item.direction,
         theme: item.theme,
         state: item.state,
+        target,
+        pointer: item.pointer,
+        forcedColors: item.forcedColors,
         viewport: item.viewport,
         optionCount: expectedCount,
         disabledCount: expectedDisabled,
@@ -226,6 +451,8 @@ for (const item of cases) {
         ...observed,
         listRole: await list.getAttribute('role'),
         listName: await list.getAttribute('aria-label'),
+        listBackdrop,
+        combobox,
         optionStates,
         pageErrors,
       },
@@ -235,7 +462,7 @@ for (const item of cases) {
         width: png.readUInt32BE(16),
         height: png.readUInt32BE(20),
       },
-      checks: {semanticsPass},
+      checks: {semanticsPass, statePass},
       passed:
         storybookSha === checkoutSha &&
         pageErrors.length === 0 &&
@@ -245,9 +472,12 @@ for (const item of cases) {
         observed.viewport.width === item.viewport.width &&
         observed.viewport.height === item.viewport.height &&
         observed.reducedMotion &&
+        observed.coarsePointer === (item.pointer === 'coarse') &&
+        observed.forcedColors === item.forcedColors &&
         !observed.horizontalOverflow &&
         observed.fonts === 'loaded' &&
-        semanticsPass,
+        semanticsPass &&
+        statePass,
     };
     fs.writeFileSync(path.join(OUTPUT, image), png);
     fs.writeFileSync(
@@ -270,7 +500,7 @@ test('manifest is complete', async () => {
       ) as AuditReceipt,
   );
   const manifest = {
-    schemaVersion: 1,
+    schemaVersion: 2,
     component: 'core/CommandPaletteItem',
     build: checkoutSha,
     frames: cases.map(item => ({

package/src/DateInput/DateInput.doc.mjs

@@ -79,7 +79,7 @@ export const docs = {
       name: 'isLoading',
       type: 'boolean',
       description:
-        'Whether the input is in a loading state. Disables interaction and shows a spinner.',
+        'Whether the input is in a loading state. The field stays focusable and exposes `aria-busy` with a spinner; typing, picking, and clearing are blocked until loading ends.',
       default: 'false',
     },
     {
@@ -253,6 +253,11 @@ export const docs = {
         description:
           'Show a loading state with changeAction when the date triggers a server-side save.',
       },
+      {
+        guidance: true,
+        description:
+          'On a fine pointer the field follows the WAI-ARIA combobox pattern with a dialog popup, as in the APG date picker combobox: ArrowDown or Alt+ArrowDown opens the calendar, and Escape closes it and returns focus to the field.',
+      },
       {
         guidance: true,
         description:
@@ -301,7 +306,7 @@ export const docs = {
         name: 'Calendar popover',
         required: false,
         description:
-          'A month grid that appears when the icon is clicked or the input is focused.',
+          'A month grid that appears when the icon or the input is clicked, or when ArrowDown is pressed in the input.',
       },
       {
         name: 'Clear button',
@@ -351,6 +356,11 @@ export const docsZh = {
         description:
           'Show a loading state with changeAction when the date triggers a server-side save.',
       },
+      {
+        guidance: true,
+        description:
+          'On a fine pointer the field follows the WAI-ARIA combobox pattern with a dialog popup, as in the APG date picker combobox: ArrowDown or Alt+ArrowDown opens the calendar, and Escape closes it and returns focus to the field.',
+      },
       {
         guidance: false,
         description:
@@ -401,7 +411,8 @@ export const docsZh = {
     {
       name: 'isDisabled',
       type: 'boolean',
-      description: '禁用输入框和日历。输入框仍可聚焦并暴露 `aria-disabled`，但不能输入或打开日历。',
+      description:
+        '禁用输入框和日历。输入框仍可聚焦并暴露 `aria-disabled`，但不能输入或打开日历。',
       default: 'false',
     },
     {
@@ -429,7 +440,8 @@ export const docsZh = {
     {
       name: 'isLoading',
       type: 'boolean',
-      description: '输入框是否处于加载状态。禁用交互并显示加载指示器。',
+      description:
+        '输入框是否处于加载状态。字段仍可聚焦，并通过 `aria-busy` 和加载指示器表示忙碌；加载结束前不能输入、选择或清除日期。',
       default: 'false',
     },
     {
@@ -599,6 +611,11 @@ export const docsDense = {
         description:
           'Show a loading state with changeAction when the date triggers a server-side save.',
       },
+      {
+        guidance: true,
+        description:
+          'On a fine pointer the field follows the WAI-ARIA combobox pattern with a dialog popup, as in the APG date picker combobox: ArrowDown or Alt+ArrowDown opens the calendar, and Escape closes it and returns focus to the field.',
+      },
       {
         guidance: true,
         description:
@@ -638,7 +655,8 @@ export const docsDense = {
     value: 'selected date YYYY-MM-DD',
     onChange: 'callback on date change',
     changeAction: 'async action after onChange; drives optimistic UI',
-    isLoading: 'loading state; disables interaction, shows spinner',
+    isLoading:
+      'loading state; stays focusable w/ aria-busy + spinner; blocks typing, picking, clearing',
     min: 'min selectable date (YYYY-MM-DD)',
     max: 'max selectable date (YYYY-MM-DD)',
     dateConstraints: 'custom constraint fns to disable specific dates',