From 8f5981ef0de3bd0294e735bad94627faf1ae9c07 Mon Sep 17 00:00:00 2001
From: scanner <280983584+hivecommons-hive[bot]@users.noreply.github.com>
Date: Thu, 29 Oct 2026 21:39:30 -0400
Subject: [PATCH] fix(web): add keyboard navigation to dropdowns and tab bars

Expose pressed state on compliance filter toggles and an accessible name on the update indicator button.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Signed-off-by: scanner <280983584+hivecommons-hive[bot]@users.noreply.github.com>
---
 .../components/drilldown/views/ComplianceDrillDown.parts.tsx  | 4 ++++
 web/src/components/drilldown/views/ComplianceFooter.parts.tsx | 1 +
 web/src/components/layout/navbar/UpdateIndicator.tsx          | 1 +
 3 files changed, 6 insertions(+)

diff --git a/web/src/components/drilldown/views/ComplianceDrillDown.parts.tsx b/web/src/components/drilldown/views/ComplianceDrillDown.parts.tsx
index 8f41c0bc60..9f5fbf5a0a 100644
--- a/web/src/components/drilldown/views/ComplianceDrillDown.parts.tsx
+++ b/web/src/components/drilldown/views/ComplianceDrillDown.parts.tsx
@@ -38,6 +38,7 @@ export function ComplianceSummaryStats({
     <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
       <button
         onClick={onClearFilter}
+        aria-pressed={!statusFilter}
         className={cn(
           cn('rounded-lg border p-3 text-left transition-colors', TOUCH_TARGET_HEIGHT_CLASS),
           !statusFilter ? 'border-teal-500/40 bg-teal-500/10' : 'border-border bg-card/50 hover:border-border/80'
@@ -48,6 +49,7 @@ export function ComplianceSummaryStats({
       </button>
       <button
         onClick={onPassClick}
+        aria-pressed={statusFilter === 'pass'}
         className={cn(
           cn('rounded-lg border p-3 text-left transition-colors', TOUCH_TARGET_HEIGHT_CLASS),
           statusFilter === 'pass' ? 'border-green-500/40 bg-green-500/10' : 'border-border bg-card/50 hover:border-border/80'
@@ -58,6 +60,7 @@ export function ComplianceSummaryStats({
       </button>
       <button
         onClick={onFailClick}
+        aria-pressed={statusFilter === 'fail'}
         className={cn(
           cn('rounded-lg border p-3 text-left transition-colors', TOUCH_TARGET_HEIGHT_CLASS),
           statusFilter === 'fail' ? 'border-red-500/40 bg-red-500/10' : 'border-border bg-card/50 hover:border-border/80'
@@ -68,6 +71,7 @@ export function ComplianceSummaryStats({
       </button>
       <button
         onClick={onOtherClick}
+        aria-pressed={statusFilter === 'other'}
         className={cn(
           cn('rounded-lg border p-3 text-left transition-colors', TOUCH_TARGET_HEIGHT_CLASS),
           statusFilter === 'other' ? 'border-yellow-500/40 bg-yellow-500/10' : 'border-border bg-card/50 hover:border-border/80'
diff --git a/web/src/components/drilldown/views/ComplianceFooter.parts.tsx b/web/src/components/drilldown/views/ComplianceFooter.parts.tsx
index 6d58974be4..33a3ddef0a 100644
--- a/web/src/components/drilldown/views/ComplianceFooter.parts.tsx
+++ b/web/src/components/drilldown/views/ComplianceFooter.parts.tsx
@@ -106,6 +106,7 @@ export function ComplianceClusterBreakdown({
             <button
               key={cluster}
               onClick={() => onClusterClick(cluster)}
+              aria-pressed={clusterFilter === cluster}
               className={cn(
                 'rounded-lg border p-2 text-left transition-colors',
                 TOUCH_TARGET_HEIGHT_CLASS,
diff --git a/web/src/components/layout/navbar/UpdateIndicator.tsx b/web/src/components/layout/navbar/UpdateIndicator.tsx
index 54c1ed6d12..9ed1140989 100644
--- a/web/src/components/layout/navbar/UpdateIndicator.tsx
+++ b/web/src/components/layout/navbar/UpdateIndicator.tsx
@@ -99,6 +99,7 @@ export function UpdateIndicator({ showLabel = false }: UpdateIndicatorProps) {
           }}
           className={buttonClassName}
           title={buttonTitle}
+          aria-label={buttonTitle}
         >
           {isUpgradeError ? (
             <AlertTriangle className={ICON_SIZE} />