@astryxdesign/core 0.1.8 → 0.1.9

package/src/SideNav/SideNavHeading.tsx

@@ -351,6 +351,10 @@ export function SideNavHeading({
 
   const popover = usePopover({
     dialogLabel: t('@astryx.sideNav.heading.dialogLabel'),
+    // The popup exposes its own role="menu" semantics; a role="dialog"
+    // aria-modal wrapper would announce "dialog, Navigation menu" around a
+    // menu (the anti-pattern removed in a478a3dcf).
+    role: 'none',
     hasCloseButton: false,
   });
 
@@ -428,7 +432,6 @@ export function SideNavHeading({
           {popover.render(
             <div
               ref={menuRef}
-              role="menu"
               {...stylex.props(styles.popoverContent)}
               {...contentProps}>
               <button
@@ -461,9 +464,14 @@ export function SideNavHeading({
                   )}
                 </span>
               </button>
-              <NavHeadingCloseContext value={closeMenuCtx}>
-                {menu}
-              </NavHeadingCloseContext>
+              {/* The menu role is scoped to the actual menu items so the
+                  heading button above stays a valid sibling, not an invalid
+                  child of a role="menu" element. */}
+              <div role="menu" aria-label={heading}>
+                <NavHeadingCloseContext value={closeMenuCtx}>
+                  {menu}
+                </NavHeadingCloseContext>
+              </div>
             </div>,
             {placement: 'below', alignment: 'start', xstyle: styles.popover},
           )}
@@ -620,11 +628,15 @@ export function SideNavHeading({
         {popover.render(
           <div
             ref={menuRef}
-            role="menu"
             {...stylex.props(styles.popoverContent)}
             {...contentProps}>
             {popoverHeadingContent}
-            {menu}
+            {/* The menu role is scoped to the actual menu items so the
+                heading button above stays a valid sibling, not an invalid
+                child of a role="menu" element. */}
+            <div role="menu" aria-label={heading}>
+              {menu}
+            </div>
           </div>,
           {
             placement: 'below',
@@ -683,11 +695,15 @@ export function SideNavHeading({
         {popover.render(
           <div
             ref={menuRef}
-            role="menu"
             {...stylex.props(styles.popoverContent)}
             {...contentProps}>
             {popoverHeadingContent}
-            {menu}
+            {/* The menu role is scoped to the actual menu items so the
+                heading button above stays a valid sibling, not an invalid
+                child of a role="menu" element. */}
+            <div role="menu" aria-label={heading}>
+              {menu}
+            </div>
           </div>,
           {
             placement: 'below',

package/src/SideNav/SideNavItem.tsx

@@ -628,7 +628,11 @@ export function SideNavItem({
         <button
           type="button"
           onClick={handleToggleClick}
-          aria-label={isItemCollapsed ? t('@astryx.sideNavItem.expand', {label}) : t('@astryx.sideNavItem.collapse', {label})}
+          aria-label={
+            isItemCollapsed
+              ? t('@astryx.sideNavItem.expand', {label})
+              : t('@astryx.sideNavItem.collapse', {label})
+          }
           aria-expanded={!isItemCollapsed}
           aria-controls={`${id}-children`}
           {...stylex.props(styles.expandToggle)}>

package/src/Slider/Slider.test.tsx

@@ -85,6 +85,19 @@ describe('Slider', () => {
     expect(slider).toHaveAttribute('aria-valuenow', '72');
   });
 
+  it.each([
+    {value: 150, expectedValue: 100, expectedPosition: '100%'},
+    {value: -50, expectedValue: 0, expectedPosition: '0%'},
+  ])(
+    'clamps a controlled value of $value to $expectedValue',
+    ({value, expectedValue, expectedPosition}) => {
+      render(<Slider label="Volume" value={value} min={0} max={100} />);
+      const slider = screen.getByRole('slider');
+      expect(slider).toHaveAttribute('aria-valuenow', String(expectedValue));
+      expect(slider).toHaveStyle({left: expectedPosition});
+    },
+  );
+
   it('range mode sets correct aria values on both thumbs', () => {
     render(
       <Slider
@@ -155,6 +168,60 @@ describe('Slider', () => {
     expect(ariaHidden.length).toBeGreaterThanOrEqual(2);
   });
 
+  // --- Required state ---
+
+  it('conveys required state through the accessible description', () => {
+    render(<Slider label="Volume" value={50} isRequired />);
+    const slider = screen.getByRole('slider');
+    expect(slider).toHaveAccessibleDescription(/Required/);
+    // aria-required is not a supported property of role="slider" in
+    // WAI-ARIA 1.2, so it must never appear on the thumb.
+    expect(slider).not.toHaveAttribute('aria-required');
+  });
+
+  it('conveys required state on both thumbs of a range slider', () => {
+    render(
+      <Slider
+        label="Price range"
+        value={[20, 80] as [number, number]}
+        isRequired
+      />,
+    );
+    const sliders = screen.getAllByRole('slider');
+    expect(sliders).toHaveLength(2);
+    for (const thumb of sliders) {
+      expect(thumb).toHaveAccessibleDescription(/Required/);
+      expect(thumb).not.toHaveAttribute('aria-required');
+    }
+  });
+
+  it('combines required with other describedby parts in the description', () => {
+    render(
+      <Slider
+        label="Volume"
+        value={50}
+        description="Adjust the volume level"
+        isRequired
+      />,
+    );
+    const slider = screen.getByRole('slider');
+    expect(slider).toHaveAccessibleDescription(/Adjust the volume level/);
+    expect(slider).toHaveAccessibleDescription(/Required/);
+  });
+
+  it('does not mention required without isRequired', () => {
+    render(
+      <Slider
+        label="Volume"
+        value={50}
+        description="Adjust the volume level"
+      />,
+    );
+    const slider = screen.getByRole('slider');
+    expect(slider).not.toHaveAccessibleDescription(/Required/);
+    expect(slider).not.toHaveAttribute('aria-required');
+  });
+
   // --- Disabled guards ---
 
   it('disables thumbs when isDisabled is true', () => {
@@ -549,7 +616,11 @@ describe('Slider', () => {
     it('submits both range values under the same name', () => {
       const {container} = render(
         <form>
-          <Slider label="Price" htmlName="price" value={[20, 80] as [number, number]} />
+          <Slider
+            label="Price"
+            htmlName="price"
+            value={[20, 80] as [number, number]}
+          />
         </form>,
       );
       const data = new FormData(container.querySelector('form')!);
@@ -562,7 +633,9 @@ describe('Slider', () => {
           <Slider label="Volume" htmlName="volume" value={50} isDisabled />
         </form>,
       );
-      expect([...new FormData(container.querySelector('form')!).keys()]).toEqual([]);
+      expect([
+        ...new FormData(container.querySelector('form')!).keys(),
+      ]).toEqual([]);
     });
   });
 });

package/src/Slider/Slider.tsx

@@ -4,7 +4,7 @@
 
 /**
  * @file Slider.tsx
- * @input Uses React, useId, useRef, useCallback, Field, Tooltip, useTooltip
+ * @input Uses React, useId, useRef, useCallback, Field, Tooltip, useTooltip, VisuallyHidden
  * @output Exports Slider component, SliderProps, SliderSingleProps, SliderRangeProps, SliderBaseProps
  * @position Core implementation; consumed by index.ts, tested by Slider.test.tsx
  *
@@ -38,6 +38,7 @@ import {
 import {Field} from '../Field/Field';
 import {Tooltip} from '../Tooltip/Tooltip';
 import {useTooltip} from '../Tooltip';
+import {VisuallyHidden} from '../VisuallyHidden';
 import type {InputStatus} from '../Field/types';
 import {mergeProps, mergeRefs} from '../utils';
 import type {BaseProps} from '../BaseProps';
@@ -393,6 +394,7 @@ export function Slider({ref, ...props}: SliderProps) {
   const id = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
+  const requiredID = useId();
 
   const trackRef = useRef<HTMLDivElement>(null);
   const draggingThumbRef = useRef<number | null>(null);
@@ -412,6 +414,12 @@ export function Slider({ref, ...props}: SliderProps) {
     isEnabled: showsDisabledMessage,
   });
 
+  // Required state. `aria-required` is not a supported property of
+  // role="slider" in WAI-ARIA 1.2, so the thumb instead points its
+  // aria-describedby at a visually hidden "Required" span — mirroring the
+  // Field label's visible indicator (where isOptional takes precedence).
+  const conveysRequired = isRequired && !isOptional;
+
   // Build aria-describedby
   const describedByParts: string[] = [];
   if (description) {
@@ -420,6 +428,9 @@ export function Slider({ref, ...props}: SliderProps) {
   if (status?.message) {
     describedByParts.push(statusMessageID);
   }
+  if (conveysRequired) {
+    describedByParts.push(requiredID);
+  }
   if (showsDisabledMessage) {
     describedByParts.push(disabledMessageTooltip.describedBy);
   }
@@ -428,10 +439,12 @@ export function Slider({ref, ...props}: SliderProps) {
 
   // Value helpers — guard against undefined value (e.g. playground previews
   // that render the component without providing a value prop).
-  const values: number[] = useMemo(
-    () => (isRange ? value : [value != null ? value : min]),
-    [isRange, value, min],
-  );
+  const values: number[] = useMemo(() => {
+    const currentValues = Array.isArray(value)
+      ? value
+      : [value != null ? value : min];
+    return currentValues.map(currentValue => clamp(currentValue, min, max));
+  }, [value, min, max]);
 
   const valuesRef = useRef(values);
   valuesRef.current = values;
@@ -921,6 +934,9 @@ export function Slider({ref, ...props}: SliderProps) {
 
         {textDisplay}
       </div>
+      {conveysRequired && (
+        <VisuallyHidden id={requiredID}>Required</VisuallyHidden>
+      )}
       {showsDisabledMessage &&
         disabledMessageTooltip.renderTooltip(disabledMessage)}
     </Field>

package/src/Switch/Switch.test.tsx

@@ -9,10 +9,15 @@
  * SYNC: When Switch.tsx changes, update tests to match new behavior
  */
 
-import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {Switch} from './Switch';
+import {__resetLiveRegionsForTest} from '../hooks/useAnnounce';
+
+afterEach(() => {
+  __resetLiveRegionsForTest();
+});
 
 // Mock showPopover/hidePopover (not implemented in jsdom) so the tooltip layer
 // reflects its open state via a `popover-open` attribute the tests can assert.
@@ -324,6 +329,32 @@ describe('Switch', () => {
     expect(describedBy).toBeTruthy();
   });
 
+  // Regression: the status is conditionally mounted, so it must be announced
+  // through the persistent useAnnounce live region — a live region born
+  // together with its content is not reliably announced.
+  it('announces a status message that appears after mount', async () => {
+    const {rerender} = render(
+      <Switch label="Enable notifications" value={false} onChange={() => {}} />,
+    );
+    expect(
+      document.querySelector('[data-astryx-live-region="assertive"]'),
+    ).toBeNull();
+
+    rerender(
+      <Switch
+        label="Enable notifications"
+        value={false}
+        onChange={() => {}}
+        status={{type: 'error', message: 'Failed to save setting'}}
+      />,
+    );
+    await waitFor(() => {
+      expect(
+        document.querySelector('[data-astryx-live-region="assertive"]'),
+      ).toHaveTextContent('Failed to save setting');
+    });
+  });
+
   it('calls onFocus and onBlur callbacks', async () => {
     const user = userEvent.setup();
     const handleFocus = vi.fn();

package/src/Table/BaseTable.tsx

@@ -42,6 +42,7 @@ import {TableHeaderCell} from './TableHeaderCell';
 import {TableHeader} from './TableHeader';
 import {TableBody} from './TableBody';
 import {mergeProps} from '../utils';
+import {devError} from '../utils/devWarning';
 import {EmptyState} from '../EmptyState';
 import {Text} from '../Text';
 import {themeProps} from '../utils/themeProps';
@@ -92,10 +93,7 @@ function applyPlugins<TPlugin, TProps, TArgs extends unknown[]>(
     try {
       return transform(acc, ...args);
     } catch (error) {
-      console.error(
-        `[Table] Plugin at index ${index} threw in transform:`,
-        error,
-      );
+      devError('Table', `Plugin at index ${index} threw in transform:`, error);
       return acc;
     }
   }, initial);
@@ -593,7 +591,7 @@ function BaseTableInner<T extends Record<string, unknown>>({
       try {
         tableElement = plugin.transformTableContext(tableElement);
       } catch (error) {
-        console.error('[Table] Plugin threw in transformTableContext:', error);
+        devError('Table', 'Plugin threw in transformTableContext:', error);
       }
     }
   }

package/src/Table/index.ts

@@ -28,6 +28,7 @@ export {useTableColumnResize} from './plugins/columnResize';
 export {useTableStickyColumns} from './plugins/stickyColumns';
 export {useTableGroupedRows} from './plugins/groupedRows';
 export {useTableRowIndex} from './plugins/rowIndex';
+export {useTableRowStatus} from './plugins/rowStatus';
 export {
   useTableRowExpansion,
   useTableRowExpansionState,
@@ -110,6 +111,10 @@ export type {
   UseTableGroupedRowsConfig,
   UseTableGroupedRowsResult,
 } from './plugins/groupedRows';
+export type {
+  UseTableRowStatusConfig,
+  TableRowStatus,
+} from './plugins/rowStatus';
 export type {
   TableTreeRowMeta,
   UseTableTreeDataConfig,

package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx

@@ -325,8 +325,12 @@ export function useTableGroupedRows<T extends Record<string, unknown>>(
                   }}
                   aria-label={
                     collapsed
-                      ? t('@astryx.tableGroupedRows.expandGroup', {groupKey: header.groupKey})
-                      : t('@astryx.tableGroupedRows.collapseGroup', {groupKey: header.groupKey})
+                      ? t('@astryx.tableGroupedRows.expandGroup', {
+                          groupKey: header.groupKey,
+                        })
+                      : t('@astryx.tableGroupedRows.collapseGroup', {
+                          groupKey: header.groupKey,
+                        })
                   }
                   aria-expanded={!collapsed}>
                   <span

package/src/Table/plugins/rowStatus/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export {useTableRowStatus} from './useTableRowStatus';
+export type {
+  UseTableRowStatusConfig,
+  TableRowStatus,
+} from './useTableRowStatus';

package/src/Table/plugins/rowStatus/useTableRowStatus.test.tsx

@@ -0,0 +1,138 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import {describe, it, expect} from 'vitest';
+import {render, screen, within} from '@testing-library/react';
+import {Table} from '../../Table';
+import type {TableColumn} from '../../types';
+import {useTableRowStatus, type TableRowStatus} from './useTableRowStatus';
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  state: 'error' | 'warning' | 'ok' | 'done';
+}
+
+const data: Row[] = [
+  {id: 'a', name: 'Alice', state: 'error'},
+  {id: 'b', name: 'Bob', state: 'ok'},
+  {id: 'c', name: 'Carol', state: 'warning'},
+];
+
+const columns: TableColumn<Row>[] = [{key: 'name', header: 'Name'}];
+
+function getStatus(item: Row): TableRowStatus | null {
+  if (item.state === 'error') {
+    return {color: 'red', label: 'Error'};
+  }
+  if (item.state === 'warning') {
+    return {color: 'orange', label: 'Warning'};
+  }
+  return null;
+}
+
+function Harness({
+  rows = data,
+  statusFn = getStatus,
+}: {
+  rows?: Row[];
+  statusFn?: (item: Row) => TableRowStatus | null;
+}) {
+  const rowStatus = useTableRowStatus<Row>({getStatus: statusFn});
+  return (
+    <Table data={rows} columns={columns} idKey="id" plugins={{rowStatus}} />
+  );
+}
+
+describe('useTableRowStatus', () => {
+  it('prepends a narrow status column with an empty header', () => {
+    render(<Harness />);
+    const headers = screen.getAllByRole('columnheader');
+    // Status column is first; its header is empty.
+    expect(headers[0]).toHaveAttribute('data-column-key', '__rowStatus');
+    expect(headers[0].textContent).toBe('');
+  });
+
+  it('renders a labeled dot for rows with a status', () => {
+    render(<Harness />);
+    expect(screen.getByRole('img', {name: 'Error'})).toBeInTheDocument();
+    expect(screen.getByRole('img', {name: 'Warning'})).toBeInTheDocument();
+  });
+
+  it('renders a dot (not an icon) by default', () => {
+    render(<Harness />);
+    // Default (no icon) renders a plain colored dot: no svg in the indicator.
+    const dot = screen.getByRole('img', {name: 'Error'});
+    expect(dot.querySelector('svg')).toBeNull();
+  });
+
+  it('renders no indicator for rows returning null', () => {
+    render(<Harness />);
+    const rows = screen.getAllByRole('row');
+    // rows[2] is Bob (state ok): no status indicator in his status cell.
+    const bob = rows[2];
+    expect(within(bob).getByText('Bob')).toBeInTheDocument();
+    expect(within(bob).queryByRole('img')).not.toBeInTheDocument();
+  });
+
+  it('maps a semantic color name to its icon color token', () => {
+    render(<Harness />);
+    const errorDot = screen.getByRole('img', {name: 'Error'});
+    // 'red' resolves to var(--color-icon-red); StyleX emits it on the inline
+    // style of the inner dot element.
+    const dot = errorDot.querySelector('span');
+    expect(dot?.getAttribute('style')).toContain('--color-icon-red');
+  });
+
+  it('passes through a raw CSS color as an escape hatch', () => {
+    render(
+      <Harness
+        statusFn={item =>
+          item.state === 'error' ? {color: 'rgb(1, 2, 3)', label: 'Raw'} : null
+        }
+      />,
+    );
+    const indicator = screen.getByRole('img', {name: 'Raw'});
+    const dot = indicator.querySelector('span');
+    expect(dot?.getAttribute('style')).toContain('rgb(1, 2, 3)');
+  });
+
+  it('renders an icon as the status signifier when icon is provided', () => {
+    render(
+      <Harness
+        statusFn={item =>
+          item.state === 'error'
+            ? {color: 'red', icon: 'error', label: 'Error'}
+            : null
+        }
+      />,
+    );
+    // Icon-mode still exposes the accessible label via role=img.
+    const indicator = screen.getByRole('img', {name: 'Error'});
+    expect(indicator).toBeInTheDocument();
+    // An SVG icon is rendered inside the indicator (dot mode has no svg).
+    expect(indicator.querySelector('svg')).not.toBeNull();
+  });
+
+  it('exposes the required label as the accessible name in dot mode', () => {
+    render(
+      <Harness
+        statusFn={item =>
+          item.state === 'error' ? {color: 'red', label: 'Error'} : null
+        }
+      />,
+    );
+    // Label is required, so every dot is announced via role=img with its name.
+    const indicator = screen.getByRole('img', {name: 'Error'});
+    expect(indicator).toBeInTheDocument();
+    // Dot mode renders no svg (that is icon mode).
+    expect(indicator.querySelector('svg')).toBeNull();
+    expect(screen.getByText('Alice')).toBeInTheDocument();
+  });
+
+  it('renders the status header with empty data and no indicators', () => {
+    render(<Harness rows={[]} />);
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers[0]).toHaveAttribute('data-column-key', '__rowStatus');
+    expect(screen.queryByRole('img')).not.toBeInTheDocument();
+  });
+});