microsoft / microsoft/react-native-gallery

[React Native Gallery -> DatePicker]: Incorrect focus order is observed upon activating 'Next' or 'Previous' month buttons.

Open
#511 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A11ySev3 Area: Accessibility Area: Paper bug
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.