[scanner] fix: add keyboard navigation to dropdown menus by clubanderson · Pull Request #19414 · kubestellar/console

clubanderson · 2026-06-22T15:34:36Z

Fixes #19410

Adds arrow key navigation, Enter/Space activation, and Escape to close for dropdown menus in 2 high-priority components using the existing useDropdownKeyNav hook.

Changes

PayloadCard.tsx: Replaced manual Escape handler with useDropdownKeyNav for priority dropdown menu
UpdateSettingsForm.tsx: Added keyboard navigation to channel selection dropdown

Implementation

Both components now use the useDropdownKeyNav hook which provides:

⬆️ ArrowUp/ArrowDown navigation between menu items
⏎ Enter/Space to activate selected item (native button behavior)
⎋ Escape to close dropdown

Notes

This is a partial fix addressing the 2 highest-priority dropdown components with actual keyboard navigation gaps. The other 3 files in the issue either have no dropdown menus (DashboardGrid, MiniDashboard) or use filter buttons rather than dropdown menus (Marketplace).

Build and lint validation will be handled by CI.

Adds arrow key navigation, Enter/Space activation, and Escape to close for dropdown menus in PayloadCard and UpdateSettingsForm components using the existing useDropdownKeyNav hook. - PayloadCard: Replaced manual Escape handler with useDropdownKeyNav - UpdateSettingsForm: Added keyboard nav to channel selection dropdown Fixes #19410 Signed-off-by: GitHub Actions Bot <actions@github.com> Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Signed-off-by: GitHub Actions Bot <actions@github.com>

kubestellar-prow · 2026-06-22T15:34:41Z

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
Once this PR has been reviewed and has the lgtm label, please assign eeshaansa for approval. For more information see the Code Review Process.

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

netlify · 2026-06-22T15:34:42Z

✅ Deploy Preview for kubestellarconsole ready!

Name	Link
🔨 Latest commit	`e1abf36`
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/6a395d725963c00008f97c1b
😎 Deploy Preview	https://deploy-preview-19414.console-deploy-preview.kubestellar.io
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2026-06-22T15:34:47Z

👋 Hey @clubanderson — thanks for opening this PR!

🤖 This project is developed exclusively using AI coding assistants.

Please do not attempt to code anything for this project manually.
All contributions should be authored using an AI coding tool such as:

Claude Code (Opus 4.5 / 4.6) — recommended

GitHub Copilot

Cursor

Other AI coding assistants

This ensures consistency in code style, architecture patterns, test coverage,
and commit quality across the entire codebase.

This is an automated message.

github-actions · 2026-06-22T15:34:48Z

🐝 Hi @clubanderson! I'm kubestellar-hive[bot], an automation bot for this repo.

Trusted users — org members and contributors with write access — can mention @kubestellar-hive in a comment to trigger repo automation.
On issues, that mention queues an automated fix attempt. On pull requests, it records extra context for existing automation.
This is not an interactive Q&A bot, so mentions should be treated as requests for automation rather than a conversation.

Automation may take a moment to start, and follow-up happens through workflow activity rather than chat replies.

github-actions · 2026-06-22T15:35:05Z

✅ Test Coverage Check

All new source files in this PR have corresponding test files.

Checked web/src/hooks/ and web/src/components/ against origin/main.

github-actions · 2026-06-22T15:35:07Z

Auto Test Generator

The following new files have no corresponding test file:

web/src/components/mission-control/PayloadCard.tsx
web/src/components/settings/UpdateSettingsForm.tsx

Please add tests or apply the needs-tests label to track this PR.

Copilot

Pull request overview

This PR addresses the keyboard navigation gaps flagged by the scanner for two high-priority dropdowns by wiring them to the shared useDropdownKeyNav hook, aiming to support Arrow key navigation and Escape-to-close behavior.

Changes:

Updated PayloadCard priority dropdown to use useDropdownKeyNav instead of a document-level Escape listener.
Updated UpdateSettingsForm channel dropdown to add a useDropdownKeyNav keydown handler to the listbox container.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 6 comments.

File	Description
`web/src/components/mission-control/PayloadCard.tsx`	Replaces manual Escape handling with `useDropdownKeyNav` and adds menu semantics for the priority dropdown.
`web/src/components/settings/UpdateSettingsForm.tsx`	Adds `useDropdownKeyNav` handling for the update channel dropdown listbox.

Comments suppressed due to low confidence (1)

web/src/components/settings/UpdateSettingsForm.tsx:203

The channel dropdown uses role="listbox", but its items are plain buttons without role="option"/aria-selected, which makes the listbox semantics incomplete for screen readers.

Also, because keyboard handling is attached to the listbox, focus should move into the list when it opens; otherwise Arrow/Escape won’t typically hit onKeyDown (focus stays on the trigger). Autofocusing the currently-selected option is a simple way to make the new key handler actually reachable.

            <div role="listbox" aria-labelledby="updates-channel-label" onKeyDown={channelDropdownKeyNav} className="absolute z-dropdown mt-2 w-full rounded-lg bg-card border border-border shadow-xl">
              {visibleChannels.map((option) => (
                <button
                  key={option.value}
                  onClick={() => handleSelectChannel(option.value)}

  const priorityBtnRef = useRef<HTMLButtonElement>(null)
-
-  // issue 6743 — Dismiss the priority dropdown when the user presses Escape. Without
-  // this, keyboard users had no way to close the menu once opened.
-  useEffect(() => {
-    if (!showPriorityMenu) return
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        e.stopPropagation()
-        setShowPriorityMenu(false)
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [showPriorityMenu])
+  const priorityMenuKeyNav = useDropdownKeyNav(() => setShowPriorityMenu(false))


@@ -276,6 +264,8 @@ export function PayloadCard({ project, onRemove, onUpdatePriority, onHover, onCl
                <div className="fixed inset-0 z-[9998]" role="presentation" aria-hidden="true" onClick={() => setShowPriorityMenu(false)} />


+                  role="menu"
+                  onKeyDown={priorityMenuKeyNav}


  ]
  const failCount = prereqChecks.filter((check) => !check).length

+  const channelDropdownKeyNav = useDropdownKeyNav(channelDropdown.close)


          </button>
          {channelDropdown.isOpen && (
-            <div role="listbox" aria-labelledby="updates-channel-label" className="absolute z-dropdown mt-2 w-full rounded-lg bg-card border border-border shadow-xl">
+            <div role="listbox" aria-labelledby="updates-channel-label" onKeyDown={channelDropdownKeyNav} className="absolute z-dropdown mt-2 w-full rounded-lg bg-card border border-border shadow-xl">


-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [showPriorityMenu])
+  const priorityMenuKeyNav = useDropdownKeyNav(() => setShowPriorityMenu(false))


Signed-off-by: clubanderson <club.anderson@gmail.com>

github-actions · 2026-06-22T16:07:15Z

Thank you for your contribution! Your PR has been merged.

Check out what's new:

KubeStellar Console — Live multi-cluster dashboard
Marketplace — Community extensions
Knowledge Base — Troubleshooting and how-tos

Stay connected: Slack #kubestellar-dev | Multi-Cluster Survey

github-actions · 2026-06-22T16:11:02Z

✅ Post-Merge Verification: passed

Commit: 9a29964563797d2629a5dc14a65faf3bb18d53fe
Specs run: Settings.spec.ts smoke.spec.ts
Report: https://github.com/kubestellar/console/actions/runs/27966579498

github-actions · 2026-06-22T16:14:13Z

Post-merge build verification passed ✅

Both Go and frontend builds compiled successfully against merge commit 9a29964563797d2629a5dc14a65faf3bb18d53fe.

Copilot AI review requested due to automatic review settings June 22, 2026 15:34

kubestellar-prow Bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Jun 22, 2026

kubestellar-prow Bot added the size/S Denotes a PR that changes 10-29 lines, ignoring generated files. label Jun 22, 2026

github-actions Bot added tier/2-standard ai-generated Pull request generated by AI labels Jun 22, 2026

Copilot started reviewing on behalf of clubanderson June 22, 2026 15:35 View session

Copilot AI reviewed Jun 22, 2026

View reviewed changes

fix: remove unused useEffect import

1092f83

Signed-off-by: clubanderson <club.anderson@gmail.com>

kubestellar-hive Bot mentioned this pull request Jun 22, 2026

🐝 Hive Advisory Report #17528

Open

Merge branch 'main' into scanner/fix-19410

e1abf36

clubanderson merged commit 9a29964 into main Jun 22, 2026
29 of 30 checks passed

kubestellar-prow Bot deleted the scanner/fix-19410 branch June 22, 2026 16:07

This was referenced Jun 22, 2026

[scanner] fix: resolve 5 test failures in coverage suite #19415

Closed

[Auto-QA] Keyboard navigation gaps detected #19410

Closed

clubanderson mentioned this pull request Jun 22, 2026

🐛 8 test failure(s) in Coverage Suite run #3853 #19418

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[scanner] fix: add keyboard navigation to dropdown menus#19414

[scanner] fix: add keyboard navigation to dropdown menus#19414
clubanderson merged 3 commits into
mainfrom
scanner/fix-19410

clubanderson commented Jun 22, 2026

Uh oh!

kubestellar-prow Bot commented Jun 22, 2026

Uh oh!

netlify Bot commented Jun 22, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -276,6 +264,8 @@ export function PayloadCard({ project, onRemove, onUpdatePriority, onHover, onCl
		<div className="fixed inset-0 z-[9998]" role="presentation" aria-hidden="true" onClick={() => setShowPriorityMenu(false)} />

Conversation

clubanderson commented Jun 22, 2026

Changes

Implementation

Notes

Uh oh!

kubestellar-prow Bot commented Jun 22, 2026

Uh oh!

netlify Bot commented Jun 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kubestellarconsole ready!

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026

✅ Test Coverage Check

Uh oh!

github-actions Bot commented Jun 22, 2026

Auto Test Generator

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

github-actions Bot commented Jun 22, 2026

✅ Post-Merge Verification: passed

Uh oh!

github-actions Bot commented Jun 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented Jun 22, 2026 •

edited

Loading