Skip to content

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

@Nitin-100

Description

@Nitin-100

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.”

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions