@ds-mo/ui 0.2.4 → 0.3.0

package/src/components/Banner/Banner.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { createPortal } from 'react-dom';
+import { Cross } from '@ds-mo/icons';
 import { Surface } from '@/components/Surface';
 import { Text } from '@/components/Text';
 import { getCssTimeMs } from '@/utils/css-tokens';
@@ -22,6 +23,8 @@ export interface BannerProps {
   className?: string;
   floating?: boolean;
   onDismiss?: () => void;
+  /** Accessible label for the dismiss button. Defaults to "Dismiss". */
+  dismissLabel?: string;
 }
 
 const getContentColorVar = (intent: BannerIntent, contrast: BannerContrast): string => {
@@ -38,6 +41,7 @@ export const Banner: React.FC<BannerProps> = ({
   className = '',
   floating = false,
   onDismiss,
+  dismissLabel = 'Dismiss',
 }) => {
   const toastDurationMs = getCssTimeMs('--effect-animation-delay-long-2', TOAST_DURATION_FALLBACK_MS);
   const messageColor = getContentColorVar(intent, contrast);
@@ -45,18 +49,28 @@ export const Banner: React.FC<BannerProps> = ({
   const dismissTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const scheduleDismiss = useCallback(() => {
+  const beginClose = useCallback(() => {
     if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
     if (closeTimerRef.current) clearTimeout(closeTimerRef.current);
-    dismissTimerRef.current = setTimeout(() => {
-      dismissTimerRef.current = null;
+    dismissTimerRef.current = null;
+    if (floating) {
       setIsClosing(true);
       closeTimerRef.current = setTimeout(() => {
         closeTimerRef.current = null;
         onDismiss?.();
       }, FADE_OUT_DURATION_MS);
+    } else {
+      onDismiss?.();
+    }
+  }, [floating, onDismiss]);
+
+  const scheduleDismiss = useCallback(() => {
+    if (dismissTimerRef.current) clearTimeout(dismissTimerRef.current);
+    dismissTimerRef.current = setTimeout(() => {
+      dismissTimerRef.current = null;
+      beginClose();
     }, toastDurationMs);
-  }, [onDismiss, toastDurationMs]);
+  }, [beginClose, toastDurationMs]);
 
   useEffect(() => {
     if (floating && message) scheduleDismiss();
@@ -66,10 +80,16 @@ export const Banner: React.FC<BannerProps> = ({
     };
   }, [floating, message, scheduleDismiss]);
 
+  const isAssertive = intent === 'negative';
+  const role = isAssertive ? 'alert' : 'status';
+  const ariaLive = isAssertive ? undefined : 'polite';
+
   const content = (
     <div
       className={`${styles.bannerWrapper} ${className}`.trim()}
       style={{ '--banner-content': messageColor } as React.CSSProperties}
+      role={role}
+      aria-live={ariaLive}
     >
       <Surface
         elevation={floating ? 'floating' : 'elevated'}
@@ -87,6 +107,16 @@ export const Banner: React.FC<BannerProps> = ({
           <Text variant="text-body-medium" as="span" className={styles.message}>
             {message}
           </Text>
+          {onDismiss && (
+            <button
+              type="button"
+              className={styles.dismiss}
+              onClick={beginClose}
+              aria-label={dismissLabel}
+            >
+              <Cross size={16} />
+            </button>
+          )}
         </div>
       </Surface>
     </div>

package/src/components/Button/Button.stories.tsx

@@ -66,7 +66,7 @@ const ELEVATIONS: ButtonElevation[] = ['elevated', 'flat', 'none', 'floating'];
 
 const col: React.CSSProperties = { display: 'flex', flexDirection: 'column', gap: 8, alignItems: 'flex-start' };
 const row: React.CSSProperties = { display: 'flex', gap: 8, alignItems: 'center' };
-const lbl = (text: string): React.CSSProperties => ({ fontSize: 10, fontFamily: 'monospace', color: '#888', minWidth: 80, flexShrink: 0 });
+const lbl = (_text: string): React.CSSProperties => ({ fontSize: 10, fontFamily: 'monospace', color: '#888', minWidth: 80, flexShrink: 0 });
 const section = (text: string) => (
   <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase', color: '#555', marginTop: 8 }}>
     {text}

package/src/components/Button/Button.tsx

@@ -14,13 +14,11 @@ export type ButtonSize     = 'xs' | 'sm' | 'md' | 'lg';
 export type ButtonContrast = 'strong' | 'bold' | 'medium' | 'faint';
 export type ButtonBackground = 'faint' | 'medium' | 'bold' | 'strong' | 'always-dark';
 
-export interface ButtonProps {
+interface ButtonBaseProps {
   /** Polymorphic element type. Defaults to 'button'. */
   as?: React.ElementType;
   /** Visual variant. Defaults to 'primary'. */
   variant?: ButtonVariant;
-  /** Label text. */
-  label?: string;
   /** Leading icon component from @ds-mo/icons. */
   icon?: IconComponent;
   /** Semantic intent. Defaults to 'brand'. */
@@ -67,12 +65,24 @@ export interface ButtonProps {
   inactive?: boolean;
   type?: 'button' | 'submit' | 'reset';
   id?: string;
-  'aria-label'?: string;
   href?: string;
   target?: string;
   rel?: string;
 }
 
+/**
+ * Accessible-name requirement: a Button must expose text via `label`,
+ * `aria-label`, or `aria-labelledby`. Icon-only buttons that omit all three
+ * fail at the call site (TypeScript), with a runtime warning as a soft
+ * fallback for callers that bypass the type system.
+ */
+type ButtonAccessibleNameProps =
+  | { label: string; 'aria-label'?: string; 'aria-labelledby'?: string }
+  | { label?: string; 'aria-label': string; 'aria-labelledby'?: string }
+  | { label?: string; 'aria-label'?: string; 'aria-labelledby': string };
+
+export type ButtonProps = ButtonBaseProps & ButtonAccessibleNameProps;
+
 const ICON_SIZE_MAP: Record<ButtonSize, number> = { xs: 12, sm: 16, md: 20, lg: 24 };
 
 const TEXT_STYLE_MAP: Record<ButtonSize, string> = {
@@ -84,8 +94,8 @@ const TEXT_STYLE_MAP: Record<ButtonSize, string> = {
 
 
 export const Button = forwardRef<HTMLElement, ButtonProps>(
-  (
-    {
+  (props, ref) => {
+    const {
       as,
       variant = 'primary',
       label,
@@ -109,14 +119,16 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(
       type = 'button',
       id,
       'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
       href,
       target,
       rel,
-    },
-    ref
-  ) => {
+    } = props;
+
     const Component = (as ?? 'button') as React.ElementType;
     const isButton = !as || as === 'button';
+    const isLink = as === 'a';
+    const isCustomInteractive = !isButton && !isLink;
     const isInteractive = !inactive && !loading;
 
     const hasIcon = !!Icon;
@@ -153,7 +165,11 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(
       className,
     );
 
-    const resolvedAriaLabel = ariaLabel || label || 'button';
+    if (isIconOnly && !ariaLabel && !ariaLabelledBy) {
+      console.warn(
+        '[@ds-mo/ui Button] Icon-only Button is missing an accessible name. Provide `label`, `aria-label`, or `aria-labelledby`.'
+      );
+    }
 
     const extraProps: Record<string, unknown> = {};
     if (isButton) {
@@ -164,6 +180,19 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(
     if (target) extraProps.target = target;
     if (rel) extraProps.rel = rel;
 
+    if (isCustomInteractive) {
+      extraProps.role = 'button';
+      extraProps.tabIndex = isInteractive ? 0 : -1;
+      if (isInteractive) {
+        extraProps.onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            (e.currentTarget as HTMLElement).click();
+          }
+        };
+      }
+    }
+
     return (
       <Component
         ref={ref}
@@ -173,7 +202,9 @@ export const Button = forwardRef<HTMLElement, ButtonProps>(
         onClick={isInteractive ? onClick : undefined}
         onMouseEnter={isInteractive ? onMouseEnter : undefined}
         onMouseLeave={isInteractive ? onMouseLeave : undefined}
-        aria-label={resolvedAriaLabel}
+        aria-label={ariaLabel}
+        aria-labelledby={ariaLabelledBy}
+        aria-disabled={inactive || loading || undefined}
         aria-busy={loading || undefined}
         {...extraProps}
       >

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useId } from 'react';
 import { cn } from '@/utils/cn';
 import { Text } from '@/components/Text';
 import type { IconComponent } from '@/types/icons';
@@ -34,6 +34,7 @@ export const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
     },
     ref
   ) => {
+    const labelId = useId();
     const handleClick = () => {
       if (!inactive) onChange?.(!checked);
     };
@@ -46,7 +47,9 @@ export const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
         ref={ref}
         role="checkbox"
         aria-checked={indeterminate ? 'mixed' : checked}
-        aria-inactive={inactive}
+        aria-disabled={inactive || undefined}
+        aria-labelledby={labelId}
+        data-inactive={inactive || undefined}
         tabIndex={inactive ? -1 : 0}
         className={cn(styles.checkbox, inactive && styles.inactive, className)}
         onClick={handleClick}
@@ -57,7 +60,7 @@ export const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
             {(checked || indeterminate) && <span className={styles.checkmark}>{indeterminate ? '−' : '✓'}</span>}
           </span>
         )}
-        <Text variant="text-body-medium" as="span" color="inherit">
+        <Text id={labelId} variant="text-body-medium" as="span" color="inherit">
           {label}
         </Text>
       </div>

package/src/components/Field/Field.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useId, isValidElement, cloneElement } from 'react';
 import { cn } from '@/utils/cn';
 import { Text } from '@/components/Text';
 import styles from './Field.module.css';
@@ -11,12 +11,25 @@ export interface FieldProps {
 }
 
 export const Field = forwardRef<HTMLDivElement, FieldProps>(
-  ({ label, children, id, className }, ref) => (
-    <div ref={ref} className={cn(styles.field, className)}>
-      <Text variant="text-body-small-emphasis" as="label" htmlFor={id}>{label}</Text>
-      {children}
-    </div>
-  )
+  ({ label, children, id, className }, ref) => {
+    const generatedId = useId();
+    const fieldId = id ?? generatedId;
+
+    let content = children;
+    if (isValidElement(children)) {
+      const childProps = children.props as { id?: string };
+      if (childProps.id === undefined) {
+        content = cloneElement(children as React.ReactElement<{ id?: string }>, { id: fieldId });
+      }
+    }
+
+    return (
+      <div ref={ref} className={cn(styles.field, className)}>
+        <Text variant="text-body-small-emphasis" as="label" htmlFor={fieldId}>{label}</Text>
+        {content}
+      </div>
+    );
+  }
 );
 
 Field.displayName = 'Field';

package/src/components/Input/Input.module.css

@@ -1,3 +1,10 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dimension-space-050);
+  width: 100%;
+}
+
 .wrapper {
   width: 100%;
   height: var(--dimension-size-400);
@@ -13,6 +20,20 @@
   box-shadow: inset 0 0 0 1.25px var(--color-foreground-bold-brand);
 }
 
+.wrapperError {
+  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);
+}
+
+.wrapperError:focus-within {
+  box-shadow: inset 0 0 0 1.25px var(--color-border-bold-negative);
+}
+
+.errorText {
+  font-size: var(--typography-fontsize-sm);
+  line-height: var(--typography-lineheight-sm);
+  color: var(--color-foreground-bold-negative);
+}
+
 .row {
   display: flex;
   align-items: center;

package/src/components/Input/Input.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useEffect, useId } from 'react';
 import { cn } from '@/utils/cn';
 import type { IconComponent } from '@/types/icons';
 import styles from './Input.module.css';
@@ -20,8 +20,19 @@ export interface InputProps {
   /** Icon for clear button (search type). */
   clearIcon?: IconComponent;
   'aria-label'?: string;
+  'aria-labelledby'?: string;
+  'aria-describedby'?: string;
+  /** Marks the input as invalid; sets `aria-invalid` and applies error styling. */
+  error?: boolean;
+  /** Message rendered below the input when `error` is true; auto-linked via `aria-describedby`. */
+  errorMessage?: string;
 }
 
+const isDevEnv = (): boolean => {
+  const meta = import.meta as { env?: { DEV?: boolean } };
+  return Boolean(meta.env?.DEV);
+};
+
 export const Input = forwardRef<HTMLDivElement, InputProps>(
   (
     {
@@ -37,37 +48,67 @@ export const Input = forwardRef<HTMLDivElement, InputProps>(
       suffix,
       clearIcon: ClearIcon,
       'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
+      error = false,
+      errorMessage,
     },
     ref
   ) => {
+    const reactId = useId();
+    const errorId = `${reactId}-error`;
     const showClear = type === 'search' && value.length > 0 && !inactive;
+    const showErrorMessage = error && Boolean(errorMessage);
+
+    const describedBy =
+      [ariaDescribedBy, showErrorMessage ? errorId : undefined].filter(Boolean).join(' ') ||
+      undefined;
+
+    useEffect(() => {
+      if (!isDevEnv()) return;
+      if (!id && !ariaLabel && !ariaLabelledBy) {
+        console.warn(
+          '[@ds-mo/ui] <Input> is missing an accessible name. Provide one of: `id` (paired with a <label htmlFor>), `aria-label`, or `aria-labelledby`.'
+        );
+      }
+    }, [id, ariaLabel, ariaLabelledBy]);
 
     const handleClear = () => {
       onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
     };
 
     return (
-      <div ref={ref} className={cn(styles.wrapper, className)}>
-        <div className={styles.row}>
-          <input
-            type={type}
-            id={id}
-            value={value}
-            onChange={onChange}
-            onKeyDown={onKeyDown}
-            placeholder={placeholder}
-            className={styles.input}
-            autoFocus={autoFocus}
-            disabled={inactive}
-            aria-label={ariaLabel}
-          />
-          {showClear && (
-            <button type="button" className={styles.clearButton} onClick={handleClear} aria-label="Clear">
-              {ClearIcon ? <ClearIcon size={16} /> : <span aria-hidden>&times;</span>}
-            </button>
-          )}
-          {suffix && <div className={styles.suffix}>{suffix}</div>}
+      <div className={styles.container}>
+        <div ref={ref} className={cn(styles.wrapper, error && styles.wrapperError, className)}>
+          <div className={styles.row}>
+            <input
+              type={type}
+              id={id}
+              value={value}
+              onChange={onChange}
+              onKeyDown={onKeyDown}
+              placeholder={placeholder}
+              className={styles.input}
+              autoFocus={autoFocus}
+              disabled={inactive}
+              aria-label={ariaLabel}
+              aria-labelledby={ariaLabelledBy}
+              aria-describedby={describedBy}
+              aria-invalid={error || undefined}
+            />
+            {showClear && (
+              <button type="button" className={styles.clearButton} onClick={handleClear} aria-label="Clear">
+                {ClearIcon ? <ClearIcon size={16} /> : <span aria-hidden>&times;</span>}
+              </button>
+            )}
+            {suffix && <div className={styles.suffix}>{suffix}</div>}
+          </div>
         </div>
+        {showErrorMessage && (
+          <div id={errorId} role="alert" className={styles.errorText}>
+            {errorMessage}
+          </div>
+        )}
       </div>
     );
   }

package/src/components/Loader/Loader.module.css

@@ -3,6 +3,23 @@
   animation: spin 0.75s linear infinite;
 }
 
+.status {
+  display: inline-flex;
+  align-items: center;
+}
+
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
 @keyframes spin {
   from { transform: rotate(0deg); }
   to   { transform: rotate(360deg); }

package/src/components/Loader/Loader.stories.tsx

@@ -14,6 +14,15 @@ type Story = StoryObj<typeof Loader>;
 
 export const Default: Story = {};
 
+/**
+ * Standalone usage with an accessible label. Wraps the spinner in a
+ * `role="status"` live region and renders a visually-hidden label so
+ * screen readers announce the loading state on mount.
+ */
+export const WithLabel: Story = {
+  args: { label: 'Loading' },
+};
+
 /** Shows how stroke weight scales naturally with size — same as icon strokes. */
 export const Sizes: Story = {
   render: () => (

package/src/components/Loader/Loader.tsx

@@ -9,6 +9,17 @@ export interface LoaderProps {
    */
   size?: number;
   className?: string;
+  /**
+   * Accessible label announced by assistive tech when the Loader is used
+   * standalone. When provided, the spinner is wrapped in a live region
+   * (`role="status"`, `aria-live="polite"`) and the label is rendered
+   * visually-hidden so screen readers announce it on mount.
+   *
+   * Omit when the Loader is rendered inside a host that already conveys
+   * busy state (e.g. a Button with `aria-busy`) — the spinner stays
+   * `aria-hidden` to avoid double-announcing.
+   */
+  label?: string;
 }
 
 /**
@@ -19,25 +30,36 @@ export interface LoaderProps {
  *   - r=5  → 10px circle in a 16px box (3px optical padding each side)
  *   - strokeWidth=1 at native size → scales to 1.25px at 20px, 1.5px at 24px
  */
-export const Loader = ({ size = 20, className }: LoaderProps) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 16 16"
-    fill="none"
-    className={`${styles.loader}${className ? ` ${className}` : ''}`}
-    aria-hidden="true"
-  >
-    <circle
-      cx="8"
-      cy="8"
-      r="5"
-      stroke="currentColor"
-      strokeWidth="1"
-      strokeLinecap="round"
-      strokeDasharray="23.6 7.9"
-    />
-  </svg>
-);
+export const Loader = ({ size = 20, className, label }: LoaderProps) => {
+  const svg = (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      className={`${styles.loader}${className ? ` ${className}` : ''}`}
+      aria-hidden="true"
+    >
+      <circle
+        cx="8"
+        cy="8"
+        r="5"
+        stroke="currentColor"
+        strokeWidth="1"
+        strokeLinecap="round"
+        strokeDasharray="23.6 7.9"
+      />
+    </svg>
+  );
+
+  if (label === undefined) return svg;
+
+  return (
+    <span role="status" aria-live="polite" className={styles.status}>
+      {svg}
+      <span className={styles.visuallyHidden}>{label}</span>
+    </span>
+  );
+};
 
 Loader.displayName = 'Loader';

package/src/components/Menu/DestructiveMenuItem.tsx

@@ -7,25 +7,30 @@ export interface DestructiveMenuItemProps {
   onClick: () => void;
   holdDuration?: number;
   subtext?: string;
+  tabIndex?: number;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  onFocus?: (e: React.FocusEvent<HTMLButtonElement>) => void;
 }
 
 export const DestructiveMenuItem = forwardRef<HTMLButtonElement, DestructiveMenuItemProps>(
-  ({ label, onClick, holdDuration = 4000, subtext }, ref) => {
+  ({ label, onClick, holdDuration = 4000, subtext, tabIndex, onKeyDown, onFocus }, ref) => {
     const [progress, setProgress] = useState(0);
     const pressTimerRef = useRef<number | null>(null);
     const startTimeRef = useRef<number>(0);
     const animationFrameRef = useRef<number | null>(null);
+    const isHoldingRef = useRef(false);
 
     const resetState = () => {
       setProgress(0);
+      isHoldingRef.current = false;
       if (pressTimerRef.current) { clearTimeout(pressTimerRef.current); pressTimerRef.current = null; }
       if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); animationFrameRef.current = null; }
     };
 
-    const handleMouseDown = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      e.preventDefault();
-      if (holdDuration === 0) { onClick(); return; }
+    const startHold = () => {
+      if (isHoldingRef.current) return;
+      isHoldingRef.current = true;
+      if (holdDuration === 0) { onClick(); resetState(); return; }
       startTimeRef.current = performance.now();
       const animate = () => {
         const elapsed = performance.now() - startTimeRef.current;
@@ -37,9 +42,42 @@ export const DestructiveMenuItem = forwardRef<HTMLButtonElement, DestructiveMenu
       pressTimerRef.current = window.setTimeout(() => { onClick(); resetState(); }, holdDuration);
     };
 
+    const handleMouseDown = (e: React.MouseEvent) => {
+      e.stopPropagation();
+      e.preventDefault();
+      startHold();
+    };
+
     const handleMouseUp = (e: React.MouseEvent) => { e.stopPropagation(); resetState(); };
     const handleMouseLeave = (e: React.MouseEvent) => { e.stopPropagation(); resetState(); };
 
+    const isSpaceKey = (e: React.KeyboardEvent) => e.key === ' ' || e.key === 'Spacebar';
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (isSpaceKey(e)) {
+        e.preventDefault();
+        if (e.repeat) return;
+        e.stopPropagation();
+        startHold();
+        return;
+      }
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        return;
+      }
+      onKeyDown?.(e);
+    };
+
+    const handleKeyUp = (e: React.KeyboardEvent<HTMLButtonElement>) => {
+      if (isSpaceKey(e)) {
+        e.preventDefault();
+        e.stopPropagation();
+        resetState();
+      }
+    };
+
+    const handleBlur = () => { resetState(); };
+
     useEffect(() => () => { resetState(); }, []);
 
     return (
@@ -49,9 +87,24 @@ export const DestructiveMenuItem = forwardRef<HTMLButtonElement, DestructiveMenu
         onMouseDown={handleMouseDown}
         onMouseUp={handleMouseUp}
         onMouseLeave={handleMouseLeave}
+        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
+        onBlur={handleBlur}
+        onFocus={onFocus}
         type="button"
+        role="menuitem"
+        tabIndex={tabIndex ?? -1}
+        aria-keyshortcuts="Space"
       >
-        <div className={styles.progressFill} style={{ width: `${progress}%` }} />
+        <div
+          className={styles.progressFill}
+          style={{ width: `${progress}%` }}
+          role="progressbar"
+          aria-valuenow={Math.round(progress)}
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-label={`Hold to confirm ${label}`}
+        />
         <div className={styles.content}>
           <Text variant="text-body-medium" as="span" className={styles.label}>{label}</Text>
           {subtext && <Text variant="text-body-small" as="span" className={styles.subtext}>{subtext}</Text>}