Keyboard navigation bugs with some grouped components (e.g. ic-checkbox-group)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
### Summary of the bug
#### Expected behaviour
A user should be able to navigate in and out of grouped components (e.g. radio group, checkbox group, toggle button group) using the tab key, and navigate around the group (e.g. to individual checkboxes) using the arrow keys.
This is a standard keyboard navigation pattern that makes it easy for keyboard users to skip past widgets they don't want to interact with.
This [radio button story](https://mi6.github.io/ic-ui-kit/branches/3519-add-property-to-toggle-button-to-hide-outline/react/?path=/story/react-components-radio-button--helper-text) is a good example of the expected behaviour (tested in chrome and safari but not firefox).
#### Actual behaviour
ic-checkbox-group: In both chrome and safari, a user can't navigate through the widget using the arrow keys, they have to use the tab key. Because of this, they can't exit the widget from any checkbox using tab.
ic-toggle-button-group: In safari, a user can navigate between the buttons using either tab or the arrow keys. Because of this, they can't exit the widget from any button using tab. It behaves as expected in chrome.
I haven't done any testing in firefox.
### 📝 Acceptance Criteria
All grouped components follow the standard keyboard navigation pattern (tab to enter/exit, arrow keys to navigate) in chrome, safari and firefox.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing keyboard navigation for ic-checkbox-group and ic-toggle-button-group in Chrome, Safari, and Firefox, comparing tab and arrow-key behavior with the linked radio button story. Trace the grouped components' keyboard handling and verify that all grouped components support tab to enter and exit and arrow keys to move within the group.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100