✨ Add keyboard navigation to dropdowns and tab components (#15823)

* ✨ Add keyboard navigation to dropdown menus for a11y compliance

- Apply useDropdownKeyNav hook to Weather card city search dropdown
- Apply useDropdownKeyNav hook to HardwareHealthCardHeader snooze menu
- Add proper ARIA roles (listbox, option, menu, menuitem) for screen readers
- Enable ArrowUp/ArrowDown navigation through dropdown items
- Enable Escape key to close dropdowns

These changes improve keyboard accessibility for users who cannot use a mouse,
addressing Auto-QA findings from issue #15822.

Fixes #15822

Signed-off-by: Copilot <223556219+Copilot@users.noreply.github.com>

* ✨ Add keyboard navigation to dropdowns and tab components

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Signed-off-by: Copilot <223556219+Copilot@users.noreply.github.com>

* 🐛 Fix tabListProps ref type mismatch causing TS2322

Remove ref from tabListProps return to avoid RefObject<HTMLElement>
not being assignable to Ref<HTMLDivElement>. The tab keyboard handler
uses event.currentTarget via moveFocusByKey instead of a stored ref.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Signed-off-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Signed-off-by: Copilot <223556219+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: kubestellar-hive[bot]

web/src/components/cards/HardwareHealthCardHeader.tsx

@@ -1,10 +1,11 @@
-import { memo, type RefObject } from 'react'
+import { memo, useEffect, type RefObject } from 'react'
 
 // Split helper component; parent card owns useCardLoadingState.
 import { AlertCircle, AlertTriangle, BellOff, Clock, List, MoreVertical, RefreshCw } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { CardControlsRow, CardSearchInput } from '../../lib/cards/CardComponents'
 import { SNOOZE_DURATIONS, type SnoozeDuration } from '../../hooks/useSnoozedAlerts'
+import { useKeyboardNav, useTabKeyboardNav } from '../../hooks/useKeyboardNav'
 import { cn } from '../../lib/cn'
 import { StatusBadge } from '../ui/StatusBadge'
 import { CARD_UI_STRINGS } from './strings'
@@ -92,6 +93,13 @@ export const HardwareHealthCardHeader = memo(function HardwareHealthCardHeader({
   isDemoData,
 }: HardwareHealthCardHeaderProps) {
   const { t } = useTranslation(['cards', 'common'])
+  const snoozeMenuNav = useKeyboardNav({ selector: '[role="menuitem"]:not([disabled])', orientation: 'vertical', onEscape: onToggleSnoozeAllMenu })
+  const { tabListProps, getTabProps } = useTabKeyboardNav<ViewMode>({ tabs: ['inventory', 'alerts'], activeTab: viewMode, onChange: onViewModeChange })
+
+  useEffect(() => {
+    if (!snoozeAllMenuOpen) return
+    snoozeMenuNav.focusMatchingItem({ fallbackSelector: '[role="menuitem"]:not([disabled])' })
+  }, [snoozeAllMenuOpen, snoozeMenuNav])
 
   return (
     <>
@@ -139,12 +147,11 @@ export const HardwareHealthCardHeader = memo(function HardwareHealthCardHeader({
       </div>
 
       <div className="flex flex-wrap gap-2 mb-3">
-        <div className="flex flex-1 min-w-0 bg-muted/30 rounded-lg p-0.5">
+        <div {...tabListProps} className="flex flex-1 min-w-0 bg-muted/30 rounded-lg p-0.5">
           <button
-            onClick={() => onViewModeChange('inventory')}
+            {...getTabProps('inventory')}
             className={cn('flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors', viewMode === 'inventory' ? 'bg-background text-foreground shadow-xs' : 'text-muted-foreground hover:text-foreground')}
             aria-label={t('cards:hardwareHealth.switchToInventoryAria')}
-            aria-pressed={viewMode === 'inventory'}
           >
             <List className="w-3.5 h-3.5" />
             {t('cards:hardwareHealth.inventory', 'Inventory')}
@@ -153,10 +160,9 @@ export const HardwareHealthCardHeader = memo(function HardwareHealthCardHeader({
             )}
           </button>
           <button
-            onClick={() => onViewModeChange('alerts')}
+            {...getTabProps('alerts')}
             className={cn('flex-1 flex items-center justify-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md transition-colors', viewMode === 'alerts' ? 'bg-background text-foreground shadow-xs' : 'text-muted-foreground hover:text-foreground')}
             aria-label={t('cards:hardwareHealth.switchToAlertsAria')}
-            aria-pressed={viewMode === 'alerts'}
           >
             <AlertCircle className="w-3.5 h-3.5" />
             {t('cards:hardwareHealth.alerts', 'Alerts')}
@@ -194,11 +200,19 @@ export const HardwareHealthCardHeader = memo(function HardwareHealthCardHeader({
                   <MoreVertical className="w-4 h-4" />
                 </button>
                 {snoozeAllMenuOpen && (
-                  <div className="absolute right-0 top-full mt-1 z-50 bg-popover border border-border rounded-lg shadow-lg py-1 min-w-[160px]">
+                  <div
+                    ref={(node) => {
+                      snoozeMenuNav.containerRef.current = node
+                    }}
+                    role="menu"
+                    className="absolute right-0 top-full mt-1 z-50 bg-popover border border-border rounded-lg shadow-lg py-1 min-w-[160px]"
+                    onKeyDown={snoozeMenuNav.handleKeyDown}
+                  >
                     <div className="px-3 py-1.5 text-xs font-medium text-muted-foreground border-b border-border mb-1">{t('cards:hardwareHealth.snoozeAllVisibleCount', 'Snooze All ({{count}})', { count: visibleAlertIds.length })}</div>
                     {(Object.keys(SNOOZE_DURATIONS) as SnoozeDuration[]).map(duration => (
                       <button
                         key={duration}
+                        role="menuitem"
                         onClick={() => onSnoozeAll(duration)}
                         className="w-full px-3 py-1.5 text-xs text-left hover:bg-muted/50 transition-colors flex items-center gap-2"
                         aria-label={t('cards:hardwareHealth.snoozeAllForAria', { duration })}
@@ -211,6 +225,7 @@ export const HardwareHealthCardHeader = memo(function HardwareHealthCardHeader({
                       <>
                         <div className="border-t border-border my-1" />
                         <button
+                          role="menuitem"
                           onClick={onClearAllSnoozed}
                           className="w-full px-3 py-1.5 text-xs text-left text-yellow-400 hover:bg-muted/50 transition-colors"
                           aria-label={t('cards:hardwareHealth.clearAllSnoozesAria')}

web/src/components/cards/weather/Weather.tsx

@@ -9,6 +9,7 @@ import { WeatherAnimation, getWeatherCondition, getConditionColor } from './Weat
 import { WEATHER_API } from '../../../config/externalApis'
 import { useCardLoadingState } from '../CardDataContext'
 import { RefreshIndicator } from '../../ui/RefreshIndicator'
+import { useKeyboardNav } from '../../../hooks/useKeyboardNav'
 import { useCache } from '../../../lib/cache'
 import { FETCH_EXTERNAL_TIMEOUT_MS } from '../../../lib/constants'
 import { useToast } from '../../ui/Toast'
@@ -105,6 +106,7 @@ export function Weather({ config }: { config?: WeatherConfig }) {
   const [isSearching, setIsSearching] = useState(false)
   const [showCityDropdown, setShowCityDropdown] = useState(false)
   const searchTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined)
+  const cityDropdownNav = useKeyboardNav({ selector: '[role="option"]:not([disabled])', orientation: 'vertical', onEscape: () => setShowCityDropdown(false) })
 
   // security: stored in sessionStorage, not localStorage — location list is
   // user-provided and only used client-side; clears on tab close to reduce exposure window
@@ -263,6 +265,11 @@ export function Weather({ config }: { config?: WeatherConfig }) {
     }
   }, [citySearchInput, searchCities])
 
+  useEffect(() => {
+    if (!showCityDropdown || citySearchResults.length === 0) return
+    cityDropdownNav.focusMatchingItem({ fallbackSelector: '[role="option"]:not([disabled])' })
+  }, [cityDropdownNav, citySearchResults.length, showCityDropdown])
+
   // Select city from search results
   const selectCity = (city: GeocodingResult) => {
     const statePart = city.admin1 || city.country
@@ -361,21 +368,39 @@ export function Weather({ config }: { config?: WeatherConfig }) {
                 value={citySearchInput}
                 onChange={(e) => setCitySearchInput(e.target.value)}
                 onFocus={() => citySearchResults.length > 0 && setShowCityDropdown(true)}
+                onKeyDown={(event) => {
+                  if (event.key !== 'ArrowDown' || citySearchResults.length === 0) return
+                  event.preventDefault()
+                  setShowCityDropdown(true)
+                }}
                 className="w-full pl-10 pr-10 py-2.5 text-sm rounded-lg bg-secondary/50 border border-border/30 text-foreground placeholder:text-muted-foreground"
                 placeholder="Type city name..."
+                aria-expanded={showCityDropdown}
+                aria-controls="weather-city-results"
+                aria-autocomplete="list"
               />
               {isSearching && (
                 <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground animate-spin" />
               )}
 
               {/* City Search Dropdown */}
               {showCityDropdown && citySearchResults.length > 0 && (
-                <div className="absolute z-50 w-full mt-1 bg-secondary/95 backdrop-blur-xs border border-border/30 rounded-lg shadow-lg max-h-60 overflow-y-auto">
+                <div
+                  id="weather-city-results"
+                  ref={(node) => {
+                    cityDropdownNav.containerRef.current = node
+                  }}
+                  className="absolute z-50 w-full mt-1 bg-secondary/95 backdrop-blur-xs border border-border/30 rounded-lg shadow-lg max-h-60 overflow-y-auto"
+                  onKeyDown={cityDropdownNav.handleKeyDown}
+                  role="listbox"
+                  aria-label="City search results"
+                >
                   {citySearchResults.map((city) => (
                     <button
                       key={city.id}
                       onClick={() => selectCity(city)}
                       className="w-full text-left px-3 py-2.5 hover:bg-secondary transition-colors border-b border-border last:border-0"
+                      role="option"
                     >
                       <div className="text-sm font-medium">{city.name}</div>
                       <div className="text-xs text-muted-foreground">

web/src/components/drilldown/views/AlertDrillDown.tsx

@@ -10,6 +10,7 @@ import {
   Code
 } from 'lucide-react'
 import { cn } from '../../../lib/cn'
+import { useTabKeyboardNav } from '../../../hooks/useKeyboardNav'
 import { UI_FEEDBACK_TIMEOUT_MS } from '../../../lib/constants/network'
 import { ConsoleAIIcon } from '../../ui/ConsoleAIIcon'
 import {
@@ -83,6 +84,7 @@ export function AlertDrillDown({ data }: Props) {
   const [aiAnalysis] = useState<string | null>(null)
   const [aiAnalysisLoading] = useState(false)
   const [copiedField, setCopiedField] = useState<string | null>(null)
+  const { tabListProps, getTabProps, getTabPanelProps } = useTabKeyboardNav<TabType>({ tabs: ['overview', 'labels', 'source', 'ai'], activeTab, onChange: setActiveTab })
   const mountedRef = useRef(true)
   const copyTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined)
 
@@ -295,13 +297,13 @@ Please:
 
       {/* Tabs */}
       <div className="border-b border-border px-6">
-        <div className="flex gap-1">
+        <div {...tabListProps} className="flex gap-1">
           {TABS.map((tab) => {
             const Icon = tab.icon
             return (
               <button
                 key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
+                {...getTabProps(tab.id)}
                 className={cn(
                   'px-4 py-2 text-sm font-medium flex items-center gap-2 border-b-2 transition-colors',
                   activeTab === tab.id
@@ -320,7 +322,7 @@ Please:
       {/* Tab Content */}
       <div className="flex-1 overflow-y-auto p-6 space-y-6">
         {activeTab === 'overview' && (
-          <div className="space-y-6">
+          <div {...getTabPanelProps('overview')} className="space-y-6">
             {/* Alert Info Card */}
             <div className={cn('p-4 rounded-lg border', severityStyle.bg, severityStyle.border)}>
               <div className="flex items-start gap-3">
@@ -429,7 +431,7 @@ Please:
         )}
 
         {activeTab === 'labels' && (
-          <div className="space-y-4">
+          <div {...getTabPanelProps('labels')} className="space-y-4">
             <div className="flex items-center justify-between">
               <h4 className="text-sm font-medium text-foreground">{t('drilldown.alertDetail.allLabels', { count: labelEntries.length })}</h4>
             </div>
@@ -466,7 +468,7 @@ Please:
         )}
 
         {activeTab === 'source' && (
-          <div className="space-y-4">
+          <div {...getTabPanelProps('source')} className="space-y-4">
             <h4 className="text-sm font-medium text-foreground">{t('drilldown.alertDetail.alertRuleSource')}</h4>
             {sourceLoading ? (
               <div className="flex items-center justify-center py-12">
@@ -487,7 +489,7 @@ Please:
         )}
 
         {activeTab === 'ai' && (
-          <div className="space-y-4">
+          <div {...getTabPanelProps('ai')} className="space-y-4">
             <div className="flex items-center justify-between">
               <h4 className="text-sm font-medium text-foreground flex items-center gap-2">
                 <ConsoleAIIcon className="w-5 h-5" />

web/src/components/drilldown/views/ConfigMapDrillDown.tsx

@@ -5,6 +5,7 @@ import { useDrillDownActions } from '../../../hooks/useDrillDown'
 import { ClusterBadge } from '../../ui/ClusterBadge'
 import { FileText, Code, Info, Tag, ChevronDown, ChevronUp, Loader2, Copy, Check, Layers, Server, Database, Eye, EyeOff, Lock } from 'lucide-react'
 import { cn } from '../../../lib/cn'
+import { useTabKeyboardNav } from '../../../hooks/useKeyboardNav'
 import { UI_FEEDBACK_TIMEOUT_MS } from '../../../lib/constants/network'
 import { useTranslation } from 'react-i18next'
 import { copyToClipboard } from '../../../lib/clipboard'
@@ -48,6 +49,7 @@ export function ConfigMapDrillDown({ data }: Props) {
   // alongside the per-key buttons for the common case.
   const [revealedKeys, setRevealedKeys] = useState<Set<string>>(new Set())
   const [revealAll, setRevealAll] = useState(false)
+  const { tabListProps, getTabProps, getTabPanelProps } = useTabKeyboardNav<TabType>({ tabs: ['overview', 'data', 'describe', 'yaml'], activeTab, onChange: setActiveTab })
 
   const toggleReveal = (key: string) => {
     setRevealedKeys(prev => {
@@ -190,13 +192,13 @@ export function ConfigMapDrillDown({ data }: Props) {
 
       {/* Tabs */}
       <div className="border-b border-border px-6">
-        <div className="flex gap-1">
+        <div {...tabListProps} className="flex gap-1">
           {TABS.map((tab) => {
             const Icon = tab.icon
             return (
               <button
                 key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
+                {...getTabProps(tab.id)}
                 className={cn(
                   'px-4 py-2 text-sm font-medium flex items-center gap-2 border-b-2 transition-colors',
                   activeTab === tab.id
@@ -215,7 +217,7 @@ export function ConfigMapDrillDown({ data }: Props) {
       {/* Tab Content */}
       <div className="flex-1 overflow-y-auto p-6 space-y-6">
         {activeTab === 'overview' && (
-          <div className="space-y-6">
+          <div {...getTabPanelProps('overview')} className="space-y-6">
             {!hasRequiredContext && (
               <div className="p-4 rounded-lg bg-yellow-500/10 border border-yellow-500/20 text-sm text-yellow-400">
                 {t('drilldown.configmap.missingContext', 'Unable to load this ConfigMap because the selected resource is missing required details.')}
@@ -276,7 +278,7 @@ export function ConfigMapDrillDown({ data }: Props) {
         )}
 
         {activeTab === 'data' && (
-          <div className="space-y-4">
+          <div {...getTabPanelProps('data')} className="space-y-4">
             {/* #6211: master reveal toggle for ConfigMaps. ConfigMaps often
                 hold non-sensitive config so a single "Reveal all" is more
                 ergonomic than the per-key dance, but we keep the per-key
@@ -354,7 +356,7 @@ export function ConfigMapDrillDown({ data }: Props) {
         )}
 
         {activeTab === 'describe' && (
-          <div>
+          <div {...getTabPanelProps('describe')}>
             {describeLoading ? (
               <div className="flex items-center justify-center py-12">
                 <Loader2 className="w-6 h-6 animate-spin text-primary" />
@@ -381,7 +383,7 @@ export function ConfigMapDrillDown({ data }: Props) {
         )}
 
         {activeTab === 'yaml' && (
-          <div className="space-y-3">
+          <div {...getTabPanelProps('yaml')} className="space-y-3">
             {/* #6211: same masking model the Data tab uses, applied to the
                 YAML view so that tab isn't a bypass for the per-key reveal.
                 ConfigMap YAML uses the same `data:` block shape as Secret

web/src/components/drilldown/views/NamespaceDrillDown.tsx

@@ -7,6 +7,7 @@ import { ClusterBadge } from '../../ui/ClusterBadge'
 import { StatusIndicator } from '../../charts/StatusIndicator'
 import { StatusBadge } from '../../ui/StatusBadge'
 import { useTranslation } from 'react-i18next'
+import { useTabKeyboardNav } from '../../../hooks/useKeyboardNav'
 import { cn } from '../../../lib/cn'
 
 type TabType = 'issues' | 'events' | 'resources'
@@ -25,6 +26,7 @@ export function NamespaceDrillDown({ data }: Props) {
   const [activeTab, setActiveTab] = useState<TabType>('issues')
   const [resourceFilter, setResourceFilter] = useState<ResourceFilter>('all')
   const [resourceSearch, setResourceSearch] = useState('')
+  const { tabListProps, getTabProps, getTabPanelProps } = useTabKeyboardNav<TabType>({ tabs: ['issues', 'events', 'resources'], activeTab, onChange: setActiveTab })
 
   const { issues: allPodIssues } = usePodIssues(cluster)
   const { issues: allDeploymentIssues } = useDeploymentIssues()
@@ -122,11 +124,11 @@ export function NamespaceDrillDown({ data }: Props) {
 
       {/* Tabs */}
       <div className="border-b border-border">
-        <div className="flex gap-0">
+        <div {...tabListProps} className="flex gap-0">
           {tabs.map(tab => (
             <button
               key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
+              {...getTabProps(tab.id)}
               className={cn(
                 'px-4 py-2 text-sm font-medium flex items-center gap-2 border-b-2 transition-colors',
                 activeTab === tab.id
@@ -152,7 +154,7 @@ export function NamespaceDrillDown({ data }: Props) {
 
       {/* Tab Content */}
       {activeTab === 'issues' && (
-        <div className="space-y-6">
+        <div {...getTabPanelProps('issues')} className="space-y-6">
           {/* Deployment Issues */}
           {deploymentIssues.length > 0 && (
             <div>
@@ -240,7 +242,7 @@ export function NamespaceDrillDown({ data }: Props) {
       )}
 
       {activeTab === 'events' && (
-        <div className="space-y-4">
+        <div {...getTabPanelProps('events')} className="space-y-4">
           {/* Quick action to view full events drilldown */}
           <div className="flex justify-end">
             <button
@@ -280,7 +282,7 @@ export function NamespaceDrillDown({ data }: Props) {
       )}
 
       {activeTab === 'resources' && (
-        <div className="space-y-4">
+        <div {...getTabPanelProps('resources')} className="space-y-4">
           {/* Search and Filter Controls */}
           <div className="flex flex-col md:flex-row gap-3">
             <div className="relative flex-1">