@astryxdesign/core 0.1.2 → 0.1.3-canary.6d57c8d

package/src/InputGroup/InputGroup.test.tsx

@@ -2,7 +2,7 @@
 
 /**
  * @file InputGroup.test.tsx
- * @input Uses vitest, @testing-library/react, InputGroup and TextInput components
+ * @input Uses vitest, @testing-library/react, InputGroup, TextInput, NumberInput, DateInput components
  * @output Unit tests for InputGroup
  * @position Testing; validates InputGroup component implementation
  *
@@ -14,38 +14,275 @@ import {render, screen} from '@testing-library/react';
 import {InputGroup} from './InputGroup';
 import {InputGroupText} from './InputGroupText';
 import {TextInput} from '../TextInput';
+import {NumberInput} from '../NumberInput';
+import {DateInput} from '../DateInput';
+import {Typeahead} from '../Typeahead';
+import type {SearchableItem, SearchSource} from '../Typeahead';
+import {Selector} from '../Selector';
+import {MultiSelector} from '../MultiSelector';
+
+const fruits: SearchableItem[] = [
+  {id: '1', label: 'Apple'},
+  {id: '2', label: 'Banana'},
+];
+
+const fruitSource: SearchSource = {
+  search: (query: string) =>
+    fruits.filter(f => f.label.toLowerCase().includes(query.toLowerCase())),
+  bootstrap: () => fruits,
+};
 
 describe('InputGroup', () => {
-  it('renders a group with aria-label', () => {
+  it('names the group via the label element (forms-14)', () => {
     render(
       <InputGroup label="Price">
         <InputGroupText>$</InputGroupText>
-        <TextInput
-          label="Amount"
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
+      </InputGroup>,
+    );
+
+    // The group is named by the field label via aria-labelledby (not a
+    // duplicated aria-label). The label is rendered as a <span> (not a literal
+    // <label>, which can't name a group) and carries no orphaned htmlFor.
+    const group = screen.getByRole('group', {name: 'Price'});
+    expect(group).toBeInTheDocument();
+    expect(group).not.toHaveAttribute('aria-label');
+    const label = screen.getByText('Price');
+    expect(label.tagName).toBe('SPAN');
+    expect(label.closest('label')).toBeNull();
+    expect(label).not.toHaveAttribute('for');
+    expect(group.getAttribute('aria-labelledby')).toBe(label.id);
+  });
+
+  it('associates group description and status through aria-describedby', () => {
+    render(
+      <InputGroup
+        label="Price"
+        description="Enter the amount in USD"
+        status={{type: 'error', message: 'Price is required'}}>
+        <InputGroupText>$</InputGroupText>
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
+      </InputGroup>,
+    );
+
+    const group = screen.getByRole('group', {name: 'Price'});
+    const describedBy = group.getAttribute('aria-describedby');
+    expect(describedBy).toBeTruthy();
+    expect(describedBy!.split(' ')).toHaveLength(2);
+    expect(describedBy).toContain(
+      screen.getByText('Enter the amount in USD').id,
+    );
+    expect(describedBy).toContain(screen.getByText('Price is required').id);
+  });
+
+  it('labels grouped TextInput from the group and inner input labels', () => {
+    render(
+      <InputGroup
+        label="Price"
+        description="Enter the amount in USD"
+        status={{type: 'error', message: 'Price is required'}}>
+        <InputGroupText>$</InputGroupText>
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
+      </InputGroup>,
+    );
+
+    const group = screen.getByRole('group', {name: 'Price'});
+    const groupLabelID = group.getAttribute('aria-labelledby');
+    const describedBy = group.getAttribute('aria-describedby');
+    const input = screen.getByRole('textbox', {name: 'Price Amount'});
+    const labelledByIDs =
+      input.getAttribute('aria-labelledby')?.split(' ') ?? [];
+
+    expect(labelledByIDs).toHaveLength(2);
+    expect(labelledByIDs[0]).toBe(groupLabelID);
+    expect(document.getElementById(labelledByIDs[1])).toHaveTextContent(
+      'Amount',
+    );
+    expect(input).not.toHaveAttribute('aria-label');
+    expect(input).toHaveAttribute('aria-describedby', describedBy);
+  });
+
+  it('labels grouped Typeahead from the group and inner input labels', () => {
+    const {container} = render(
+      <InputGroup label="Favorite fruit" description="Pick one fruit">
+        <InputGroupText>Fruit</InputGroupText>
+        <Typeahead
+          label="Selection"
           isLabelHidden
-          value=""
+          searchSource={fruitSource}
+          value={null}
           onChange={() => {}}
         />
       </InputGroup>,
     );
 
-    const group = screen.getByRole('group');
-    expect(group).toBeInTheDocument();
-    expect(group).toHaveAttribute('aria-label', 'Price');
+    const group = screen.getByRole('group', {name: 'Favorite fruit'});
+    const groupLabelID = group.getAttribute('aria-labelledby');
+    const input = screen.getByRole('combobox', {
+      name: 'Favorite fruit Selection',
+    });
+    const labelledByIDs =
+      input.getAttribute('aria-labelledby')?.split(' ') ?? [];
+
+    expect(labelledByIDs).toHaveLength(2);
+    expect(labelledByIDs[0]).toBe(groupLabelID);
+    expect(document.getElementById(labelledByIDs[1])).toHaveTextContent(
+      'Selection',
+    );
+    expect(input).not.toHaveAttribute('aria-label');
+    expect(input).toHaveAttribute(
+      'aria-describedby',
+      group.getAttribute('aria-describedby'),
+    );
+    expect(container.querySelectorAll('.astryx-field')).toHaveLength(1);
   });
 
-  it('renders the visible label', () => {
+  it('labels grouped NumberInput from the group and inner input labels', () => {
     render(
-      <InputGroup label="Price">
-        <TextInput
+      <InputGroup label="Budget" description="Whole dollars only">
+        <InputGroupText>$</InputGroupText>
+        <NumberInput
           label="Amount"
           isLabelHidden
-          value=""
+          value={null}
           onChange={() => {}}
         />
       </InputGroup>,
     );
 
+    const group = screen.getByRole('group', {name: 'Budget'});
+    const groupLabelID = group.getAttribute('aria-labelledby');
+    const input = screen.getByRole('spinbutton', {name: 'Budget Amount'});
+    const labelledByIDs =
+      input.getAttribute('aria-labelledby')?.split(' ') ?? [];
+
+    expect(labelledByIDs).toHaveLength(2);
+    expect(labelledByIDs[0]).toBe(groupLabelID);
+    expect(document.getElementById(labelledByIDs[1])).toHaveTextContent(
+      'Amount',
+    );
+    expect(input).not.toHaveAttribute('aria-label');
+    expect(input).toHaveAttribute(
+      'aria-describedby',
+      group.getAttribute('aria-describedby'),
+    );
+  });
+
+  it('labels grouped DateInput from the group and inner input labels', () => {
+    render(
+      <InputGroup label="Deadline" description="Use business days">
+        <InputGroupText>Due</InputGroupText>
+        <DateInput label="Date" isLabelHidden onChange={() => {}} />
+      </InputGroup>,
+    );
+
+    const group = screen.getByRole('group', {name: 'Deadline'});
+    const groupLabelID = group.getAttribute('aria-labelledby');
+    const input = screen.getByRole('combobox', {name: 'Deadline Date'});
+    const labelledByIDs =
+      input.getAttribute('aria-labelledby')?.split(' ') ?? [];
+
+    expect(labelledByIDs).toHaveLength(2);
+    expect(labelledByIDs[0]).toBe(groupLabelID);
+    expect(document.getElementById(labelledByIDs[1])).toHaveTextContent('Date');
+    expect(input).toHaveAttribute('aria-haspopup', 'dialog');
+    expect(input).toHaveAttribute(
+      'aria-describedby',
+      group.getAttribute('aria-describedby'),
+    );
+  });
+
+  it('labels grouped Selector from the group and selector labels', () => {
+    render(
+      <InputGroup label="Destination" description="Where alerts are sent">
+        <InputGroupText>#</InputGroupText>
+        <Selector
+          label="Channel"
+          isLabelHidden
+          options={['General', 'Support']}
+          placeholder="Choose channel"
+        />
+      </InputGroup>,
+    );
+
+    const group = screen.getByRole('group', {name: 'Destination'});
+    const groupLabelID = group.getAttribute('aria-labelledby');
+    const trigger = screen.getByRole('combobox', {
+      name: 'Destination Channel',
+    });
+    const labelledByIDs =
+      trigger.getAttribute('aria-labelledby')?.split(' ') ?? [];
+
+    expect(labelledByIDs).toHaveLength(2);
+    expect(labelledByIDs[0]).toBe(groupLabelID);
+    expect(document.getElementById(labelledByIDs[1])).toHaveTextContent(
+      'Channel',
+    );
+    expect(trigger).not.toHaveAttribute('aria-label');
+    expect(trigger).toHaveAttribute(
+      'aria-describedby',
+      group.getAttribute('aria-describedby'),
+    );
+  });
+
+  it('labels grouped MultiSelector from the group and selector labels', () => {
+    render(
+      <InputGroup label="Destinations" description="Where alerts are sent">
+        <InputGroupText>#</InputGroupText>
+        <MultiSelector
+          label="Channels"
+          isLabelHidden
+          options={['General', 'Support']}
+          value={[]}
+          onChange={() => {}}
+          placeholder="Choose channels"
+        />
+      </InputGroup>,
+    );
+
+    const group = screen.getByRole('group', {name: 'Destinations'});
+    const groupLabelID = group.getAttribute('aria-labelledby');
+    const trigger = screen.getByRole('combobox', {
+      name: 'Destinations Channels',
+    });
+    const labelledByIDs =
+      trigger.getAttribute('aria-labelledby')?.split(' ') ?? [];
+
+    expect(labelledByIDs).toHaveLength(2);
+    expect(labelledByIDs[0]).toBe(groupLabelID);
+    expect(document.getElementById(labelledByIDs[1])).toHaveTextContent(
+      'Channels',
+    );
+    expect(trigger).not.toHaveAttribute('aria-label');
+    expect(trigger).toHaveAttribute(
+      'aria-describedby',
+      group.getAttribute('aria-describedby'),
+    );
+  });
+
+  it('keeps grouped DateInput calendar button and popover semantics', () => {
+    render(
+      <InputGroup label="Deadline">
+        <InputGroupText>Due</InputGroupText>
+        <DateInput label="Date" isLabelHidden onChange={() => {}} />
+      </InputGroup>,
+    );
+
+    expect(
+      screen.getByRole('button', {name: 'Open calendar'}),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('combobox', {name: 'Deadline Date'}),
+    ).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('renders the visible label', () => {
+    render(
+      <InputGroup label="Price">
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
+      </InputGroup>,
+    );
+
     expect(screen.getByText('Price')).toBeInTheDocument();
   });
 
@@ -53,12 +290,7 @@ describe('InputGroup', () => {
     render(
       <InputGroup label="Price">
         <InputGroupText>$</InputGroupText>
-        <TextInput
-          label="Amount"
-          isLabelHidden
-          value=""
-          onChange={() => {}}
-        />
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
       </InputGroup>,
     );
 
@@ -68,12 +300,7 @@ describe('InputGroup', () => {
   it('renders the input', () => {
     render(
       <InputGroup label="Price">
-        <TextInput
-          label="Amount"
-          isLabelHidden
-          value=""
-          onChange={() => {}}
-        />
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
       </InputGroup>,
     );
 
@@ -97,12 +324,7 @@ describe('InputGroup', () => {
   it('applies data-testid', () => {
     render(
       <InputGroup label="Price" data-testid="price-group">
-        <TextInput
-          label="Amount"
-          isLabelHidden
-          value=""
-          onChange={() => {}}
-        />
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
       </InputGroup>,
     );
 
@@ -112,12 +334,7 @@ describe('InputGroup', () => {
   it('renders description text', () => {
     render(
       <InputGroup label="Price" description="Enter the price in USD">
-        <TextInput
-          label="Amount"
-          isLabelHidden
-          value=""
-          onChange={() => {}}
-        />
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
       </InputGroup>,
     );
 
@@ -129,12 +346,7 @@ describe('InputGroup', () => {
       <InputGroup
         label="Price"
         status={{type: 'error', message: 'Price is required'}}>
-        <TextInput
-          label="Amount"
-          isLabelHidden
-          value=""
-          onChange={() => {}}
-        />
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
       </InputGroup>,
     );
 
@@ -144,12 +356,7 @@ describe('InputGroup', () => {
   it('renders with hidden label', () => {
     render(
       <InputGroup label="Price" isLabelHidden>
-        <TextInput
-          label="Amount"
-          isLabelHidden
-          value=""
-          onChange={() => {}}
-        />
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
       </InputGroup>,
     );
 
@@ -160,24 +367,14 @@ describe('InputGroup', () => {
   it('renders with different sizes', () => {
     const {rerender} = render(
       <InputGroup label="Price" size="sm">
-        <TextInput
-          label="Amount"
-          isLabelHidden
-          value=""
-          onChange={() => {}}
-        />
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
       </InputGroup>,
     );
     expect(screen.getByRole('textbox')).toBeInTheDocument();
 
     rerender(
       <InputGroup label="Price" size="lg">
-        <TextInput
-          label="Amount"
-          isLabelHidden
-          value=""
-          onChange={() => {}}
-        />
+        <TextInput label="Amount" isLabelHidden value="" onChange={() => {}} />
       </InputGroup>,
     );
     expect(screen.getByRole('textbox')).toBeInTheDocument();

package/src/InputGroup/InputGroup.tsx

@@ -4,11 +4,12 @@
 
 /**
  * @file InputGroup.tsx
- * @input Uses React, StyleX, theme tokens, InputGroupContext
- * @output Exports InputGroup component
+ * @input Uses React, StyleX, theme tokens, InputGroupContext, Field
+ * @output Exports InputGroup component with group label/description ARIA wiring
  * @position Groups input with prefix/suffix addons; consumed by index.ts
  *
- * Children (TextInput, NumberInput) consume the InputGroup context
+ * Children (TextInput, NumberInput, TimeInput, DateInput, Typeahead,
+ * Selector, MultiSelector) consume the InputGroup context
  * to remove their own border/radius so the group container provides
  * the unified border treatment.
  *
@@ -156,9 +157,22 @@ export function InputGroup({
 }: InputGroupProps) {
   const size = useSize(sizeProp, 'md');
   const inputId = useId();
+  const labelID = useId();
+  const descriptionID = useId();
   const statusMessageId = useId();
 
-  const contextValue = useMemo(() => ({isInGroup: true as const}), []);
+  const describedByIDs =
+    [
+      description ? descriptionID : null,
+      status?.message ? statusMessageId : null,
+    ]
+      .filter(Boolean)
+      .join(' ') || undefined;
+
+  const contextValue = useMemo(
+    () => ({isInGroup: true as const, labelID, describedByIDs}),
+    [labelID, describedByIDs],
+  );
 
   return (
     <InputGroupContext value={contextValue}>
@@ -168,6 +182,9 @@ export function InputGroup({
           isLabelHidden={isLabelHidden}
           description={description}
           inputID={inputId}
+          labelID={labelID}
+          descriptionID={description ? descriptionID : undefined}
+          isGroupLabel
           isOptional={isOptional}
           isRequired={isRequired}
           isDisabled={isDisabled}
@@ -185,7 +202,8 @@ export function InputGroup({
           <div
             ref={ref}
             role="group"
-            aria-label={label}
+            aria-labelledby={labelID}
+            aria-describedby={describedByIDs}
             data-testid={testId}
             {...rest}
             {...mergeProps(

package/src/InputGroup/InputGroupContext.ts

@@ -4,19 +4,24 @@
 
 /**
  * @file InputGroupContext.ts
- * @input None (pure context definition)
+ * @input React createContext/use
  * @output Exports InputGroup context and useInputGroup hook
- * @position Shared context; consumed by input components for group-aware styling
+ * @position Shared context; consumed by input components for group-aware styling and ARIA associations
  */
 
 import {createContext, use} from 'react';
 
 export interface InputGroupContextValue {
   isInGroup: true;
+  /** ID of the group label element, for aria-labelledby composition. */
+  labelID: string;
+  /** IDs of helper/status text owned by the group, for aria-describedby composition. */
+  describedByIDs?: string;
 }
 
-export const InputGroupContext =
-  createContext<InputGroupContextValue | null>(null);
+export const InputGroupContext = createContext<InputGroupContextValue | null>(
+  null,
+);
 InputGroupContext.displayName = 'InputGroupContext';
 
 /**

package/src/InputGroup/groupStyles.ts

@@ -4,7 +4,7 @@
  * @file groupStyles.ts
  * @input Uses StyleX, theme tokens
  * @output Exports shared group-aware styles for input components
- * @position Shared styles consumed by TextInput, NumberInput when inside an InputGroup
+ * @position Shared styles consumed by InputGroup-compatible controls
  */
 
 import * as stylex from '@stylexjs/stylex';
@@ -30,10 +30,16 @@ export const groupStyles = stylex.create({
     borderStartEndRadius: {
       default: 0,
       ':last-child': radiusVars['--radius-element'],
+      ':has(+ [popover]:last-child)': radiusVars['--radius-element'],
+      ':has(+ [popover] + [popover]:last-child)':
+        radiusVars['--radius-element'],
     },
     borderEndEndRadius: {
       default: 0,
       ':last-child': radiusVars['--radius-element'],
+      ':has(+ [popover]:last-child)': radiusVars['--radius-element'],
+      ':has(+ [popover] + [popover]:last-child)':
+        radiusVars['--radius-element'],
     },
     ':focus-within': {
       zIndex: 1,

package/src/InputGroup/index.ts

@@ -16,3 +16,4 @@ export {InputGroupText} from './InputGroupText';
 export type {InputGroupTextProps} from './InputGroupText';
 
 export {useInputGroup} from './InputGroupContext';
+export type {InputGroupContextValue} from './InputGroupContext';

package/src/Kbd/Kbd.test.tsx

@@ -72,10 +72,28 @@ describe('Kbd', () => {
     expect(screen.getByText('Esc')).toBeInTheDocument();
   });
 
-  it('is aria-hidden', () => {
-    const {container} = render(<Kbd keys="mod+k" />);
-    const wrapper = container.firstChild as HTMLElement;
-    expect(wrapper.getAttribute('aria-hidden')).toBe('true');
+  it('exposes a spoken accessible name and hides the glyphs (obs-1)', () => {
+    render(<Kbd keys="mod+shift+k" />);
+    // The wrapper carries a screen-reader name built from spoken key labels
+    // (jsdom is non-Mac, so mod → "Control").
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('aria-label', 'Control + Shift + K');
+    // The visual glyph elements are hidden from assistive tech.
+    const glyphs = img.querySelectorAll('kbd');
+    glyphs.forEach(g => expect(g).toHaveAttribute('aria-hidden', 'true'));
+    expect(img).not.toHaveAttribute('aria-hidden');
+  });
+
+  it('uses "Command" in the accessible name for mod on Mac', () => {
+    Object.defineProperty(navigator, 'platform', {
+      value: 'MacIntel',
+      configurable: true,
+    });
+    render(<Kbd keys="mod+k" />);
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'Command + K',
+    );
   });
 
   it('uppercases unknown keys', () => {

package/src/Kbd/Kbd.tsx

@@ -87,6 +87,33 @@ function getKeyDisplay(key: string, isMac: boolean): string {
   return KEY_DISPLAY[key] ?? key.toUpperCase();
 }
 
+/**
+ * Spoken-word labels for screen readers. The visual `KEY_DISPLAY` uses glyphs
+ * (⌘, ⇧, ↵, …) that assistive tech cannot announce meaningfully, so the
+ * accessible name for the shortcut is built from these words instead.
+ */
+const KEY_LABEL: Record<string, string> = {
+  ctrl: 'Control',
+  alt: 'Alt',
+  shift: 'Shift',
+  enter: 'Enter',
+  backspace: 'Backspace',
+  escape: 'Escape',
+  tab: 'Tab',
+  up: 'Up arrow',
+  down: 'Down arrow',
+  left: 'Left arrow',
+  right: 'Right arrow',
+  plus: 'Plus',
+};
+
+function getKeyLabel(key: string, isMac: boolean): string {
+  if (key === 'mod') {
+    return isMac ? 'Command' : 'Control';
+  }
+  return KEY_LABEL[key] ?? key.toUpperCase();
+}
+
 function subscribeToPlatformChanges(): () => void {
   return () => {};
 }
@@ -155,19 +182,24 @@ export function Kbd({keys, ref, xstyle, className, style, ...rest}: KbdProps) {
 
   const parts = keys.split('+').map(key => key.trim().toLowerCase());
 
+  // Screen-reader name: the joined spoken labels (e.g. "Command + K"), since
+  // the visual glyphs below are announced meaninglessly by assistive tech.
+  const accessibleName = parts.map(key => getKeyLabel(key, isMac)).join(' + ');
+
   return (
     <span
       ref={ref}
+      role="img"
+      aria-label={accessibleName}
       {...rest}
       {...mergeProps(
         themeProps('kbd'),
         stylex.props(styles.wrapper, xstyle),
         className,
         style,
-      )}
-      aria-hidden="true">
+      )}>
       {parts.map(key => (
-        <kbd key={key} {...stylex.props(styles.kbd)}>
+        <kbd key={key} aria-hidden="true" {...stylex.props(styles.kbd)}>
           {getKeyDisplay(key, isMac)}
         </kbd>
       ))}

package/src/Layer/layerAnimations.stylex.ts

@@ -72,22 +72,38 @@ const animationBase = {
  *
  * Keyed by LayerPlacement ('above' | 'below' | 'start' | 'end')
  * for easy lookup: `layerAnimations[placement]`.
+ *
+ * Each entry disables its keyframe animation under
+ * `prefers-reduced-motion: reduce` so the layer appears instantly instead of
+ * translating/scaling in (infra-6).
  */
 export const layerAnimations = stylex.create({
   below: {
-    animationName: enterBelow,
+    animationName: {
+      default: enterBelow,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
     ...animationBase,
   },
   above: {
-    animationName: enterAbove,
+    animationName: {
+      default: enterAbove,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
     ...animationBase,
   },
   end: {
-    animationName: enterEnd,
+    animationName: {
+      default: enterEnd,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
     ...animationBase,
   },
   start: {
-    animationName: enterStart,
+    animationName: {
+      default: enterStart,
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
     ...animationBase,
   },
 });

package/src/Layer/useLayer.doc.mjs

@@ -144,6 +144,11 @@ export const docsDense = {
         guidance: true,
         description: 'Build on Popover/HoverCard/Tooltip for common overlay patterns.',
       },
+      {
+        guidance: true,
+        description:
+          'Rely on the Popover API top layer to escape clipping/stacking: render inline (no portal) to inherit the trigger theme cascade and natural focus order. Use `as: "span"` when the layer must be valid in inline contexts like a paragraph.',
+      },
       {
         guidance: false,
         description: