@w5-ui/react 0.5.0 → 0.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@w5-ui/react",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React 18 components for the Dash UI design system - ~170 dashboard-focused components with full type defs and SSR support. Part of Webber's design systems.",
   "keywords": [
     "react",

package/src/components/ColumnToggle.tsx

@@ -87,6 +87,7 @@ export function ColumnToggle({ columns, visible, onChange }: ColumnToggleProps)
                 <label className="col-toggle__label">
                   <input
                     type="checkbox"
+                    aria-label={col.label}
                     className="col-toggle__check"
                     checked={visible.has(col.key)}
                     disabled={col.required}

package/src/components/CommandPalette.tsx

@@ -110,6 +110,7 @@ export function CommandPalette({
             className="cp-input"
             type="text"
             role="combobox"
+            aria-label={placeholder}
             aria-expanded={filtered.length > 0}
             aria-autocomplete="list"
             aria-controls={listId}

package/src/components/ContextMenu.tsx

@@ -103,7 +103,7 @@ export function ContextMenu({
     >
       {items.map((entry, i) => {
         if ('separator' in entry) {
-          return <li key={i} role="separator" className="ctx-menu-sep" />
+          return <li key={i} role="separator" aria-hidden="true" className="ctx-menu-sep" />
         }
         const ai = actionItems.indexOf(entry)
         return (

package/src/components/DateRangePicker.tsx

@@ -145,8 +145,23 @@ export function DateRangePicker({
         setPicking(null)
       }
     }
+    // Escape closes the dialog and restores focus to the trigger. Handled
+    // at the document level (rather than a JSX onKeyDown on the dialog) so
+    // it works regardless of focus position inside the popover.
+    function onKey(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        e.preventDefault()
+        setOpen(false)
+        setPicking(null)
+        triggerRef.current?.focus()
+      }
+    }
     document.addEventListener('mousedown', handler)
-    return () => document.removeEventListener('mousedown', handler)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', handler)
+      document.removeEventListener('keydown', onKey)
+    }
   }, [open])
 
   function renderCalendar(grid: Date[], gridMonth: number, gridYear: number) {
@@ -302,14 +317,6 @@ export function DateRangePicker({
           aria-modal="true"
           aria-label="Select date range"
           className="drp-cal"
-          onKeyDown={(e) => {
-            if (e.key === 'Escape') {
-              e.preventDefault()
-              setOpen(false)
-              setPicking(null)
-              triggerRef.current?.focus()
-            }
-          }}
         >
           <div className="drp-months">
             {renderCalendar(leftGrid, viewMonth, viewYear)}

package/src/components/ExpandableRow.tsx

@@ -22,6 +22,7 @@ export function ExpandableRow({
           <button
             type="button"
             className="exp-toggle"
+            aria-label={open ? 'Collapse row' : 'Expand row'}
             aria-expanded={open}
             aria-controls={detailId}
             onClick={() => setOpen((o) => !o)}

package/src/components/NumberInput.tsx

@@ -98,6 +98,7 @@ export function NumberInput({
           id={inputId}
           type="number"
           role="spinbutton"
+          aria-label={label}
           aria-valuenow={value}
           aria-valuemin={min}
           aria-valuemax={max}

package/src/components/PasswordInput.tsx

@@ -89,6 +89,7 @@ export function PasswordInput({
         <input
           id={inputId}
           type={shown ? 'text' : 'password'}
+          aria-label={label}
           className="pwd-input__field"
           value={value}
           placeholder={placeholder}

package/src/components/RadioGroup.tsx

@@ -49,6 +49,7 @@ export function RadioGroup({
             <input
               type="radio"
               id={optId}
+              aria-labelledby={`${optId}-label`}
               name={groupName}
               value={opt.value}
               checked={value !== undefined ? value === opt.value : undefined}
@@ -57,7 +58,7 @@ export function RadioGroup({
               onChange={() => onChange?.(opt.value)}
               className="radio"
             />
-            <span className="radio-text">
+            <span className="radio-text" id={`${optId}-label`}>
               <span>{opt.label}</span>
               {opt.description && <span className="radio-description">{opt.description}</span>}
             </span>

package/src/components/TagInput.tsx

@@ -61,7 +61,13 @@ export function TagInput({
   }
 
   return (
-    <div className={`tag-input-wrapper${className ? ` ${className}` : ''}`}>
+    // Click-to-focus lives on the presentational wrapper rather than the
+    // role="group" element, so a non-interactive ARIA role never carries a
+    // mouse handler.
+    <div
+      className={`tag-input-wrapper${className ? ` ${className}` : ''}`}
+      onClick={() => inputRef.current?.focus()}
+    >
       {label && (
         <label htmlFor={inputId} className="tag-input__label">
           {label}
@@ -72,7 +78,6 @@ export function TagInput({
         role="group"
         aria-label={label ?? 'Tags'}
         className={`tag-input${disabled ? ' tag-input--disabled' : ''}`}
-        onClick={() => inputRef.current?.focus()}
       >
         {tags.map((t, i) => (
           <Tag key={t} label={t} onRemove={disabled ? undefined : () => removeTag(i)} />