From c023db37a5ef35f161a272700016e898001da35b Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 11 Jun 2026 22:25:03 +0000
Subject: [PATCH 1/2] feat(ui): improve accessibility of drilldown navigation
 component

- Changed wrapper to `<nav aria-label="Breadcrumb">`
- Added `aria-current="step"` to the active level button
- Added `aria-live="polite"` to the dynamic progress counter
- Ensured `focus-visible` styling is applied for keyboard navigation
- Hid decorative chevron icons from screen readers with `aria-hidden="true"`

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>
---
 .Jules/palette.md                             |  3 +++
 .../drilldown/drilldown-navigation.tsx        | 19 ++++++++++---------
 2 files changed, 13 insertions(+), 9 deletions(-)
 create mode 100644 .Jules/palette.md

diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 00000000..622ce696
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-06-11 - Drilldown Navigation Accessibility
+**Learning:** Found a Drilldown component (Ramp's Tap-Through Discovery System pattern) that functioned visually but lacked structural accessibility. Custom drilldown/breadcrumb navigation patterns often miss the `aria-current="step"` semantic meaning for screen readers, and dynamic progress counters (like "Level X of Y") need `aria-live="polite"` so screen readers actually announce when the level changes upon clicking 'Next'.
+**Action:** When implementing progressive disclosure or drilldown navigation patterns, use `<nav aria-label="Breadcrumb">` for the container, mark the current step with `aria-current="step"`, use `aria-live="polite"` for dynamic level counters, and apply high-contrast focus rings to interactive elements.
diff --git a/src/components/drilldown/drilldown-navigation.tsx b/src/components/drilldown/drilldown-navigation.tsx
index 9489f7f8..be118eeb 100644
--- a/src/components/drilldown/drilldown-navigation.tsx
+++ b/src/components/drilldown/drilldown-navigation.tsx
@@ -54,7 +54,7 @@ export function DrilldownNavigation({
   const current = levels[currentLevel]
 
   return (
-    <div className={clsx('flex flex-col', className)}>
+    <nav aria-label="Breadcrumb" className={clsx('flex flex-col', className)}>
       {/* Navigation Breadcrumb */}
       <div className="flex items-center gap-2 mb-4 text-sm text-neutral-400">
         {levels.map((level, idx) => (
@@ -64,14 +64,15 @@ export function DrilldownNavigation({
                 setCurrentLevel(idx)
                 onLevelChange?.(level.id)
               }}
+              aria-current={idx === currentLevel ? 'step' : undefined}
               className={clsx(
-                'hover:text-neutral-200 transition-colors',
+                'rounded-sm hover:text-neutral-200 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400',
                 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>
@@ -85,18 +86,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',
             '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>
 
@@ -104,7 +105,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',
             'hover:opacity-80',
             currentLevel === levels.length - 1
               ? 'opacity-50 cursor-not-allowed text-neutral-500'
@@ -112,9 +113,9 @@ export function DrilldownNavigation({
           )}
         >
           Next
-          <ChevronRight className="size-4" />
+          <ChevronRight className="size-4" aria-hidden="true" />
         </button>
       </div>
-    </div>
+    </nav>
   )
 }

From ea42571293acb173dcbd6059367fc2df8452937c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Thu, 11 Jun 2026 22:28:07 +0000
Subject: [PATCH 2/2] feat(ui): improve accessibility of drilldown navigation
 component

- Changed wrapper to `<nav aria-label="Breadcrumb">`
- Added `aria-current="step"` to the active level button
- Added `aria-live="polite"` to the dynamic progress counter
- Ensured `focus-visible` styling is applied for keyboard navigation
- Hid decorative chevron icons from screen readers with `aria-hidden="true"`

Co-authored-by: aarjava <218419324+aarjava@users.noreply.github.com>