microsoft / microsoft/react-native-gallery

While navigating to the 'List items' present under 'A simple VirtualizedList' heading one side of the keyboard focus indicator is getting truncated.

Open
#709 0 comments 0 reactions 1 assignee View on GitHub

@Nitin-100 is already working on this.

Since Oct 5, 2025.

A11yRCA Area: Accessibility Area: Fabric bug
Dominant language
TypeScript
Stars
257
Forks
57
Avg merge
18h 19m
Merged PRs (30d)
10

Description

Build Details:
OS Version: 24H2
OS Build: 26100.5074
App: React Native Gallery Preview
AT Used: Keyboard

Repro-Steps:
Launch the React Native Gallery-Preview app.
Navigate to ‘All samples’ button present in left navigation pane and invoke it.
Navigate to ‘VirtualizedList’ button present under “Collection” group and invoke it.
Navigate using tab key to all the list items present under 'A simple VirtualizedList' heading.
Now observe the keyboard focus boarder (outline).
Actual Result:
While navigating to the 'List items' present under 'A simple VirtualizedList' heading one side of the keyboard focus indicator is getting truncated.

Note: Invoke 'Dialogs & flyouts' button >> invoke 'Modal' button >> invoke 'Open Modal' button present under 'A modal with events' group, now observe one side of focus indicator is getting truncated for 'Close Modal' button

Expected Result:
While navigating to the 'List items' present under 'A simple VirtualizedList' heading, all four sides of the keyboard focus indicator should be visible clearly.

User Impact:
Users with low vision will get confused and face difficulty in identifying the focused element if the focus indicator is truncated or not visible clearly to the user.

MAS Reference Link: MAS 2.4.7 – Focus Visible

Trap ID: 9.1 - Unattractive Appearance

“Have feedback on bugs logged, please tag bug as “A11yRCA” and add your feedback in the comment section.”

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.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.