Skip to content

Improve keyboard navigation for profile selector #368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Shyam-123pandey wants to merge 1 commit into from
Closed

Improve keyboard navigation for profile selector #368

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions src/components/profile-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,28 @@ export const ProfilePicker = ({
{ value: 'motorcycle', label: 'Motorcycle' },
];

const handleKeyDown = (event: React.KeyboardEvent, index: number) => {
if (event.key === 'ArrowRight') {
event.preventDefault();
const next = (index + 1) % profiles.length;
const nextProfile = profiles[next];

if (nextProfile) {
handleUpdateProfile(nextProfile.value as Profile);
}
}

if (event.key === 'ArrowLeft') {
event.preventDefault();
const prev = (index - 1 + profiles.length) % profiles.length;
const prevProfile = profiles[prev];

if (prevProfile) {
handleUpdateProfile(prevProfile.value as Profile);
}
}
};
Comment on lines +61 to +81
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

handleKeyDown changes the selected profile but does not move focus to the newly selected ToggleGroupItem. Because the handler’s index is bound to the originally focused button, subsequent ArrowLeft/ArrowRight presses can keep computing the next/prev from the old index and repeatedly re-select the same profile. Consider implementing roving-focus behavior by programmatically focusing the next/prev item (e.g., keep refs to items and call .focus() on the target), or compute next/prev from the currently selected activeProfile and also guard against no-op updates.

Copilot uses AI. Check for mistakes.

return (
<div className="flex flex-col gap-2">
<TooltipProvider>
Expand All @@ -79,6 +101,7 @@ export const ProfilePicker = ({
aria-label={`Select ${profile.label} profile`}
data-testid={`profile-button-` + profile.value}
data-state={profile.value === activeProfile ? 'on' : 'off'}
onKeyDown={(e) => handleKeyDown(e, i)}
>
Comment on lines 103 to 105
Copy link

Copilot AI Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new ArrowLeft/ArrowRight behavior introduced via onKeyDown isn’t covered by tests. Since this component already has a fairly comprehensive profile-picker.spec.tsx, add a test that focuses a profile button and verifies that pressing ArrowRight/ArrowLeft calls resetSettings/onProfileChange with the expected next/previous profile (including wrap-around).

Copilot uses AI. Check for mistakes.
{profile.value === activeProfile && loading ? (
<Loader2 className="size-4 animate-spin" />
Expand Down
Loading