🎨 Palette: Enhance Drilldown Navigation Accessibility

.Jules/palette.md

@@ -0,0 +1,4 @@
+
+## 2024-07-10 - Drilldown Navigation Accessibility
+**Learning:** Standard drilldown UI patterns using basic `div` containers often lack inherent structural meaning for screen readers. Replacing them with `<nav aria-label="Breadcrumb">`, explicitly marking the current step with `aria-current`, and treating counter updates as `aria-live="polite"` regions transforms a purely visual drilldown into a fully accessible semantic experience without altering the visual design.
+**Action:** When implementing progressive disclosure or drilldown navigation patterns, always wrap the step sequence in a semantic `<nav>` region, manage focus states with visible rings, and ensure screen readers announce dynamic level changes politely.

src/components/drilldown/drilldown-navigation.tsx

@@ -56,25 +56,26 @@ export function DrilldownNavigation({
   return (
     <div className={clsx('flex flex-col', className)}>
       {/* Navigation Breadcrumb */}
-      <div className="flex items-center gap-2 mb-4 text-sm text-neutral-400">
+      <nav aria-label="Breadcrumb" className="flex items-center gap-2 mb-4 text-sm text-neutral-400">
         {levels.map((level, idx) => (
           <div key={level.id} className="flex items-center gap-2">
             <button
               onClick={() => {
                 setCurrentLevel(idx)
                 onLevelChange?.(level.id)
               }}
+              aria-current={idx === currentLevel ? 'step' : undefined}
               className={clsx(
-                'hover:text-neutral-200 transition-colors',
+                'hover:text-neutral-200 transition-colors rounded focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300',
                 idx === currentLevel && 'text-neutral-200 font-medium'
               )}
             >
               {level.title}
             </button>
-            {idx < levels.length - 1 && <ChevronRight className="size-4" />}
+            {idx < levels.length - 1 && <ChevronRight className="size-4" aria-hidden="true" />}
           </div>
         ))}
-      </div>
+      </nav>
 
       {/* Current Level Content */}
       <div className="flex-1">{current.content}</div>
@@ -85,34 +86,34 @@ export function DrilldownNavigation({
           onClick={handleBack}
           disabled={currentLevel === 0}
           className={clsx(
-            'flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-opacity',
+            'flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300',
             'hover:opacity-80',
             currentLevel === 0
               ? 'opacity-50 cursor-not-allowed text-neutral-500'
               : 'text-neutral-300'
           )}
         >
-          <ChevronLeft className="size-4" />
+          <ChevronLeft className="size-4" aria-hidden="true" />
           Back
         </button>
 
-        <div className="text-xs text-neutral-500">
+        <div aria-live="polite" className="text-xs text-neutral-500">
           Level {currentLevel + 1} of {levels.length}
         </div>
 
         <button
           onClick={handleNext}
           disabled={currentLevel === levels.length - 1}
           className={clsx(
-            'flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-opacity',
+            'flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300',
             'hover:opacity-80',
             currentLevel === levels.length - 1
               ? 'opacity-50 cursor-not-allowed text-neutral-500'
               : 'text-neutral-300'
           )}
         >
           Next
-          <ChevronRight className="size-4" />
+          <ChevronRight className="size-4" aria-hidden="true" />
         </button>
       </div>
     </div>