-
Notifications
You must be signed in to change notification settings - Fork 54
Description
Fix below 6 bugs in gallery new arch app:
1. [React Native Gallery Preview]: 'All Samples" heading text is not clearly visible in 'Dark mode'
re-Requisite:
Settings > Personalization > Color > Dark.
Repro-Steps:
Launch the React Native Gallery-Preview app.
Navigate to the 'Expand menu' button and invoke it.
Navigate to ‘All samples’ button present in left navigation pane and invoke it and observe the issue.
Actual Result:
All Samples" heading text is completely not visible to the user in 'Dark mode'
Note: Same issue is observed in "High Contrast Aquatic Theme"
Expected Result:
"All samples" heading text should be clearly visible to the user in 'Dark mode'
User Impact:
Low vision or color blind users who depend on dark mode may face difficulty if the 'All Samples' heading text is not clearly visible.
2.[React Native Gallery Preview]: 'This text will be copied to the clipboard' edit field is not clearly visible in 'Dark mode'
Pre-Requisite:
Settings > Personalization > Color > Dark.
Repro-Steps:
Launch the React Native Gallery-Preview app.
Navigate to the 'Expand menu' button and invoke it.
Navigate to ‘All samples’ button present in left navigation pane and invoke it.
Navigate to ‘Clipboard’ button present under “System” group and invoke it.
Now observe 'This text will be copied to the clipboard' edit field present below the ‘Copy text to the Clipboard’ button
Actual Result:
'This text will be copied to the clipboard' edit field is not clearly visible in 'Dark mode'
Note: Same issue is observed for the text which is present under the 'Paste text from the Clipboard' button in both "Dark mode" & "High Contrast Aquatic Theme"
Expected Result:
'This text will be copied to the clipboard' edit field should be clearly visible to the user in 'Dark mode'
User Impact:
Low vision or color blind users who depend on dark mode may face difficulty if 'This text will be copied to the clipboard' edit field is not clearly visible in dark mode
3. [React Native Gallery Preview: Touchable Opacity]: 'Touchable Opacity' button present under 'A simple touchable opacity' heading is not clearly visible when High Contrast Aquatic theme is applied.
Pre-Requisite:
Open settings -> Accessibility -> Contrast themes -> Select Aquatic/Desert themes.
Repro-Steps:
Launch the React Native Gallery-Preview app.
Navigate to 'Left navigation menu' button and invoke it.
Navigate to 'All sample' list item and invoke it.
Navigate to 'Touchable opacity' item and invoke it.
Now observe the behavior of all the buttons present in this page.
Actual Result:
'Touchable Opacity' button present under 'A simple touchable opacity' heading becomes difficult or impossible to read when the High Contrast Aquatic theme is applied.
Note: Same issue is observed for all the buttons present in 'Touchable opacity' and 'Touchable without feedback' pages.
Expected Results:
'Touchable Opacity' button present under 'A simple touchable opacity' heading should remain clearly visible to the user and readable when any high contrast theme (including Aquatic) is applied.
User Impact:
Users with low vision who rely on high contrast themes will face difficulties to interact with the interface are unable to read or access the Settings page content.
4. [React Native Gallery Preview: Settings]: Content on the 'Settings' page is not clearly visible when High Contrast Aquatic theme is applied.
AT Used: High contrast
Pre-Requisite:
Open settings -> Accessibility -> Contrast themes -> Select Aquatic/Desert themes.
Repro-Steps:
Launch the React Native Gallery-Preview app.
Navigate to 'Left navigation menu' button and invoke it.
Navigate to 'Settings' button and invoke it.
Now observe the behavior of all the content present in the 'Settings' page.
Actual Result:
The content on the Settings page becomes difficult or impossible to read when the High Contrast Aquatic theme is applied. Text and background colors do not provide sufficient contrast, making the content unclear or invisible.
Expected Results:
All content on the Settings page should remain clearly visible to the user and readable when any high contrast theme (including Aquatic) is applied.
User Impact:
Users with low vision who rely on high contrast themes will face difficulties to interact with the interface are unable to read or access the Settings page content.
5. [React Native Gallery Preview: Pressable]: 'Press me/Most recent event: press' buttons present in 'Pressable' page are not clearly visible when High Contrast Aquatic theme is applied.
Pre-Requisite:
Open settings -> Accessibility -> Contrast themes -> Select Aquatic/Desert themes.
Repro-Steps:
Launch the React Native Gallery-Preview app.
Navigate to 'Left navigation menu' button and invoke it.
Navigate to 'Basic input' list item and invoke it.
Navigate to 'Pressable' item and invoke it.
Now observe the behavior of all the buttons.
Actual Result:
'Press me/Most recent event: press' buttons present in 'Pressable' page becomes difficult or impossible to read when the High Contrast Aquatic theme is applied.
Expected Results:
'Press me/Most recent event: press' buttons present in 'Pressable' page should remain clearly visible to the user and readable when any high contrast theme (including Aquatic) is applied.
User Impact:
Users with low vision who rely on high contrast themes will face difficulties to interact with the interface are unable to read or access the button in this page.
6. [React Native Gallery Preview: Virtualized list]: 'Selection support: Multiple' button present under 'A virtualized list with multiple selection support' heading is not clearly visible when High Contrast Aquatic theme is applied.
Pre-Requisite:
Open settings -> Accessibility -> Contrast themes -> Select Aquatic/Desert themes.
Repro-Steps:
Launch the React Native Gallery-Preview app.
Navigate to 'Left navigation menu' button and invoke it.
Navigate to 'Collections' list item and invoke it.
Navigate to 'Virtualized list' item and invoke it.
Now observe the behavior of all the buttons present in this page.
Actual Result:
'Selection support: Multiple' button present under 'A virtualized list with multiple selection support' heading becomes difficult or impossible to read when the High Contrast Aquatic theme is applied.
Expected Results:
'Selection support: Multiple' button present under 'A virtualized list with multiple selection support' heading should remain clearly visible to the user and readable when any high contrast theme (including Aquatic) is applied.
User Impact:
Users with low vision who rely on high contrast themes will face difficulties to interact with the interface are unable to read or access the Settings page content.
- [React Native Gallery Preview]: Selected list items under the 'A simple VirtualizedList' heading are not visible to the user
Build Details:
OS Version: 24H2
OS Build: 26100.5074
App: React Native Gallery Preview
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 any item present under 'A simple VirtualizedList' heading and select it.
Now observe the selected list items
Actual Result:
Selected list items under the 'A simple VirtualizedList' heading are not visible to the user
Expected Result:
Selected list items under the 'A simple VirtualizedList' heading should be visible clearly to the user
Attach screenshot when done for all cases