🐛 Keyboard Navigation & Accessibility Issues in Interactive Components #657

AAdIprog · 2026-01-14T12:32:48Z

📌 Fixes

Fixes #655

📝 Summary of Changes

Implemented keyboard navigation improvements for key interactive components to enhance accessibility (a11y).

Use Cases Section: The flip cards were previously only accessible via hover. They are now focusable and can be flipped using Enter or Space.
Version Selector: The dropdown now supports standard ArrowUp and ArrowDown navigation to cycle through versions, as expected for accessible menus.

Changes Made

Updated src/components/master-page/UseCasesSection.tsx
- Added role="button" and tabIndex={0} to card containers.
- Added onKeyDown handler for Enter and Space keys.
- Added focus:ring styles for visual focus indication.
Updated src/components/docs/VersionSelector.tsx
- Added internal state focusedIndex to track keyboard focus.
- implemented handleKeyDown for ArrowUp, ArrowDown, and Enter.
- Applied visual focus styling to both Desktop (dropdown) and Mobile (list) variants to match hover states.

Checklist

Please ensure the following before submitting your PR:

I have reviewed the project's contribution guidelines.
I have written unit tests for the changes (if applicable).
I have updated the documentation (if applicable).
I have tested the changes locally and ensured they work as expected.
My code follows the project's coding standards.

Screenshots or Logs (if applicable)

No visible UI changes unless interacting via keyboard (focus rings appear).

👀 Reviewer Notes

The focus styles for the Use Cases cards use standard blue rings (ring-blue-500).
The Version Selector uses the same background colors for keyboard focus as it does for mouse hover, ensuring consistency.

kubestellar-prow · 2026-01-14T12:32:51Z

[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 mavrick-1 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-01-14T12:32:54Z

✅ Deploy Preview for kubestellar-docs ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`871f64f`
🔍 Latest deploy log	https://app.netlify.com/projects/kubestellar-docs/deploys/6967a1f5eaf412000812fbc4
😎 Deploy Preview	https://deploy-preview-657--kubestellar-docs.netlify.app
📱 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-01-14T12:32:57Z

Welcome to KubeStellar! 🚀 Thank you for submitting this Pull Request.

Before your PR can be merged, please ensure:

✅ DCO Sign-off - All commits must be signed off with git commit -s to certify the Developer Certificate of Origin

✅ PR Title - Must start with an emoji: ✨ (feature), 🐛 (bug fix), 📖 (docs), 🌱 (infra/tests), ⚠️ (breaking change)

Getting Started with KubeStellar:

📦 Quick Start
📖 Documentation
🎬 YouTube - Getting Started & Contributing

Contributor Resources:

🌟 Help KubeStellar Grow - We Need Adopters!

Our roadmap is driven entirely by adopter feedback. Whether you're using KubeStellar yourself or know someone who could benefit from multi-cluster Kubernetes:

📋 Take our Multi-Cluster Survey - Share your use cases and help shape our direction!

A maintainer will review your PR soon. Feel free to ask questions in the comments or on Slack!

kubestellar-prow · 2026-01-14T12:32:58Z

Hi @AAdIprog. Thanks for your PR.

I'm waiting for a kubestellar member to verify that this patch is reasonable to test. If it is, they should reply with /ok-to-test on its own line. Until that is done, I will not automatically test new commits in this PR, but the usual testing commands by org members will still work. Regular contributors should join the org to skip this step.

Once the patch is verified, the new status will be reflected by the ok-to-test label.

I understand the commands that are listed here.

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.

…lector Signed-off-by: AAdIprog <aadishah132@gmail.com>

Copilot

Pull request overview

This PR enhances keyboard accessibility for interactive components by adding keyboard navigation support to flip cards in the Use Cases section and the Version Selector dropdown.

Changes:

Added keyboard interaction (Enter/Space) and ARIA attributes to flip cards in UseCasesSection for accessibility
Implemented arrow key navigation (ArrowUp/ArrowDown) for the VersionSelector dropdown with visual focus indicators

Reviewed changes

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

File	Description
src/components/master-page/UseCasesSection.tsx	Added keyboard event handlers, ARIA attributes (role, tabIndex, aria-pressed, aria-label), and focus ring styling to flip cards
src/components/docs/VersionSelector.tsx	Added keyboard navigation state management, arrow key handlers, Enter key selection, and visual focus styling for both mobile and desktop variants

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-14T12:35:28Z

src/components/docs/VersionSelector.tsx

+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, versions.length, focusedIndex]);


The useEffect dependency array includes focusedIndex but the effect uses handleVersionChange which is defined outside the effect. This creates a stale closure issue where handleVersionChange may reference outdated values. Additionally, handleVersionChange itself is not memoized and depends on pathname and projectId. Add handleVersionChange to the dependency array or move it inside the useEffect, or wrap handleVersionChange in useCallback with proper dependencies.

Copilot · 2026-01-14T12:35:28Z

src/components/docs/VersionSelector.tsx

+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        setFocusedIndex(i => (i + 1) % versions.length);
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        setFocusedIndex(i => (i - 1 + versions.length) % versions.length);
+      } else if (event.key === 'Enter' && focusedIndex >= 0) {
+        event.preventDefault();
+        handleVersionChange(versions[focusedIndex].key);
+      }
+    }


When the dropdown first opens and focusedIndex is -1, pressing ArrowDown or ArrowUp will set focusedIndex to 0 or the last index respectively, but there's no initial focused state when the dropdown opens. Consider initializing focusedIndex to 0 (or the current version's index) when the dropdown opens so users immediately have a focused option. This provides better keyboard navigation UX and matches standard dropdown behavior.

Signed-off-by: AAdIprog <aadishah132@gmail.com>

btwshivam · 2026-01-14T15:14:30Z

@naman9271 @oksaumya review

kubestellar-prow · 2026-01-17T04:55:14Z

PR needs 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.

Copilot AI review requested due to automatic review settings January 14, 2026 12:32

kubestellar-prow bot added the dco-signoff: no Indicates the PR's author has not signed the DCO. label Jan 14, 2026

github-actions bot added frontend typescript labels Jan 14, 2026

kubestellar-prow bot added size/M Denotes a PR that changes 30-99 lines, ignoring generated files. needs-ok-to-test Indicates a PR that requires an org member to verify it is safe to test. labels Jan 14, 2026

Copilot started reviewing on behalf of AAdIprog January 14, 2026 12:33 View session

fix(a11y): add keyboard navigation support for UseCases and VersionSe…

a504dbf

…lector Signed-off-by: AAdIprog <aadishah132@gmail.com>

AAdIprog force-pushed the fix/keyboard-navigation branch from 563b83a to a504dbf Compare January 14, 2026 12:34

kubestellar-prow 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 Jan 14, 2026

AAdIprog changed the title ~~fix(a11y): add keyboard navigation support for UseCases and VersionSe…~~ fix(a11y): Keyboard Navigation & Accessibility Issues in Interactive Components Jan 14, 2026

Copilot AI reviewed Jan 14, 2026

View reviewed changes

AAdIprog changed the title ~~fix(a11y): Keyboard Navigation & Accessibility Issues in Interactive Components~~ 🐛 Keyboard Navigation & Accessibility Issues in Interactive Components Jan 14, 2026

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 Jan 14, 2026

trigger ci

871f64f

Signed-off-by: AAdIprog <aadishah132@gmail.com>

AAdIprog force-pushed the fix/keyboard-navigation branch from 2cc18d9 to 871f64f Compare January 14, 2026 14:02

kubestellar-prow 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 Jan 14, 2026

kubestellar-prow bot added the needs-rebase Indicates a PR cannot be merged because it has merge conflicts with HEAD. label Jan 17, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

🐛 Keyboard Navigation & Accessibility Issues in Interactive Components #657

🐛 Keyboard Navigation & Accessibility Issues in Interactive Components #657

Uh oh!

AAdIprog commented Jan 14, 2026

Uh oh!

kubestellar-prow bot commented Jan 14, 2026

Uh oh!

netlify bot commented Jan 14, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 14, 2026

Uh oh!

kubestellar-prow bot commented Jan 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 14, 2026

Uh oh!

Copilot AI Jan 14, 2026

Uh oh!

btwshivam commented Jan 14, 2026

Uh oh!

kubestellar-prow bot commented Jan 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

🐛 Keyboard Navigation & Accessibility Issues in Interactive Components #657

Are you sure you want to change the base?

🐛 Keyboard Navigation & Accessibility Issues in Interactive Components #657

Uh oh!

Conversation

AAdIprog commented Jan 14, 2026

📌 Fixes

📝 Summary of Changes

Changes Made

Checklist

Screenshots or Logs (if applicable)

👀 Reviewer Notes

Uh oh!

kubestellar-prow bot commented Jan 14, 2026

Uh oh!

netlify bot commented Jan 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for kubestellar-docs ready!

Uh oh!

github-actions bot commented Jan 14, 2026

Uh oh!

kubestellar-prow bot commented Jan 14, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

btwshivam commented Jan 14, 2026

Uh oh!

kubestellar-prow bot commented Jan 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Jan 14, 2026 •

edited

Loading