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 (
{/* Navigation Breadcrumb */}
-
+
+
{/* Current Level Content */}
{current.content}
@@ -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'
)}
>
-
+
Back
-
+
Level {currentLevel + 1} of {levels.length}
@@ -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
-
+