@ds-mo/ui 0.2.3 → 0.3.0

package/src/components/Slider/Slider.tsx

@@ -13,10 +13,12 @@ export interface SliderProps {
   id?: string;
   inactive?: boolean;
   className?: string;
+  /** Human-readable text for assistive tech when the numeric value alone isn't meaningful (e.g. "Low", "Medium", "High"). Maps to `aria-valuetext`. */
+  valueText?: string;
 }
 
 export const Slider = forwardRef<HTMLDivElement, SliderProps>(
-  ({ value, onChange, min = 0, max = 100, step = 1, label, id: idProp, inactive = false, className }, ref) => {
+  ({ value, onChange, min = 0, max = 100, step = 1, label, id: idProp, inactive = false, className, valueText }, ref) => {
     const generatedId = useId();
     const id = idProp ?? generatedId;
     const containerRef = useRef<HTMLDivElement>(null);
@@ -61,9 +63,7 @@ export const Slider = forwardRef<HTMLDivElement, SliderProps>(
             onChange={handleInput}
             disabled={inactive}
             className={styles.input}
-            aria-valuemin={min}
-            aria-valuemax={max}
-            aria-valuenow={value}
+            aria-valuetext={valueText}
           />
         </div>
       </div>

package/src/components/Tab/Tab.tsx

@@ -6,29 +6,59 @@ import styles from './Tab.module.css';
 export type TabBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
 
 export interface TabProps {
+  /** id of this tab. Pair with the tabpanel's `aria-labelledby` to wire SR semantics. */
   id?: string;
+  /** id of the tabpanel this tab controls. Sets `aria-controls`. */
+  controls?: string;
   label: string;
   isSelected?: boolean;
+  disabled?: boolean;
   /** Parent surface context. Adjusts hover tokens and fg for tabs on colored backgrounds. */
   background?: TabBackground;
   onClick?: () => void;
+  onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
+  onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+  /** Override tab order. Defaults to a roving pattern (0 when selected, -1 otherwise). */
+  tabIndex?: number;
   className?: string;
 }
 
 export const Tab = forwardRef<HTMLButtonElement, TabProps>(
-  ({ id, label, isSelected = false, background, onClick, className }, ref) => {
+  (
+    {
+      id,
+      controls,
+      label,
+      isSelected = false,
+      disabled = false,
+      background,
+      onClick,
+      onKeyDown,
+      onFocus,
+      tabIndex,
+      className,
+    },
+    ref,
+  ) => {
     const bgClass = background && background !== 'faint'
       ? styles[background === 'always-dark' ? 'onAlwaysDark' : `on${background.charAt(0).toUpperCase() + background.slice(1)}`]
       : undefined;
+    const effectiveTabIndex = tabIndex ?? (isSelected ? 0 : -1);
     return (
     <button
       ref={ref}
       id={id}
       className={cn(styles.tab, isSelected && styles.tabSelected, bgClass, className)}
       onClick={onClick}
+      onKeyDown={onKeyDown}
+      onFocus={onFocus}
       type="button"
-      aria-selected={isSelected}
       role="tab"
+      aria-selected={isSelected}
+      aria-controls={controls}
+      aria-disabled={disabled || undefined}
+      disabled={disabled}
+      tabIndex={effectiveTabIndex}
     >
       <Text variant={isSelected ? 'text-body-medium-emphasis' : 'text-body-medium'} as="span">
         {label}

package/src/components/TabGroup/TabGroup.stories.tsx

@@ -11,19 +11,33 @@ export default meta;
 type Story = StoryObj<typeof TabGroup>;
 
 const TABS = [
-  { label: 'Overview', id: 'overview' },
-  { label: 'Activity', id: 'activity' },
-  { label: 'Settings', id: 'settings' },
-  { label: 'Members', id: 'members' },
+  { label: 'Overview', id: 'tab-overview', panelId: 'panel-overview' },
+  { label: 'Activity', id: 'tab-activity', panelId: 'panel-activity' },
+  { label: 'Settings', id: 'tab-settings', panelId: 'panel-settings' },
+  { label: 'Members', id: 'tab-members', panelId: 'panel-members' },
 ];
 
 const Controlled = (props: Partial<React.ComponentProps<typeof TabGroup>>) => {
+  const tabs = props.tabs ?? TABS;
   const [active, setActive] = useState(0);
+  const current = tabs[active];
   return (
     <div>
-      <TabGroup tabs={TABS} activeIndex={active} onTabChange={setActive} {...props} />
-      <div style={{ padding: '16px 0', color: 'var(--color-foreground-secondary)', fontSize: 14 }}>
-        Content for: <strong>{TABS[active].label}</strong>
+      <TabGroup
+        tabs={tabs}
+        activeIndex={active}
+        onTabChange={setActive}
+        aria-label="Section navigation"
+        {...props}
+      />
+      <div
+        role="tabpanel"
+        id={current.panelId}
+        aria-labelledby={current.id}
+        tabIndex={0}
+        style={{ padding: '16px 0', color: 'var(--color-foreground-secondary)', fontSize: 14 }}
+      >
+        Content for: <strong>{current.label}</strong>
       </div>
     </div>
   );
@@ -41,13 +55,13 @@ export const ManyTabs: Story = {
   render: () => (
     <Controlled
       tabs={[
-        { label: 'Dashboard' },
-        { label: 'Analytics' },
-        { label: 'Reports' },
-        { label: 'Users' },
-        { label: 'Settings' },
-        { label: 'Billing' },
-        { label: 'Integrations' },
+        { label: 'Dashboard', id: 'tab-dashboard', panelId: 'panel-dashboard' },
+        { label: 'Analytics', id: 'tab-analytics', panelId: 'panel-analytics' },
+        { label: 'Reports', id: 'tab-reports', panelId: 'panel-reports' },
+        { label: 'Users', id: 'tab-users', panelId: 'panel-users' },
+        { label: 'Settings', id: 'tab-settings-many', panelId: 'panel-settings-many' },
+        { label: 'Billing', id: 'tab-billing', panelId: 'panel-billing' },
+        { label: 'Integrations', id: 'tab-integrations', panelId: 'panel-integrations' },
       ]}
     />
   ),
@@ -55,6 +69,23 @@ export const ManyTabs: Story = {
 
 export const TwoTabs: Story = {
   render: () => (
-    <Controlled tabs={[{ label: 'Active' }, { label: 'Archived' }]} />
+    <Controlled
+      tabs={[
+        { label: 'Active', id: 'tab-active', panelId: 'panel-active' },
+        { label: 'Archived', id: 'tab-archived', panelId: 'panel-archived' },
+      ]}
+    />
+  ),
+};
+
+export const WithDisabledTab: Story = {
+  render: () => (
+    <Controlled
+      tabs={[
+        { label: 'Overview', id: 'tab-d-overview', panelId: 'panel-d-overview' },
+        { label: 'Activity', id: 'tab-d-activity', panelId: 'panel-d-activity', disabled: true },
+        { label: 'Settings', id: 'tab-d-settings', panelId: 'panel-d-settings' },
+      ]}
+    />
   ),
 };

package/src/components/TabGroup/TabGroup.tsx

@@ -5,7 +5,11 @@ import styles from './TabGroup.module.css';
 
 export interface TabGroupTab {
   label: string;
+  /** id for the tab. Pair with `panelId` to wire SR semantics on the consumer's tabpanel. */
   id?: string;
+  /** id of the tabpanel this tab controls. Forwarded to the Tab as `aria-controls`. */
+  panelId?: string;
+  disabled?: boolean;
 }
 
 export interface TabGroupProps {
@@ -13,26 +17,40 @@ export interface TabGroupProps {
   tabs: TabGroupTab[];
   /** Index of the active tab. */
   activeIndex?: number;
-  /** Called when a tab is clicked. */
+  /** Called when a tab is activated (click or keyboard). */
   onTabChange?: (index: number) => void;
+  /** Tablist orientation. Determines which arrow keys navigate. */
+  orientation?: 'horizontal' | 'vertical';
+  /** Accessible label for the tablist. */
+  'aria-label'?: string;
+  /** id of an external label for the tablist. */
+  'aria-labelledby'?: string;
   className?: string;
 }
 
 export const TabGroup = forwardRef<HTMLDivElement, TabGroupProps>(
-  ({ tabs, activeIndex = 0, onTabChange, className }, ref) => {
+  (
+    {
+      tabs,
+      activeIndex = 0,
+      onTabChange,
+      orientation = 'horizontal',
+      className,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+    },
+    ref,
+  ) => {
     const tabsRef = useRef<(HTMLButtonElement | null)[]>([]);
     const [indicator, setIndicator] = useState({ left: 0, width: 0 });
 
     const updateIndicator = useCallback(() => {
       const el = tabsRef.current[activeIndex];
       if (el) {
-        const parent = el.parentElement;
-        if (parent) {
-          setIndicator({
-            left: el.offsetLeft,
-            width: el.offsetWidth,
-          });
-        }
+        setIndicator({
+          left: el.offsetLeft,
+          width: el.offsetWidth,
+        });
       }
     }, [activeIndex]);
 
@@ -40,7 +58,6 @@ export const TabGroup = forwardRef<HTMLDivElement, TabGroupProps>(
       updateIndicator();
     }, [updateIndicator]);
 
-    // Recalculate on resize
     useEffect(() => {
       const observer = new ResizeObserver(updateIndicator);
       const container = tabsRef.current[0]?.parentElement;
@@ -48,10 +65,58 @@ export const TabGroup = forwardRef<HTMLDivElement, TabGroupProps>(
       return () => observer.disconnect();
     }, [updateIndicator]);
 
+    const findEnabled = useCallback(
+      (from: number, step: number): number => {
+        const len = tabs.length;
+        if (len === 0) return from;
+        let i = from;
+        for (let n = 0; n < len; n++) {
+          i = (i + step + len) % len;
+          if (!tabs[i].disabled) return i;
+        }
+        return from;
+      },
+      [tabs],
+    );
+
+    const activate = useCallback(
+      (index: number) => {
+        if (index !== activeIndex) onTabChange?.(index);
+        tabsRef.current[index]?.focus();
+      },
+      [activeIndex, onTabChange],
+    );
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      const isHorizontal = orientation !== 'vertical';
+      const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+      const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+
+      let nextIndex: number | null = null;
+      if (e.key === nextKey) {
+        nextIndex = findEnabled(activeIndex, 1);
+      } else if (e.key === prevKey) {
+        nextIndex = findEnabled(activeIndex, -1);
+      } else if (e.key === 'Home') {
+        nextIndex = findEnabled(-1, 1);
+      } else if (e.key === 'End') {
+        nextIndex = findEnabled(tabs.length, -1);
+      }
+
+      if (nextIndex !== null) {
+        e.preventDefault();
+        activate(nextIndex);
+      }
+    };
+
     return (
       <div
         ref={ref}
         role="tablist"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-orientation={orientation === 'vertical' ? 'vertical' : undefined}
+        onKeyDown={handleKeyDown}
         className={cn(styles.tabGroup, className)}
       >
         <div className={styles.tabsRow}>
@@ -60,8 +125,10 @@ export const TabGroup = forwardRef<HTMLDivElement, TabGroupProps>(
               key={tab.id ?? i}
               ref={el => { tabsRef.current[i] = el; }}
               id={tab.id}
+              controls={tab.panelId}
               label={tab.label}
               isSelected={i === activeIndex}
+              disabled={tab.disabled}
               onClick={() => onTabChange?.(i)}
             />
           ))}

package/src/components/Table/Table.module.css

@@ -43,6 +43,11 @@
   background-color: var(--color-background-translucent);
 }
 
+.headerCell.sortable:focus-visible {
+  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
+  outline-offset: calc(var(--dimension-space-025) * -1);
+}
+
 .sortIndicator {
   font-size: 12px;
   color: var(--color-foreground-secondary);
@@ -64,6 +69,11 @@
   cursor: pointer;
 }
 
+.rowClickable:focus-visible .cell {
+  background-color: var(--color-interaction-hover);
+  box-shadow: inset 0 0 0 var(--dimension-stroke-width-025) var(--color-interaction-focus);
+}
+
 .cell {
   display: flex;
   align-items: center;

package/src/components/Table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { cn } from '@/utils/cn';
 import { Text } from '@/components/Text';
 import styles from './Table.module.css';
@@ -109,41 +109,61 @@ export function Table<T>({
   };
 
   return (
-    <div className={cn(styles.tableWrapper, className)}>
+    <div className={cn(styles.tableWrapper, className)} aria-busy={loading || undefined}>
       <div className={styles.tableScroll}>
         <div className={styles.table} style={{ gridTemplateColumns }} role="table">
           {/* Header */}
           <div className={styles.headerRow} role="row">
-            {visibleColumns.map(col => (
-              <div
-                key={col.id}
-                className={cn(
-                  styles.headerCell,
-                  col.sortable && styles.sortable,
-                  col.align === 'right' && styles.alignRight,
-                  col.align === 'center' && styles.alignCenter
-                )}
-                role="columnheader"
-                onClick={() => col.sortable && handleSort(col.id)}
-                style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth } : undefined}
-              >
-                {typeof col.header === 'string' ? (
-                  <Text variant="text-body-small-emphasis" as="span" color="secondary">
-                    {col.header}
-                  </Text>
-                ) : col.header}
-                {sortState?.columnId === col.id && (
-                  <span className={styles.sortIndicator} aria-hidden>
-                    {sortState.direction === 'asc' ? '\u2191' : '\u2193'}
-                  </span>
-                )}
-              </div>
-            ))}
+            {visibleColumns.map(col => {
+              const isSorted = sortState?.columnId === col.id;
+              const ariaSort: 'ascending' | 'descending' | 'none' | undefined = col.sortable
+                ? (isSorted ? (sortState.direction === 'asc' ? 'ascending' : 'descending') : 'none')
+                : undefined;
+              const onHeaderActivate = () => col.sortable && handleSort(col.id);
+              return (
+                <div
+                  key={col.id}
+                  className={cn(
+                    styles.headerCell,
+                    col.sortable && styles.sortable,
+                    col.align === 'right' && styles.alignRight,
+                    col.align === 'center' && styles.alignCenter
+                  )}
+                  role="columnheader"
+                  aria-sort={ariaSort}
+                  tabIndex={col.sortable ? 0 : undefined}
+                  onClick={onHeaderActivate}
+                  onKeyDown={col.sortable ? (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      onHeaderActivate();
+                    }
+                  } : undefined}
+                  style={col.minWidth ? { minWidth: typeof col.minWidth === 'number' ? `${col.minWidth}px` : col.minWidth } : undefined}
+                >
+                  {typeof col.header === 'string' ? (
+                    <Text variant="text-body-small-emphasis" as="span" color="secondary">
+                      {col.header}
+                    </Text>
+                  ) : col.header}
+                  {isSorted && (
+                    <span className={styles.sortIndicator} aria-hidden>
+                      {sortState.direction === 'asc' ? '\u2191' : '\u2193'}
+                    </span>
+                  )}
+                </div>
+              );
+            })}
           </div>
 
           {/* Loading skeleton */}
           {loading && Array.from({ length: 5 }).map((_, i) => (
-            <div key={`skeleton-${i}`} className={styles.row} role="row">
+            <div
+              key={`skeleton-${i}`}
+              className={styles.row}
+              role={i === 0 ? 'status' : 'row'}
+              aria-label={i === 0 ? 'Loading' : undefined}
+            >
               {visibleColumns.map(col => (
                 <div key={col.id} className={styles.cell} role="cell">
                   <div className={styles.skeleton} />
@@ -162,16 +182,25 @@ export function Table<T>({
           {/* Data rows */}
           {!loading && pagedData.map((row, rowIndex) => {
             const isSelected = selectedRows?.has(rowIndex);
+            const isClickable = Boolean(onRowClick);
             return (
               <div
                 key={rowIndex}
                 className={cn(
                   styles.row,
                   isSelected && styles.rowSelected,
-                  onRowClick && styles.rowClickable
+                  isClickable && styles.rowClickable
                 )}
                 role="row"
+                tabIndex={isClickable ? 0 : undefined}
+                aria-selected={selectedRows ? Boolean(isSelected) : undefined}
                 onClick={() => onRowClick?.(row, rowIndex)}
+                onKeyDown={isClickable ? (e) => {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    onRowClick?.(row, rowIndex);
+                  }
+                } : undefined}
               >
                 {visibleColumns.map(col => (
                   <div

package/src/components/Tag/Tag.tsx

@@ -125,6 +125,9 @@ export const Tag = forwardRef<HTMLDivElement, TagProps>(
         }
       : undefined;
 
+    // Rendered as <div role="button"> rather than a native <button> because
+    // removable tags contain an inner <button> for the remove affordance, and
+    // nesting <button> inside <button> is invalid HTML.
     return (
       <div
         ref={ref}
@@ -133,8 +136,8 @@ export const Tag = forwardRef<HTMLDivElement, TagProps>(
         onClick={handleInteract}
         onKeyDown={handleKeyDown}
         role={isInteractive ? 'button' : undefined}
-        tabIndex={isInteractive && !inactive ? 0 : undefined}
-        aria-pressed={onPressedChange != null ? pressed : undefined}
+        tabIndex={isInteractive ? (inactive ? -1 : 0) : undefined}
+        aria-pressed={isInteractive && pressed !== undefined ? !!pressed : undefined}
         aria-disabled={inactive || undefined}
       >
         {Icon && <Icon size={iconSize} />}

package/src/components/Toast/Toast.tsx

@@ -100,6 +100,9 @@ interface ToastItemProps {
 const ToastItem: React.FC<ToastItemProps> = ({ data }) => {
   const [exiting, setExiting] = useState(false);
   const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  const remainingRef = useRef<number>(data.duration ?? 4000);
+  const startedAtRef = useRef<number>(0);
+  const pausedRef = useRef<boolean>(false);
 
   const dismiss = useCallback(() => {
     setExiting(true);
@@ -109,13 +112,41 @@ const ToastItem: React.FC<ToastItemProps> = ({ data }) => {
     }, 200);
   }, [data]);
 
-  useEffect(() => {
-    const duration = data.duration ?? 4000;
-    if (duration > 0) {
-      timerRef.current = setTimeout(dismiss, duration);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = undefined;
     }
-    return () => { if (timerRef.current) clearTimeout(timerRef.current); };
-  }, [data.duration, dismiss]);
+  }, []);
+
+  const startTimer = useCallback((ms: number) => {
+    if (ms <= 0) return;
+    startedAtRef.current = Date.now();
+    timerRef.current = setTimeout(dismiss, ms);
+  }, [dismiss]);
+
+  const pause = useCallback(() => {
+    if (pausedRef.current || !timerRef.current) return;
+    pausedRef.current = true;
+    const elapsed = Date.now() - startedAtRef.current;
+    remainingRef.current = Math.max(0, remainingRef.current - elapsed);
+    clearTimer();
+  }, [clearTimer]);
+
+  const resume = useCallback(() => {
+    if (!pausedRef.current) return;
+    pausedRef.current = false;
+    startTimer(remainingRef.current);
+  }, [startTimer]);
+
+  useEffect(() => {
+    remainingRef.current = data.duration ?? 4000;
+    pausedRef.current = false;
+    startTimer(remainingRef.current);
+    return clearTimer;
+  }, [data.duration, startTimer, clearTimer]);
+
+  const isNegative = data.intent === 'negative';
 
   return (
     <Surface
@@ -124,8 +155,12 @@ const ToastItem: React.FC<ToastItemProps> = ({ data }) => {
       elevation="floating"
       radius="lg"
       className={cn(styles.toast, exiting && styles.toastExit)}
-      role="status"
-      aria-live="polite"
+      role={isNegative ? 'alert' : 'status'}
+      aria-live={isNegative ? 'assertive' : 'polite'}
+      onMouseEnter={pause}
+      onMouseLeave={resume}
+      onFocus={pause}
+      onBlur={resume}
     >
       <Text variant="text-body-medium" as="span" color="inherit">
         {data.message}
@@ -159,6 +194,7 @@ export const ToastContainer = forwardRef<HTMLDivElement, ToastContainerProps>(
       <div
         ref={ref}
         className={cn(styles.container, styles[positionClass(position)])}
+        role="region"
         aria-label="Notifications"
       >
         {items.map(item => (

package/src/components/Toggle/Toggle.tsx

@@ -1,35 +1,37 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef } from 'react';
 import { cn } from '@/utils/cn';
 import styles from './Toggle.module.css';
 
-export interface ToggleProps {
+interface ToggleBaseProps {
   checked?: boolean;
   onChange?: (checked: boolean) => void;
   inactive?: boolean;
   className?: string;
-  'aria-label'?: string;
 }
 
-export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
-  ({ checked = false, onChange, inactive = false, className, 'aria-label': ariaLabel }, ref) => {
-    const [isPressed, setIsPressed] = useState(false);
+export type ToggleProps = ToggleBaseProps &
+  (
+    | { 'aria-label': string; 'aria-labelledby'?: never }
+    | { 'aria-label'?: never; 'aria-labelledby': string }
+  );
 
-    const handleMouseDown = (e: React.MouseEvent) => {
+export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
+  (
+    {
+      checked = false,
+      onChange,
+      inactive = false,
+      className,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+    },
+    ref,
+  ) => {
+    const handleClick = () => {
       if (inactive) return;
-      e.preventDefault();
-      setIsPressed(true);
-    };
-
-    const handleMouseUp = () => {
-      if (inactive || !isPressed) return;
-      setIsPressed(false);
       onChange?.(!checked);
     };
 
-    const handleMouseLeave = () => {
-      if (isPressed) setIsPressed(false);
-    };
-
     return (
       <button
         ref={ref}
@@ -37,16 +39,15 @@ export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
         role="switch"
         aria-checked={checked}
         aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledby}
         disabled={inactive}
         className={cn(styles.toggle, checked && styles.checked, inactive && styles.inactive, className)}
-        onMouseDown={handleMouseDown}
-        onMouseUp={handleMouseUp}
-        onMouseLeave={handleMouseLeave}
+        onClick={handleClick}
       >
         <span className={styles.thumb} />
       </button>
     );
-  }
+  },
 );
 
 Toggle.displayName = 'Toggle';