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