♿ Fix keyboard navigation gaps in Tour, Onboarding, CardHistory, and ClusterGrid by Copilot · Pull Request #3858 · kubestellar/console

Copilot · 2026-03-29T07:45:00Z

Auto-QA flagged clickable <div> elements without keyboard access and icon-only <button> elements missing aria-label, making these controls unreachable or unidentifiable via keyboard/screen reader.

📌 Fixes

📝 Summary of Changes

ClusterGrid.tsx: Three clickable card <div>s (Full, List, Compact) were keyboard-dead — added role="button", tabIndex={0}, onKeyDown (Enter/Space), and aria-label; extracted shared handleCardKeyDown helper
Tour.tsx: Icon-only skip (✕) and previous-step (‹) buttons had no aria-label
Onboarding.tsx: Rank-ordering arrow buttons had no aria-label — now dynamic: Move ${option} up/down
CardHistory.tsx: Restore and remove icon-only buttons had no aria-label — now dynamic: Restore/Remove ${entry.cardTitle} from history
Pods.tsx: Already compliant — no changes needed

Changes Made

Fixed FullClusterCard, ListClusterCard, CompactClusterCard divs: role="button" + tabIndex + onKeyDown + aria-label
Added handleCardKeyDown utility to deduplicate keyboard handler across card variants
Added aria-label to icon-only buttons in Tour.tsx, Onboarding.tsx, CardHistory.tsx

Checklist

I used a coding agent (Claude Code, Copilot, Gemini, or Codex) to generate/review this code
I have reviewed the project's contribution guidelines
New cards target console-marketplace, not this repo
isDemoData is wired correctly (cards show Demo badge when using demo data)
I have written unit tests for the changes (if applicable)
I have tested the changes locally and ensured they work as expected
All commits are signed with DCO (git commit -s)

Screenshots or Logs (if applicable)

N/A — pure accessibility attribute changes, no visual diff.

👀 Reviewer Notes

All three cluster card variants (FullClusterCard, ListClusterCard, CompactClusterCard) share the same handleCardKeyDown helper. The aria-label values for Onboarding rank buttons and CardHistory action buttons are dynamic so screen reader users know exactly which item is being acted on.

📱 Kick off Copilot coding agent tasks wherever you are with GitHub Mobile, available on iOS and Android.

netlify · 2026-03-29T07:45:06Z

✅ Deploy Preview for kubestellarconsole ready!

Name	Link
🔨 Latest commit	`a47da63`
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellarconsole/deploys/69c93929e1ace20008b5a3d2
😎 Deploy Preview	https://deploy-preview-3858.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-03-29T07:45:10Z

👋 Hey @Copilot — 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.

Copilot

Copilot wasn't able to review any files in this pull request.

kubestellar-prow · 2026-03-29T08:02:17Z

[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 ask for approval from clubanderson. 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

…dHistory, and ClusterGrid - Tour.tsx: add aria-label to icon-only skip and previous-step buttons - Onboarding.tsx: add dynamic aria-label to ArrowUp/ArrowDown rank move buttons - CardHistory.tsx: add dynamic aria-label to restore and remove icon-only buttons - ClusterGrid.tsx: add role=button, tabIndex, onKeyDown (Enter/Space), and aria-label to FullClusterCard, ListClusterCard, and CompactClusterCard clickable divs; extract handleCardKeyDown helper to avoid duplication Signed-off-by: GitHub Copilot <copilot@github.com> Agent-Logs-Url: https://github.com/kubestellar/console/sessions/00628e4a-456a-4619-a1a5-d3fe5f29e8b0 Co-authored-by: clubanderson <407614+clubanderson@users.noreply.github.com>

Main already had these aria-labels from a prior commit. The rebase introduced duplicates that broke the TypeScript build (TS17001). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

kubestellar-prow · 2026-03-29T14:37:31Z

Thanks for your pull request. Before we can look at it, you'll need to add a 'DCO signoff' to your commits.

📝 Please follow instructions in the contributing guide to update your commits with the DCO

Full details of the Developer Certificate of Origin can be found at developercertificate.org.

The list of commits missing DCO signoff:

eb2a6c7 Initial plan
a47da63 fix: remove duplicate aria-label attributes after rebase

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository. I understand the commands that are listed here.

github-actions · 2026-03-29T14:37:46Z

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

Copilot AI assigned Copilot and clubanderson Mar 29, 2026

kubestellar-prow bot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. dco-signoff: no Indicates the PR's author has not signed the DCO. labels Mar 29, 2026

Copilot started work on behalf of clubanderson March 29, 2026 07:45 View session

Copilot AI linked an issue Mar 29, 2026 that may be closed by this pull request

[Auto-QA] Keyboard navigation gaps #3857

Closed

github-actions bot added the copilot label Mar 29, 2026

github-actions bot removed the dco-signoff: no Indicates the PR's author has not signed the DCO. label Mar 29, 2026

kubestellar-prow bot added the size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. label Mar 29, 2026

github-actions bot added the dco-signoff: yes Indicates the PR's author has signed the DCO. label Mar 29, 2026

github-actions bot mentioned this pull request Mar 29, 2026

📋 [aw] No-Op Runs #3237

Closed

clubanderson changed the title ~~[WIP] Fix keyboard navigation gaps in onboarding components~~ 🐛 Fix keyboard navigation gaps in onboarding components Mar 29, 2026

clubanderson removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Mar 29, 2026

clubanderson marked this pull request as ready for review March 29, 2026 07:54

Copilot AI review requested due to automatic review settings March 29, 2026 07:54

kubestellar-prow bot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. and removed do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. labels Mar 29, 2026

Copilot AI reviewed Mar 29, 2026

View reviewed changes

kubestellar-prow bot added dco-signoff: no Indicates the PR's author has not signed the DCO. and removed dco-signoff: yes Indicates the PR's author has signed the DCO. labels Mar 29, 2026

kubestellar-prow bot added size/S Denotes a PR that changes 10-29 lines, ignoring generated files. and removed size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. labels Mar 29, 2026

github-actions bot added dco-signoff: yes Indicates the PR's author has signed the DCO. and removed dco-signoff: no Indicates the PR's author has not signed the DCO. labels Mar 29, 2026

Copilot AI changed the title ~~🐛 Fix keyboard navigation gaps in onboarding components~~ ♿ Fix keyboard navigation gaps in Tour, Onboarding, CardHistory, and ClusterGrid Mar 29, 2026

Copilot finished work on behalf of clubanderson March 29, 2026 08:02

Copilot AI requested a review from clubanderson March 29, 2026 08:02

github-actions bot mentioned this pull request Mar 29, 2026

[Auto-QA] High-complexity components could be split #3465

Closed

Copilot AI and others added 3 commits March 29, 2026 16:35

Initial plan

eb2a6c7

fix: remove duplicate aria-label attributes after rebase

a47da63

Main already had these aria-labels from a prior commit. The rebase introduced duplicates that broke the TypeScript build (TS17001). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

clubanderson force-pushed the copilot/auto-qa-keyboard-navigation-gaps branch from 50f7d52 to a47da63 Compare March 29, 2026 14:37

kubestellar-prow bot added dco-signoff: no Indicates the PR's author has not signed the DCO. and removed dco-signoff: yes Indicates the PR's author has signed the DCO. labels Mar 29, 2026

github-actions bot added dco-signoff: yes Indicates the PR's author has signed the DCO. and removed dco-signoff: no Indicates the PR's author has not signed the DCO. labels Mar 29, 2026

clubanderson merged commit d12ff4d into main Mar 29, 2026
14 of 16 checks passed

kubestellar-prow bot deleted the copilot/auto-qa-keyboard-navigation-gaps branch March 29, 2026 14:37

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

♿ Fix keyboard navigation gaps in Tour, Onboarding, CardHistory, and ClusterGrid#3858

♿ Fix keyboard navigation gaps in Tour, Onboarding, CardHistory, and ClusterGrid#3858
clubanderson merged 3 commits intomainfrom
copilot/auto-qa-keyboard-navigation-gaps

Copilot AI commented Mar 29, 2026 •

edited

Loading

Uh oh!

netlify bot commented Mar 29, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Mar 29, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

kubestellar-prow bot commented Mar 29, 2026

Uh oh!

kubestellar-prow bot commented Mar 29, 2026

Uh oh!

Uh oh!

github-actions bot commented Mar 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

Copilot AI commented Mar 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Fixes

📝 Summary of Changes

Changes Made

Checklist

Screenshots or Logs (if applicable)

👀 Reviewer Notes

Uh oh!

netlify bot commented Mar 29, 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 Mar 29, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

kubestellar-prow bot commented Mar 29, 2026

Uh oh!

kubestellar-prow bot commented Mar 29, 2026

Uh oh!

Uh oh!

github-actions bot commented Mar 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Mar 29, 2026 •

edited

Loading

netlify bot commented Mar 29, 2026 •

edited

Loading