🎨 Palette: Improve drilldown navigation accessibility and keyboard focus

.Jules/palette.md

@@ -0,0 +1,4 @@
+
+## 2024-05-18 - High-contrast drilldown breadcrumb accessibility
+**Learning:** When implementing drilldown or step-through navigations, standard breadcrumb patterns often lack sufficient context for screen readers to understand the relationship between the steps, and interactive components embedded deep within the chain often miss standard focus indicators. Furthermore, when dynamically progressing through levels, standard visual updates aren't announced.
+**Action:** Always wrap drilldown path buttons in a `<nav aria-label="Breadcrumb">` container. Mark the currently active level explicitly with `aria-current="step"`. Apply `aria-live="polite"` to the dynamic text counter representing progression ("Level X of Y"). Always ensure interactive structural components like breadcrumb buttons or navigational controls include a visible keyboard focus outline (e.g., `focus-visible:ring-2`), and hide purely decorative chevron icons with `aria-hidden="true"`.

src/components/drilldown/drilldown-navigation.tsx

@@ -56,7 +56,7 @@ 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
@@ -65,16 +65,17 @@ export function DrilldownNavigation({
                 onLevelChange?.(level.id)
               }}
               className={clsx(
-                'hover:text-neutral-200 transition-colors',
+                'hover:text-neutral-200 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 rounded-sm',
                 idx === currentLevel && 'text-neutral-200 font-medium'
               )}
+              aria-current={idx === currentLevel ? 'step' : undefined}
             >
               {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-400',
             '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 className="text-xs text-neutral-500" aria-live="polite">
           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-400',
             '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>