@toolr/ui-design 0.1.7 → 0.1.8

package/components/hooks/use-modal-behavior.ts

@@ -1,9 +1,9 @@
-import { useEffect } from 'react'
+import { useEffect, type RefObject } from 'react'
 
 /**
- * Shared modal behavior: Escape key to close + body overflow lock.
+ * Shared modal behavior: Escape key to close + body overflow lock + focus trap.
  */
-export function useModalBehavior(isOpen: boolean, onClose: () => void): void {
+export function useModalBehavior(isOpen: boolean, onClose: () => void, containerRef?: RefObject<HTMLElement | null>): void {
   // Escape key handler
   useEffect(() => {
     if (!isOpen) return
@@ -21,4 +21,33 @@ export function useModalBehavior(isOpen: boolean, onClose: () => void): void {
     document.body.style.overflow = 'hidden'
     return () => { document.body.style.overflow = prev }
   }, [isOpen])
+
+  // Focus trap: keep Tab/Shift+Tab within the modal
+  useEffect(() => {
+    if (!isOpen || !containerRef?.current) return
+    const container = containerRef.current
+
+    // Auto-focus first focusable element
+    const focusable = container.querySelectorAll<HTMLElement>(
+      'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+    )
+    if (focusable.length > 0) focusable[0].focus()
+
+    const handler = (e: KeyboardEvent) => {
+      if (e.key !== 'Tab') return
+      const nodes = container.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+      if (nodes.length === 0) return
+      const first = nodes[0]
+      const last = nodes[nodes.length - 1]
+      if (e.shiftKey) {
+        if (document.activeElement === first) { e.preventDefault(); last.focus() }
+      } else {
+        if (document.activeElement === last) { e.preventDefault(); first.focus() }
+      }
+    }
+    document.addEventListener('keydown', handler)
+    return () => document.removeEventListener('keydown', handler)
+  }, [isOpen, containerRef])
 }

package/components/sections/golden-snapshots/file-diff-viewer.tsx

@@ -391,7 +391,7 @@ export function FileDiffViewer({ sync, componentLabels, monacoTheme, renderFileI
               />
               {devtools && hasUnsavedChanges && (
                 <IconButton
-                  icon={<Save className={saving ? 'animate-pulse' : ''} />}
+                  icon={<Save className={saving ? 'animate-spin' : ''} />}
                   onClick={handleSaveLiveFile}
                   disabled={saving}
                   color="amber"

package/components/sections/golden-snapshots/status-overview.tsx

@@ -165,7 +165,7 @@ export function StatusOverview({
                 tooltip={{ title: 'Reset options', description: 'Reset live files to golden' }}
               />
               {showResetMenu && (
-                <div ref={resetMenuDropdownRef} className="absolute right-0 top-full mt-1 w-56 bg-neutral-850 border border-neutral-700 rounded-lg shadow-xl z-50 py-1 overflow-hidden">
+                <div ref={resetMenuDropdownRef} className="absolute right-0 top-full mt-1 w-56 bg-neutral-850 border border-neutral-700 rounded-lg shadow-lg z-50 py-1 overflow-hidden">
                   <button
                     onClick={() => { onResetAll(); setShowResetMenu(false) }}
                     className="w-full text-left px-3 py-2 text-md text-neutral-300 hover:bg-neutral-700 transition-colors"

package/components/ui/action-dialog.tsx

@@ -11,6 +11,7 @@
  * Footer: FormActions (status text, cancel/submit)
  */
 
+import { useId, useRef } from 'react'
 import { createPortal } from 'react-dom'
 import { useModalBehavior } from '../hooks/use-modal-behavior.ts'
 import { iconMap, IconButton } from './icon-button.tsx'
@@ -130,7 +131,10 @@ export function ActionDialog({
   children,
   className,
 }: ActionDialogProps) {
-  useModalBehavior(true, () => onCancel?.())
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const titleId = useId()
+
+  useModalBehavior(true, () => onCancel?.(), dialogRef)
 
   const Icon = icon ? iconMap[icon] : null
   const hasSelection = ((items && items.length > 0) || (presets && presets.length > 0)) && selectedIds && onSelect
@@ -150,10 +154,14 @@ export function ActionDialog({
 
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-[var(--dialog-backdrop)] backdrop-blur-sm" onClick={onCancel} />
+      <div className="absolute inset-0 bg-[var(--dialog-backdrop)]" onClick={onCancel} aria-hidden="true" />
       <div
+        ref={dialogRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
         className={cn(
-          'relative bg-neutral-950 border border-neutral-700 rounded-xl shadow-2xl w-full max-w-[800px] mx-4 flex flex-col',
+          'relative bg-neutral-950 border border-neutral-700 rounded-xl shadow-lg w-full max-w-[800px] mx-4 flex flex-col',
           'max-h-[80vh]',
           className,
         )}
@@ -166,12 +174,12 @@ export function ActionDialog({
               style={iconColor ? { color: iconColor } : undefined}
             />
           )}
-          <div className="flex flex-col">
-            <span className="text-md font-semibold text-neutral-200">
+          <div className="flex flex-col min-w-0">
+            <span id={titleId} className="text-md font-semibold text-neutral-200 truncate">
               {title}
             </span>
             {subtitle && (
-              <span className="text-sm text-neutral-500">{subtitle}</span>
+              <span className="text-sm text-neutral-500 truncate">{subtitle}</span>
             )}
           </div>
           <div className="flex-1" />

package/components/ui/ai-action-button.tsx

@@ -119,8 +119,6 @@ export function AiActionButton({
   }, [tooltip, forceDisabled, disabledReason, isRunning, isCompleted, runningTooltipTitle, completedTooltipTitle])
 
   const isDisabled = forceDisabled
-  const blinkClass = isCompleted ? 'animate-pulse' : ''
-
   return (
     <IconButton
       icon={resolvedIcon}
@@ -129,8 +127,8 @@ export function AiActionButton({
       disabled={isDisabled}
       onClick={isDisabled ? () => {} : onClick}
       tooltip={resolvedTooltip}
-      active={isRunning}
-      className={`${className ?? ''} ${blinkClass}`.trim() || undefined}
+      active={isRunning || isCompleted}
+      className={className}
       testId={testId}
     />
   )

package/components/ui/badge.tsx

@@ -13,7 +13,9 @@
  * - 5 size variants (xss, xs, sm, md, lg)
  */
 
+import { memo } from 'react'
 import { FORM_COLORS, type AccentColor } from '../lib/form-colors.ts'
+import { cn } from '../lib/cn.ts'
 
 export type BadgeColor = AccentColor
 
@@ -33,11 +35,11 @@ const sizeClasses = {
   lg: 'min-w-[22px] h-[22px] px-1.5 text-sm',
 }
 
-export function Badge({
+export const Badge = memo(function Badge({
   value,
   color = 'neutral',
   size = 'sm',
-  className = '',
+  className,
   testId,
 }: BadgeProps) {
   const display = typeof value === 'number' && value > 99 ? '99+' : value
@@ -45,9 +47,15 @@ export function Badge({
   return (
     <span
       data-testid={testId}
-      className={`inline-flex items-center justify-center border rounded-full font-medium leading-none tabular-nums ${FORM_COLORS[color].border} ${FORM_COLORS[color].accent} ${sizeClasses[size]} ${className}`}
+      className={cn(
+        'inline-flex items-center justify-center border rounded-full font-medium leading-none tabular-nums',
+        FORM_COLORS[color].border,
+        FORM_COLORS[color].accent,
+        sizeClasses[size],
+        className,
+      )}
     >
       {display}
     </span>
   )
-}
+})

package/components/ui/breadcrumb.tsx

@@ -67,7 +67,7 @@ export function Breadcrumb({
   const isBox = variant === 'box'
 
   return (
-    <nav className={cn('flex items-center', className)}>
+    <nav className={cn('flex items-center min-w-0', className)}>
       <div className={cn(
         'flex items-center gap-1',
         isBox && [s.px, s.py, 'bg-neutral-800/50 border border-neutral-700/50 rounded-lg'],
@@ -79,14 +79,14 @@ export function Breadcrumb({
           const isFirstPlain = !isBox && index === 0
 
           return (
-            <div key={segment.id} className="flex items-center gap-1">
+            <div key={segment.id} className="flex items-center gap-1 min-w-0">
               {index > 0 && <Separator type={separator} size={size} />}
               {isClickable ? (
                 <button
                   type="button"
                   onClick={segment.onClick}
                   className={cn(
-                    'flex items-center gap-1.5 pr-2 py-0.5 rounded-md transition-colors cursor-pointer',
+                    'flex items-center gap-1.5 pr-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0',
                     isFirstPlain ? 'pl-0' : 'pl-2',
                     s.text,
                     'font-medium hover:text-white',
@@ -94,12 +94,12 @@ export function Breadcrumb({
                   )}
                 >
                   {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
-                  <span>{segment.label}</span>
+                  <span className="truncate max-w-[200px]">{segment.label}</span>
                 </button>
               ) : (
                 <div
                   className={cn(
-                    'flex items-center gap-1.5 pr-2 py-0.5 rounded-md',
+                    'flex items-center gap-1.5 pr-2 py-0.5 rounded-md min-w-0',
                     isFirstPlain ? 'pl-0' : 'pl-2',
                     s.text,
                     isLast

package/components/ui/checkbox.tsx

@@ -9,6 +9,7 @@
 
 import { Check } from 'lucide-react'
 import { type AccentColor } from '../lib/form-colors.ts'
+import { cn } from '../lib/cn.ts'
 
 export type CheckboxSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg'
 
@@ -50,6 +51,8 @@ export interface CheckboxProps {
   color?: CheckboxColor
   variant?: CheckboxVariant
   className?: string
+  /** Accessible label — required for screen readers */
+  'aria-label'?: string
   /** Test ID for E2E testing */
   testId?: string
 }
@@ -61,28 +64,31 @@ export function Checkbox({
   size = 'sm',
   color = 'blue',
   variant = 'outline',
-  className = '',
+  className,
+  'aria-label': ariaLabel,
   testId,
 }: CheckboxProps) {
   const s = CHECKBOX_SIZES[size]
   const c = CHECKBOX_COLORS[color]
-  const uncheckedStyle = variant === 'outline'
-    ? `${c.border} ${c.hover}`
-    : `bg-neutral-700 ${c.border} ${c.hover}`
   return (
     <button
       type="button"
+      role="checkbox"
+      aria-checked={checked}
+      aria-label={ariaLabel}
       onClick={() => !disabled && onChange(!checked)}
       disabled={disabled}
       data-testid={testId}
-      className={`
-        ${s.box} rounded border flex items-center justify-center transition-colors flex-shrink-0
-        cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed
-        ${checked ? `${c.bg} ${c.border}` : uncheckedStyle}
-        ${className}
-      `}
+      className={cn(
+        'rounded border flex items-center justify-center transition-colors flex-shrink-0 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed',
+        s.box,
+        checked
+          ? cn(c.bg, c.border)
+          : cn(variant === 'filled' && 'bg-neutral-700', c.border, c.hover),
+        className,
+      )}
     >
-      {checked && <Check className={`${s.icon} ${c.icon}`} />}
+      {checked && <Check className={cn(s.icon, c.icon)} />}
     </button>
   )
 }

package/components/ui/collapsible-section.tsx

@@ -32,6 +32,7 @@ export function CollapsibleSection({
     <div className={cn('border-b border-neutral-700', className)}>
       <button
         type="button"
+        aria-expanded={open}
         onClick={() => setOpen(!open)}
         className="flex w-full items-center gap-2 py-2.5 px-1 text-left hover:bg-neutral-700/30 transition-colors cursor-pointer"
       >

package/components/ui/confirm-badge.tsx

@@ -11,8 +11,10 @@
  * - 5 size variants (xss, xs, sm, md, lg)
  */
 
+import { memo } from 'react'
 import { Check } from 'lucide-react'
 import { FORM_COLORS, type AccentColor } from '../lib/form-colors.ts'
+import { cn } from '../lib/cn.ts'
 
 export type ConfirmBadgeColor = AccentColor
 
@@ -39,18 +41,24 @@ const iconSizeClasses = {
   lg: 'w-4 h-4',
 }
 
-export function ConfirmBadge({
+export const ConfirmBadge = memo(function ConfirmBadge({
   color = 'neutral',
   size = 'sm',
-  className = '',
+  className,
   testId,
 }: ConfirmBadgeProps) {
   return (
     <span
       data-testid={testId}
-      className={`inline-flex items-center justify-center border ${FORM_COLORS[color].border} ${FORM_COLORS[color].accent} ${sizeClasses[size]} ${className}`}
+      className={cn(
+        'inline-flex items-center justify-center border',
+        FORM_COLORS[color].border,
+        FORM_COLORS[color].accent,
+        sizeClasses[size],
+        className,
+      )}
     >
       <Check className={iconSizeClasses[size]} />
     </span>
   )
-}
+})

package/components/ui/cookie-consent.tsx

@@ -55,7 +55,7 @@ export function CookieConsent({
   if (!isVisible) return null
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-700/50">
+    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-neutral-900 border-t border-neutral-700/50">
       <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4">
         <div className="flex-grow">
           <p className="text-md text-neutral-200 mb-1">{heading}</p>

package/components/ui/extension-list-card.tsx

@@ -81,7 +81,7 @@ export const ExtensionListCard = memo(function ExtensionListCard({
           <Icon className={cn('w-5 h-5 shrink-0', iconColor)} />
           <div className="min-w-0 flex-1">
             <div className="flex items-center gap-2 flex-wrap">
-              <span className={cn('text-md font-medium', titleClassName)}>{title}</span>
+              <span className={cn('text-md font-medium truncate', titleClassName)}>{title}</span>
               {badges}
             </div>
             {description && (

package/components/ui/file-tree.tsx

@@ -61,7 +61,7 @@ export function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix =
   if (rootName) {
     const rootNode: FileTreeNode = { name: rootName, type: 'directory', children: nodes }
     return (
-      <ul className="space-y-0.5">
+      <ul role="tree" className="space-y-0.5">
         <FileTreeNodeItem
           node={rootNode}
           path={rootName}
@@ -76,7 +76,7 @@ export function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix =
   }
 
   return (
-    <ul className="space-y-0.5">
+    <ul role="tree" className="space-y-0.5">
       {nodes.filter(nodeHasFiles).map((node) => {
         const fullPath = prefix ? `${prefix}/${node.name}` : node.name
         return (
@@ -120,7 +120,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
       : `${base} cursor-pointer text-white hover:bg-neutral-700/50 hover:text-neutral-200`
 
   return (
-    <li>
+    <li role="treeitem" aria-expanded={isDir ? expanded : undefined} aria-selected={isSelected}>
       <button
         onClick={isDir ? () => onTogglePath(path) : () => onSelectFile(path)}
         className={rowClass}
@@ -138,7 +138,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
         <span className="truncate">{node.name}</span>
       </button>
       {isDir && expanded && node.children && (
-        <ul className="ml-4 space-y-0.5">
+        <ul role="group" className="ml-4 space-y-0.5">
           {node.children.filter(nodeHasFiles).map((child) => {
             const childPath = `${path}/${child.name}`
             return (

package/components/ui/filter-dropdown.tsx

@@ -88,6 +88,8 @@ export function FilterDropdown({
   return (
     <div className="relative flex items-center" ref={ref} onKeyDown={handleKeyDown}>
       <button
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
         onClick={() => setIsOpen(!isOpen)}
         className={`flex items-center gap-1.5 h-7 px-2 rounded-md border ${v.bg} text-sm transition-colors cursor-pointer ${
           isActive
@@ -99,11 +101,12 @@ export function FilterDropdown({
       >
         <Filter className={`w-3 h-3 ${isActive ? FORM_COLORS[color].accent : ''}`} />
         {labelExtra}
-        <span className="whitespace-nowrap">{selectedLabel}</span>
+        <span className="truncate">{selectedLabel}</span>
         <ChevronDown className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
       </button>
       {isActive && clearable && (
         <button
+          aria-label="Clear filter"
           onClick={() => onChange('all')}
           className={`flex items-center justify-center h-7 px-1.5 rounded-r-md border border-l-0 ${FORM_COLORS[color].border} ${v.bg} text-neutral-400 ${FORM_COLORS[color].hover} hover:text-neutral-200 transition-colors cursor-pointer`}
         >
@@ -112,7 +115,7 @@ export function FilterDropdown({
       )}
 
       {isOpen && (
-        <div ref={menuRef} className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] whitespace-nowrap bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`}>
+        <div ref={menuRef} role="listbox" className={`absolute right-0 top-full z-50 mt-1 min-w-[140px] whitespace-nowrap bg-[var(--popover)] border ${FORM_COLORS[color].border} rounded-lg shadow-lg overflow-hidden`}>
           {showSearch && (
             <div className={`sticky top-0 p-1.5 bg-[var(--popover)] border-b ${FORM_COLORS[color].border} z-10`}>
               <div className="relative">

package/components/ui/form-actions.tsx

@@ -1,4 +1,5 @@
 import { IconButton, type IconName, type IconButtonProps, type IconButtonStatus } from './icon-button.tsx'
+import { cn } from '../lib/cn.ts'
 
 export interface FormActionsProps {
   /** Cancel handler — renders X button. Optional (e.g. AlertModal has no cancel). */
@@ -66,14 +67,15 @@ export function FormActions({
   padding = 'normal',
 }: FormActionsProps) {
   const showBorder = border ?? DEFAULT_BORDER[padding]
-  const paddingClass = showBorder
-    ? `${PADDING_CLASSES[padding]} ${BORDER_CLASS}`
-    : PADDING_CLASSES[padding]
-
   const hasLeft = onBack || statusText
 
   return (
-    <div className={`flex items-center ${hasLeft ? 'justify-between' : 'justify-end'} gap-2 ${paddingClass}`}>
+    <div className={cn(
+      'flex items-center gap-2',
+      hasLeft ? 'justify-between' : 'justify-end',
+      PADDING_CLASSES[padding],
+      showBorder && BORDER_CLASS,
+    )}>
       {hasLeft && (
         <div className="flex items-center gap-2">
           {onBack && (

package/components/ui/icon-button.tsx

@@ -260,9 +260,9 @@ const statusIcons: Record<IconButtonStatus, LucideIcon> = {
 
 const statusConfig = {
   loading: { color: undefined, active: true, animation: 'animate-spin' },
-  success: { color: 'green' as const, active: true, animation: 'animate-pulse' },
-  warning: { color: 'amber' as const, active: true, animation: 'animate-pulse' },
-  error: { color: 'red' as const, active: true, animation: 'animate-pulse' },
+  success: { color: 'green' as const, active: true, animation: '' },
+  warning: { color: 'amber' as const, active: true, animation: '' },
+  error: { color: 'red' as const, active: true, animation: '' },
 }
 
 function resolveIcon(icon: IconName | ReactNode, status: IconButtonStatus | undefined): LucideIcon | null {
@@ -337,7 +337,7 @@ export function IconButton({
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      aria-label={tooltip?.title}
+      aria-label={tooltip?.title || (typeof tooltip?.description === 'string' ? tooltip.description : undefined)}
       data-testid={testId}
       className={`${sharedClassName} cursor-pointer no-underline`}
     >
@@ -348,7 +348,7 @@ export function IconButton({
       type="button"
       onClick={onClick}
       disabled={disabled}
-      aria-label={tooltip?.title}
+      aria-label={tooltip?.title || (typeof tooltip?.description === 'string' ? tooltip.description : undefined)}
       data-testid={testId}
       className={`${sharedClassName} cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed`}
     >

package/components/ui/input.tsx

@@ -17,7 +17,7 @@
  * - Extends native input attributes
  */
 
-import { forwardRef, useEffect, useRef, useState, type InputHTMLAttributes, type ReactNode } from 'react'
+import { forwardRef, useEffect, useId, useRef, useState, type InputHTMLAttributes, type ReactNode } from 'react'
 import { Search, X, Eye, EyeOff } from 'lucide-react'
 import { DebounceBorderOverlay } from './debounce-border-overlay.tsx'
 import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
@@ -84,6 +84,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
   const isSearch = type === 'search'
   const isPassword = type === 'password'
   const [isPasswordVisible, setIsPasswordVisible] = useState(false)
+  const errorId = useId()
 
   // Debounce state
   const [internalValue, setInternalValue] = useState(value)
@@ -146,6 +147,9 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
           onBlur={(e) => { setFocused(false); onBlurProp?.(e) }}
           disabled={disabled}
           data-testid={testId}
+          aria-invalid={hasError || undefined}
+          aria-describedby={typeof error === 'string' && error ? errorId : undefined}
+          {...(isSearch && !props['aria-label'] ? { 'aria-label': props.placeholder || 'Search' } : {})}
           {...searchAutoProps}
           className={`
             w-full border rounded-lg text-neutral-200 placeholder-neutral-500
@@ -162,6 +166,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         {showClear && (
           <button
             type="button"
+            aria-label="Clear search"
             onClick={handleClear}
             className="absolute right-2 top-1/2 -translate-y-1/2 w-[18px] h-[18px] flex items-center justify-center rounded-md text-neutral-400 hover:text-neutral-300 hover:bg-neutral-500/20 transition-colors z-10 cursor-pointer"
           >
@@ -177,7 +182,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
           <button
             type="button"
             onClick={() => setIsPasswordVisible(!isPasswordVisible)}
-            title={isPasswordVisible ? 'Hide' : 'Reveal'}
+            aria-label={isPasswordVisible ? 'Hide password' : 'Show password'}
             className="absolute right-2 top-1/2 -translate-y-1/2 w-[18px] h-[18px] flex items-center justify-center rounded-md text-neutral-400 hover:text-neutral-300 hover:bg-neutral-500/20 transition-colors z-10 cursor-pointer"
           >
             {isPasswordVisible ? <EyeOff className="w-2.5 h-2.5" /> : <Eye className="w-2.5 h-2.5" />}
@@ -188,7 +193,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input({
         )}
       </div>
       {typeof error === 'string' && error && (
-        <p className="text-sm text-red-400 mt-1 text-right">{error}</p>
+        <p id={errorId} className="text-sm text-red-400 mt-1 text-right" role="alert">{error}</p>
       )}
     </div>
   )

package/components/ui/label.tsx

@@ -125,6 +125,10 @@ export function Label({
     <>
       {hasProgress && (
         <span
+          role="progressbar"
+          aria-valuenow={Math.min(progress, 100)}
+          aria-valuemin={0}
+          aria-valuemax={100}
           className={`absolute inset-y-0 left-0 ${progressFillColors[color]} rounded-[inherit]`}
           style={{ width: `${Math.min(progress, 100)}%` }}
         />

package/components/ui/layout-tab-bar.tsx

@@ -233,15 +233,15 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
 
                 {/* Close button */}
                 {tab.closable && onClose && (
-                  <span
-                    role="button"
+                  <button
+                    type="button"
+                    aria-label={`Close ${tab.title}`}
                     tabIndex={-1}
                     onClick={(e) => { e.stopPropagation(); onClose(tab.id) }}
-                    onKeyDown={(e) => { if (e.key === 'Enter') { e.stopPropagation(); onClose(tab.id) } }}
                     className="absolute right-1.5 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 hover:bg-neutral-700 rounded p-0.5 transition-opacity cursor-pointer"
                   >
                     <X className="w-3 h-3" />
-                  </span>
+                  </button>
                 )}
               </button>
 
@@ -269,7 +269,7 @@ export function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, cla
         const ghostSubIconC = getTextClass(t.subtitleIconColor || t.subtitleColor || t.selectedColor || t.color)
         return (
           <div className="fixed z-50 pointer-events-none opacity-90" style={{ left: drag.x + 12, top: drag.y - 20 }}>
-            <div className={cn('flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-xl bg-neutral-800', ghostBorder)}>
+            <div className={cn('flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-lg bg-neutral-800', ghostBorder)}>
               <div className="flex items-center gap-1.5">
                 {t.icon && <span className={cn('shrink-0 inline-flex', ghostIconC)} style={{ width: 14, height: 14 }}>{t.icon}</span>}
                 <span className={cn('text-md font-medium', ghostTitleC)}>{t.title}</span>

package/components/ui/modal.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react'
+import { useId, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Info, AlertTriangle, AlertCircle, Check } from 'lucide-react'
 import { useModalBehavior } from '../hooks/use-modal-behavior.ts'
@@ -42,22 +42,26 @@ interface ModalProps {
 
 function Modal({ isOpen, onClose, title, children, kind = 'info', size = 'md', hideCloseButton = false, headerActions, testId }: ModalProps) {
   const modalRef = useRef<HTMLDivElement>(null)
+  const titleId = useId()
 
-  useModalBehavior(isOpen, onClose)
+  useModalBehavior(isOpen, onClose, modalRef)
 
   if (!isOpen) return null
 
   return createPortal(
     <div className="fixed inset-0 z-50 flex items-center justify-center">
-      <div className="absolute inset-0 bg-[var(--dialog-backdrop)] backdrop-blur-sm" onClick={onClose} />
+      <div className="absolute inset-0 bg-[var(--dialog-backdrop)]" onClick={onClose} aria-hidden="true" />
       <div
         ref={modalRef}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
         data-testid={testId}
-        className={`relative bg-neutral-900 border border-neutral-700 rounded-xl shadow-2xl ${SIZE_CLASSES[size]} w-full mx-4 overflow-hidden`}
+        className={`relative bg-neutral-900 border border-neutral-700 rounded-xl shadow-lg ${SIZE_CLASSES[size]} w-full mx-4 overflow-hidden`}
       >
         <div className="flex items-center gap-3 px-5 py-4 border-b border-neutral-800">
           {KIND_ICON[kind]}
-          <h3 className="text-lg font-semibold text-white flex-1">{title}</h3>
+          <h3 id={titleId} className="text-lg font-semibold text-white flex-1 min-w-0 truncate">{title}</h3>
           {headerActions?.map((a, i) => <IconButton key={i} {...a} />)}
           {!hideCloseButton && (
             <IconButton

package/components/ui/nav-card.tsx

@@ -59,7 +59,7 @@ export function NavCard({
         </div>
       )}
 
-      <h3 className="text-md font-medium text-neutral-200">{title}</h3>
+      <h3 className="text-md font-medium text-neutral-200 truncate">{title}</h3>
 
       {description && (
         <p className="mt-1 text-sm text-neutral-500 leading-relaxed line-clamp-2">{description}</p>