microsoft / microsoft/react-native-gallery
[React Native Gallery -> DatePicker]: Incorrect focus order is observed upon activating 'Next' or 'Previous' month buttons.
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 257
- Forks
- 57
- Avg merge
- 18h 19m
- Merged PRs (30d)
- 10
Description
Build Details:
OS Version: Dev (OS Build 27695.1000)
App: React Native Gallery
App Version: 1.0.18.0
React Native Windows Version: 0.75.0
AT: Keyboard
Repro-Steps:
Launch the React Native Gallery app.
Navigate to ‘All samples’ button present in left navigation pane and invoke it.
Navigate to ‘DatePicker’ button present under “Date & Time” group and invoke it.
Navigate to 'calendar date picker' button present under "A simple DatePicker" heading.
Navigate to 'Next' button and invoke it.
Now navigate using tab key and observe the issue.
Actual Result:
Incorrect focus order is observed upon activating 'Next' or 'Previous' month buttons.
Expected Result:
Proper focus order should be defined upon activating 'Next' or 'Previous' month buttons. When user hit tab key from 'Next' month button, keyboard focus should land on first date of selected month.
User Impact:
Users with motor disabilities who rely on keyboard will be impacted if incorrect focus order is defined.
Link to ADO bug: https://microsoft.visualstudio.com/OS/_workitems/edit/54110019
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 the keyboard flow in the React Native Gallery DatePicker sample: activate the calendar date picker, then use Next or Previous and press Tab. Trace the DatePicker sample from the All samples > Date & Time entry point. Done means focus moves to the first date of the selected month after either month button is activated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100