Add focusable prop to horizontal ScrollView for keyboard accessibility #734
+2
−2
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fixes Bug 59184466: Users were unable to access the 'A Horizontal Scrollview' scroll bar using keyboard navigation, preventing keyboard-only users from interacting with the horizontal ScrollView example.
Changes
Added
focusable={true}
prop to the "A horizontal ScrollView" example in the NewArch version ofScrollViewExample.tsx
. This enables native keyboard navigation support in React Native Windows.Impact
With this change:
Technical Details
The fix leverages React Native Windows' native ScrollViewer keyboard support. By adding
focusable={true}
, the ScrollView becomes keyboard accessible and automatically handles arrow key navigation through the Windows platform layer.Example usage:
Accessibility
This change addresses MAS 2.1.1 – Keyboard accessibility requirements, ensuring that users who rely on keyboard navigation can fully interact with horizontal ScrollView content.
Files Changed
NewArch/src/examples/ScrollViewExample.tsx
(2 lines)Total: 2 lines changed in 1 file
Co-authored-by: @anupriya13
Fixes #651
Original prompt
Fixes #651
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.
Microsoft Reviewers: Open in CodeFlow