@ds-mo/ui 0.2.4 → 0.3.0

package/src/components/Radio/Radio.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useRef } from 'react';
 import { cn } from '@/utils/cn';
 import { Text } from '@/components/Text';
 import styles from './Radio.module.css';
@@ -16,8 +16,10 @@ export interface RadioGroupProps {
   onChange: (value: string) => void;
   /** Radio options to render. */
   options: RadioOption[];
-  /** Group label for accessibility. */
+  /** Accessible name for the group. One of `aria-label` or `aria-labelledby` is required. */
   'aria-label'?: string;
+  /** ID of an element labeling the group. One of `aria-label` or `aria-labelledby` is required. */
+  'aria-labelledby'?: string;
   /** Layout direction. */
   direction?: 'vertical' | 'horizontal';
   /** Disables the entire group. */
@@ -32,33 +34,111 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
       onChange,
       options,
       'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
       direction = 'vertical',
       inactive = false,
       className,
     },
     ref
-  ) => (
-    <div
-      ref={ref}
-      role="radiogroup"
-      aria-label={ariaLabel}
-      className={cn(
-        styles.group,
-        direction === 'horizontal' && styles.horizontal,
-        className
-      )}
-    >
-      {options.map(opt => (
-        <RadioItem
-          key={opt.value}
-          label={opt.label}
-          checked={value === opt.value}
-          inactive={inactive || opt.inactive}
-          onChange={() => onChange(opt.value)}
-        />
-      ))}
-    </div>
-  )
+  ) => {
+    if (!ariaLabel && !ariaLabelledBy) {
+      const env = (globalThis as { process?: { env?: { NODE_ENV?: string } } })
+        .process?.env?.NODE_ENV;
+      if (env !== 'production') {
+        console.warn(
+          'RadioGroup: an accessible name is required. Pass either `aria-label` or `aria-labelledby`.'
+        );
+      }
+    }
+
+    const itemRefs = useRef<Array<HTMLDivElement | null>>([]);
+
+    const isActive = (i: number) =>
+      i >= 0 && i < options.length && !inactive && !options[i].inactive;
+
+    const activeIndices = options.reduce<number[]>((acc, _, i) => {
+      if (isActive(i)) acc.push(i);
+      return acc;
+    }, []);
+
+    const selectedIdx = options.findIndex(o => o.value === value);
+    const focusableIdx = isActive(selectedIdx)
+      ? selectedIdx
+      : (activeIndices[0] ?? -1);
+
+    const focusAndSelect = (i: number) => {
+      itemRefs.current[i]?.focus();
+      if (options[i].value !== value) onChange(options[i].value);
+    };
+
+    const moveFocus = (from: number, delta: 1 | -1) => {
+      if (activeIndices.length === 0) return;
+      const pos = activeIndices.indexOf(from);
+      // If focus somehow lands on an inactive radio, anchor at the boundary so
+      // the first arrow keystroke moves to the nearest active option.
+      const startPos = pos === -1 ? (delta === 1 ? -1 : 0) : pos;
+      const nextPos =
+        (startPos + delta + activeIndices.length) % activeIndices.length;
+      focusAndSelect(activeIndices[nextPos]);
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
+      const target = e.target as HTMLElement;
+      const idx = itemRefs.current.findIndex(el => el === target);
+      if (idx === -1) return;
+
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowRight':
+          e.preventDefault();
+          moveFocus(idx, 1);
+          break;
+        case 'ArrowUp':
+        case 'ArrowLeft':
+          e.preventDefault();
+          moveFocus(idx, -1);
+          break;
+        case 'Home':
+          e.preventDefault();
+          if (activeIndices.length) focusAndSelect(activeIndices[0]);
+          break;
+        case 'End':
+          e.preventDefault();
+          if (activeIndices.length)
+            focusAndSelect(activeIndices[activeIndices.length - 1]);
+          break;
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        role="radiogroup"
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        onKeyDown={handleKeyDown}
+        className={cn(
+          styles.group,
+          direction === 'horizontal' && styles.horizontal,
+          className
+        )}
+      >
+        {options.map((opt, i) => (
+          <RadioItem
+            key={opt.value}
+            ref={el => {
+              itemRefs.current[i] = el;
+            }}
+            label={opt.label}
+            checked={value === opt.value}
+            inactive={inactive || opt.inactive}
+            tabIndex={i === focusableIdx ? 0 : -1}
+            onChange={() => onChange(opt.value)}
+          />
+        ))}
+      </div>
+    );
+  }
 );
 
 RadioGroup.displayName = 'RadioGroup';
@@ -70,27 +150,35 @@ export interface RadioItemProps {
   checked?: boolean;
   onChange?: () => void;
   inactive?: boolean;
+  /** Roving tabindex value. RadioGroup manages this; defaults to -1 when inactive, else 0. */
+  tabIndex?: number;
   className?: string;
 }
 
 export const RadioItem = forwardRef<HTMLDivElement, RadioItemProps>(
-  ({ label, checked = false, onChange, inactive = false, className }, ref) => {
-    const handleClick = () => {
+  (
+    { label, checked = false, onChange, inactive = false, tabIndex, className },
+    ref
+  ) => {
+    const handleActivate = () => {
       if (!inactive && !checked) onChange?.();
     };
 
+    const resolvedTabIndex = tabIndex ?? (inactive ? -1 : 0);
+
     return (
       <div
         ref={ref}
         role="radio"
         aria-checked={checked}
-        tabIndex={inactive ? -1 : 0}
+        aria-disabled={inactive || undefined}
+        tabIndex={resolvedTabIndex}
         className={cn(styles.radio, inactive && styles.inactive, className)}
-        onClick={handleClick}
+        onClick={handleActivate}
         onKeyDown={e => {
           if (e.key === ' ' || e.key === 'Enter') {
             e.preventDefault();
-            handleClick();
+            handleActivate();
           }
         }}
       >

package/src/components/Scrollbar/Scrollbar.module.css

@@ -17,6 +17,11 @@
 
 .content::-webkit-scrollbar { display: none; }
 
+.content:focus-visible {
+  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
+  outline-offset: calc(var(--dimension-space-025) * -1);
+}
+
 .track {
   position: absolute;
   top: 0; right: 0; bottom: 0;

package/src/components/Scrollbar/Scrollbar.tsx

@@ -158,7 +158,15 @@ export const Scrollbar: React.FC<ScrollbarProps> = ({
   const showThumb = thumbHeight > 0;
   const showThumbH = thumbWidth > 0;
   const showTrack = showTrackOnHover && (isPointerInside || isDragging || isDraggingH);
-
+  const isScrollable = showThumb || showThumbH;
+
+  // A11y model: the custom thumbs are a visual reskin of the native scrollbar,
+  // not a separate widget. The `.content` div retains native `overflow: auto`,
+  // so when it is focusable the browser handles arrow keys, Page Up/Down,
+  // Home/End, and Space for free — implementing the full `role="scrollbar"`
+  // ARIA pattern would just re-create that behavior. We therefore expose the
+  // scroll container itself as the keyboard target (tabIndex=0 only when
+  // content overflows) and hide the decorative thumbs from assistive tech.
   return (
     <div
       ref={containerRef}
@@ -168,15 +176,21 @@ export const Scrollbar: React.FC<ScrollbarProps> = ({
       data-dragging={isDragging || isDraggingH}
       data-show-track={showTrack ? 'true' : 'false'}
     >
-      <div ref={contentRef} className={styles.content}>{children}</div>
+      <div
+        ref={contentRef}
+        className={styles.content}
+        tabIndex={isScrollable ? 0 : undefined}
+      >
+        {children}
+      </div>
       {fadeOverlay}
       {showThumb && (
-        <div className={styles.track}>
+        <div className={styles.track} aria-hidden="true">
           <div ref={thumbRef} className={styles.thumb} style={{ height: `${thumbHeight}px`, top: `${thumbTop}px` }} onMouseDown={handleThumbMouseDown} />
         </div>
       )}
       {showThumbH && (
-        <div className={styles.trackHorizontal}>
+        <div className={styles.trackHorizontal} aria-hidden="true">
           <div ref={thumbHRef} className={styles.thumbHorizontal} style={{ width: `${thumbWidth}px`, left: `${thumbLeft}px` }} onMouseDown={handleThumbHMouseDown} />
         </div>
       )}

package/src/components/Select/Select.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState, useRef } from 'react';
+import React, { forwardRef, useId, useState, useRef, useEffect, useCallback } from 'react';
 import { Surface } from '@/components/Surface';
 import { Text } from '@/components/Text';
 import { Menu } from '@/components/Menu';
@@ -20,33 +20,152 @@ export interface SelectProps {
   inactive?: boolean;
   id?: string;
   chevronIcon?: IconComponent;
+  /** Accessible name. Required when no associated `<label htmlFor>` element exists. */
+  'aria-label'?: string;
+  /** Accessible name reference. Use when a visible label already exists outside the trigger. */
+  'aria-labelledby'?: string;
 }
 
 export const Select = forwardRef<HTMLDivElement, SelectProps>(
-  ({ value, onChange, options, placeholder = 'Select option', className, inactive = false, id, chevronIcon: ChevronIcon }, ref) => {
+  (
+    {
+      value,
+      onChange,
+      options,
+      placeholder = 'Select option',
+      className,
+      inactive = false,
+      id,
+      chevronIcon: ChevronIcon,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+    },
+    ref
+  ) => {
     const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(-1);
     const buttonRef = useRef<HTMLButtonElement>(null);
 
-    const selectedOption = options.find(opt => opt.value === value);
+    const reactId = useId();
+    const triggerId = id ?? `select-${reactId}`;
+    const listboxId = `${triggerId}-listbox`;
+    const getOptionId = useCallback((index: number) => `${triggerId}-option-${index}`, [triggerId]);
+
+    const selectedIndex = options.findIndex(opt => opt.value === value);
+    const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : undefined;
     const selectedLabel = selectedOption?.label || placeholder;
 
-    const menuItems: MenuItemData[] = options.map(option => ({
-      label: option.label,
-      onClick: () => {
+    const commitSelection = useCallback(
+      (index: number) => {
+        const option = options[index];
+        if (!option) return;
         onChange(option.value);
         setIsMenuOpen(false);
       },
+      [options, onChange]
+    );
+
+    const openWith = useCallback(
+      (initialIndex: number) => {
+        if (inactive || options.length === 0) return;
+        const clamped = Math.max(0, Math.min(options.length - 1, initialIndex));
+        setActiveIndex(clamped);
+        setIsMenuOpen(true);
+      },
+      [inactive, options.length]
+    );
+
+    useEffect(() => {
+      if (isMenuOpen) {
+        setActiveIndex(prev => {
+          if (prev >= 0 && prev < options.length) return prev;
+          return selectedIndex >= 0 ? selectedIndex : 0;
+        });
+      } else {
+        setActiveIndex(-1);
+      }
+    }, [isMenuOpen, options.length, selectedIndex]);
+
+    const menuItems: MenuItemData[] = options.map((option, index) => ({
+      label: option.label,
+      onClick: () => commitSelection(index),
       isSelected: option.value === value,
     }));
 
     const handleToggle = () => {
-      if (!inactive) setIsMenuOpen(prev => !prev);
+      if (inactive) return;
+      if (isMenuOpen) {
+        setIsMenuOpen(false);
+      } else {
+        openWith(selectedIndex >= 0 ? selectedIndex : 0);
+      }
     };
 
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (inactive || options.length === 0) return;
+      const last = options.length - 1;
+
+      if (!isMenuOpen) {
+        switch (event.key) {
+          case 'ArrowDown':
+          case 'ArrowUp':
+          case 'Enter':
+          case ' ':
+            event.preventDefault();
+            openWith(selectedIndex >= 0 ? selectedIndex : 0);
+            return;
+          case 'Home':
+            event.preventDefault();
+            openWith(0);
+            return;
+          case 'End':
+            event.preventDefault();
+            openWith(last);
+            return;
+          default:
+            return;
+        }
+      }
+
+      switch (event.key) {
+        case 'ArrowDown':
+          event.preventDefault();
+          setActiveIndex(prev => Math.min(last, (prev < 0 ? -1 : prev) + 1));
+          break;
+        case 'ArrowUp':
+          event.preventDefault();
+          setActiveIndex(prev => Math.max(0, (prev < 0 ? options.length : prev) - 1));
+          break;
+        case 'Home':
+          event.preventDefault();
+          setActiveIndex(0);
+          break;
+        case 'End':
+          event.preventDefault();
+          setActiveIndex(last);
+          break;
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+          if (activeIndex >= 0) commitSelection(activeIndex);
+          break;
+        case 'Escape':
+          event.preventDefault();
+          setIsMenuOpen(false);
+          break;
+        case 'Tab':
+          setIsMenuOpen(false);
+          break;
+      }
+    };
+
+    const activeDescendantId =
+      isMenuOpen && activeIndex >= 0 ? getOptionId(activeIndex) : undefined;
+
     return (
       <div ref={ref} className={`${styles.selectWrapper} ${className || ''}`}>
         <Surface
-          id={id}
+          id={triggerId}
           ref={buttonRef as React.RefObject<HTMLElement>}
           as="button"
           type="button"
@@ -56,12 +175,19 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
           selected={isMenuOpen}
           className={styles.selectButton}
           onClick={handleToggle}
+          onKeyDown={handleKeyDown}
           inactive={inactive}
+          role="combobox"
+          aria-haspopup="listbox"
+          aria-expanded={isMenuOpen}
+          aria-controls={isMenuOpen ? listboxId : undefined}
+          aria-activedescendant={activeDescendantId}
+          aria-label={ariaLabel}
+          aria-labelledby={ariaLabelledBy}
         >
           <Text
             variant="text-body-medium"
             as="span"
-           
             color={selectedOption ? 'primary' : 'secondary'}
           >
             {selectedLabel}
@@ -83,6 +209,10 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>(
           alignOffset={-4}
           matchAnchorWidth
           matchAnchorWidthOffset={8}
+          role="listbox"
+          id={listboxId}
+          activeIndex={activeIndex}
+          getOptionId={getOptionId}
         />
       </div>
     );

package/src/components/Sidebar/Sidebar.module.css

@@ -66,6 +66,13 @@
   opacity: 0.5;
 }
 
+.resizeHandle:focus-visible {
+  outline: var(--dimension-stroke-width-025) solid var(--color-border-brand);
+  outline-offset: var(--dimension-stroke-width-015);
+  background-color: var(--color-border-brand);
+  opacity: 0.5;
+}
+
 /* Sections */
 .section {
   display: flex;

package/src/components/Sidebar/Sidebar.tsx

@@ -18,8 +18,19 @@ export interface SidebarProps {
 
 const MINI_WIDTH = 56;
 const DEFAULT_WIDTH = 240;
+const MAX_WIDTH = 480;
 const MIN_DRAG_WIDTH = 180;
 const SNAP_THRESHOLD = 140;
+const KEYBOARD_STEP = 16;
+
+const FOCUSABLE_SELECTOR = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
 
 export const Sidebar = forwardRef<HTMLElement, SidebarProps>(
   ({
@@ -35,6 +46,7 @@ export const Sidebar = forwardRef<HTMLElement, SidebarProps>(
   }, ref) => {
     const internalRef = useRef<HTMLElement>(null);
     const sidebarRef = (ref as React.RefObject<HTMLElement>) || internalRef;
+    const triggerRef = useRef<HTMLElement | null>(null);
     const [isResizing, setIsResizing] = useState(false);
 
     const isMini = width === 'mini';
@@ -44,7 +56,6 @@ export const Sidebar = forwardRef<HTMLElement, SidebarProps>(
       if (!resizable || !onWidthChange) return;
       e.preventDefault();
       setIsResizing(true);
-      const startX = e.clientX;
 
       const handleMouseMove = (e: MouseEvent) => {
         const newWidth = e.clientX;
@@ -71,6 +82,39 @@ export const Sidebar = forwardRef<HTMLElement, SidebarProps>(
       document.addEventListener('mouseup', handleMouseUp);
     }, [resizable, onWidthChange]);
 
+    // Keyboard resize: arrows step, Home → mini, End → max.
+    // Stepping below MIN_DRAG_WIDTH snaps to 'mini'; stepping up from 'mini' snaps to 'default'.
+    const handleResizeKeyDown = useCallback((e: React.KeyboardEvent) => {
+      if (!resizable || !onWidthChange) return;
+      switch (e.key) {
+        case 'ArrowLeft': {
+          e.preventDefault();
+          if (width === 'mini') return;
+          const next = resolvedWidth - KEYBOARD_STEP;
+          onWidthChange(next < MIN_DRAG_WIDTH ? 'mini' : next);
+          break;
+        }
+        case 'ArrowRight': {
+          e.preventDefault();
+          if (width === 'mini') {
+            onWidthChange('default');
+            return;
+          }
+          const next = Math.min(resolvedWidth + KEYBOARD_STEP, MAX_WIDTH);
+          onWidthChange(next);
+          break;
+        }
+        case 'Home':
+          e.preventDefault();
+          onWidthChange('mini');
+          break;
+        case 'End':
+          e.preventDefault();
+          onWidthChange(MAX_WIDTH);
+          break;
+      }
+    }, [resizable, onWidthChange, width, resolvedWidth]);
+
     // Close sidebar on Escape (mobile)
     useEffect(() => {
       if (!isMobile || isCollapsed) return;
@@ -81,13 +125,62 @@ export const Sidebar = forwardRef<HTMLElement, SidebarProps>(
       return () => document.removeEventListener('keydown', handleEscape);
     }, [isMobile, isCollapsed, onToggle]);
 
+    // Mobile dialog: capture trigger, focus first element, trap Tab, restore focus on close.
+    const isMobileOpen = isMobile && !isCollapsed;
+    useEffect(() => {
+      if (!isMobileOpen) return;
+      triggerRef.current = (document.activeElement as HTMLElement) ?? null;
+
+      const container = sidebarRef.current;
+      if (!container) return;
+
+      const focusables = () =>
+        Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
+          (el) => !el.hasAttribute('aria-hidden') && el.offsetParent !== null,
+        );
+
+      const initial = focusables();
+      (initial[0] ?? container).focus();
+
+      const handleTab = (e: KeyboardEvent) => {
+        if (e.key !== 'Tab') return;
+        const items = focusables();
+        if (items.length === 0) {
+          e.preventDefault();
+          container.focus();
+          return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = document.activeElement as HTMLElement | null;
+        if (e.shiftKey && (active === first || !container.contains(active))) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && (active === last || !container.contains(active))) {
+          e.preventDefault();
+          first.focus();
+        }
+      };
+
+      document.addEventListener('keydown', handleTab);
+      return () => {
+        document.removeEventListener('keydown', handleTab);
+        triggerRef.current?.focus?.();
+        triggerRef.current = null;
+      };
+    }, [isMobileOpen, sidebarRef]);
+
     if (isCollapsed && !isMobile) return null;
 
+    const dialogProps = isMobileOpen
+      ? { role: 'dialog' as const, 'aria-modal': true, tabIndex: -1 }
+      : { role: 'navigation' as const };
+
     return (
       <>
-        {/* Mobile backdrop */}
+        {/* Mobile backdrop — mouse-only convenience; Escape handler covers keyboard. */}
         {isMobile && !isCollapsed && (
-          <div className={styles.backdrop} onClick={onToggle} aria-hidden />
+          <div className={styles.backdrop} onClick={onToggle} aria-hidden="true" />
         )}
         <aside
           ref={sidebarRef}
@@ -100,8 +193,8 @@ export const Sidebar = forwardRef<HTMLElement, SidebarProps>(
             className
           )}
           style={{ width: isCollapsed ? 0 : resolvedWidth }}
-          role="navigation"
           aria-label="Sidebar"
+          {...dialogProps}
         >
           <div className={styles.content}>
             {children}
@@ -115,9 +208,14 @@ export const Sidebar = forwardRef<HTMLElement, SidebarProps>(
             <div
               className={styles.resizeHandle}
               onMouseDown={handleMouseDown}
+              onKeyDown={handleResizeKeyDown}
               role="separator"
               aria-orientation="vertical"
               aria-label="Resize sidebar"
+              aria-valuenow={resolvedWidth}
+              aria-valuemin={MINI_WIDTH}
+              aria-valuemax={MAX_WIDTH}
+              tabIndex={0}
             />
           )}
         </aside>

package/src/components/Slider/Slider.module.css

@@ -13,7 +13,10 @@
   box-shadow: var(--effect-elevation-depressed-sm); pointer-events: none; z-index: 1;
 }
 
-.fillTrack { position: absolute; top: var(--dimension-space-025); right: 0; bottom: var(--dimension-space-025); left: 0; z-index: 1; }
+.fillTrack {
+  position: absolute; top: var(--dimension-space-025); right: 0; bottom: var(--dimension-space-025); left: 0;
+  z-index: 1; pointer-events: none;
+}
 
 .fill {
   position: absolute; left: var(--dimension-space-025); top: 0; bottom: 0;
@@ -22,6 +25,7 @@
   box-shadow: var(--effect-elevation-elevated-sm);
   border-radius: var(--dimension-radius-050);
   transition: opacity var(--effect-motion-short-2);
+  pointer-events: none;
 }
 
 .trackAtMin .fill { opacity: 0; }

package/src/components/Slider/Slider.stories.tsx

@@ -110,6 +110,31 @@ export const CustomRange: Story = {
   ),
 };
 
+const SIGNAL_LABELS = ['Off', 'Low', 'Medium', 'High', 'Max'];
+
+const SignalSlider = () => {
+  const [value, setValue] = useState(2);
+  return (
+    <Slider
+      label="Signal strength"
+      min={0}
+      max={4}
+      step={1}
+      value={value}
+      onChange={setValue}
+      valueText={SIGNAL_LABELS[value]}
+    />
+  );
+};
+
+export const NonNumericValueText: Story = {
+  render: () => (
+    <div style={{ width: 280 }}>
+      <SignalSlider />
+    </div>
+  ),
+};
+
 export const Inactive: Story = {
   render: () => (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 280 }}>