From 0782143b6ad944e7d166d4d99e11a63cf7417600 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 25 Jun 2026 22:29:47 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20Enhance=20DrilldownNa?=
 =?UTF-8?q?vigation=20accessibility=20and=20keyboard=20support?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Changed `.flex.items-center.gap-2.mb-4` container to semantic `<nav aria-label="Breadcrumb">` for proper landmark representation.
- Added `aria-current="step"` dynamically to the active level breadcrumb button.
- Added `aria-live="polite"` to the `.text-xs.text-neutral-500` region indicating step count, so changes are announced by screen readers.
- Added `aria-hidden="true"` to purely decorative `ChevronRight` and `ChevronLeft` icons to reduce screen reader noise.
- Applied `focus-visible` outline and ring utility classes for visible keyboard focus indication on all interactive `button` elements, ensuring full compliance with the keyboard navigability standards of the app's dark mode palette (`#0b101a` offset).
- Kept changes small and unobtrusive in accordance with the Palette UX persona's design system boundaries.

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 .../drilldown/drilldown-navigation.tsx        | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/components/drilldown/drilldown-navigation.tsx b/src/components/drilldown/drilldown-navigation.tsx
index 9489f7f8..cc37fb85 100644
--- a/src/components/drilldown/drilldown-navigation.tsx
+++ b/src/components/drilldown/drilldown-navigation.tsx
@@ -56,7 +56,10 @@ 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
@@ -64,17 +67,18 @@ export function DrilldownNavigation({
                 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-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0b101a]',
                 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,18 +89,18 @@ 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 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0b101a]',
             '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>
 
@@ -104,7 +108,7 @@ export function DrilldownNavigation({
           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 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0b101a]',
             'hover:opacity-80',
             currentLevel === levels.length - 1
               ? 'opacity-50 cursor-not-allowed text-neutral-500'
@@ -112,7 +116,7 @@ export function DrilldownNavigation({
           )}
         >
           Next
-          <ChevronRight className="size-4" />
+          <ChevronRight className="size-4" aria-hidden="true" />
         </button>
       </div>
     </div>