Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: improve screen reader experience by fixing redundant FAB.Group item announcements. #4196

Merged
merged 6 commits into from
Jan 8, 2024

Conversation

abdulbasithqb
Copy link
Contributor

@abdulbasithqb abdulbasithqb commented Nov 22, 2023

Motivation

The goal is to enhance the screen reader experience by resolving redundant item announcements in the FAB.Group.

Related Issue

Fixes #4063

Test Plan

  1. Check FAB.Group Presence:

    • Verify the presence of FAB.Group in FABExample.tsx.
  2. Android Testing (TalkBack):

    • Use TalkBack on Android to navigate the FAB.Group.
    • Confirm that each item is announced only once.
    • Ensure that no new accessibility issues are introduced.
  3. iOS Testing (VoiceOver):

    • Verify the presence and functionality of FAB.Group on iOS devices.
    • Use VoiceOver to navigate the FAB.Group.
    • Confirm that each item is announced only once.
    • Ensure that no new accessibility issues are introduced.

Remember to document any findings, changes, or considerations during the testing process. This comprehensive plan should help ensure a thorough evaluation of the accessibility improvements across different platforms and devices.

Result

Android IOS
accessiblity-issue.webm
IOS-VoiceOver.mov

@callstack-bot
Copy link

callstack-bot commented Nov 22, 2023

Hey @abdulbasithqb, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

@abdulbasithqb
Copy link
Contributor Author

abdulbasithqb commented Nov 24, 2023

iOS changes have been incorporated to improve accessibility
commit : ae1c1f3

IOS-VoiceOver.mov

@lukewalczak lukewalczak added this to the 5.12.0 milestone Nov 28, 2023
accessibilityLabel={accessibilityLabel}
accessibilityRole="button"
importantForAccessibility="no-hide-descendants"
accessibilityElementsHidden={true}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
accessibilityElementsHidden={true}
accessibilityElementsHidden

@@ -408,6 +412,8 @@ const FABGroup = ({
>
<Text
variant="titleMedium"
importantForAccessibility="no-hide-descendants"
accessibilityElementsHidden={true}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
accessibilityElementsHidden={true}
accessibilityElementsHidden

@@ -429,13 +435,13 @@ const FABGroup = ({
isV3 && { transform: [{ translateY: translations[i] }] },
it.style,
]}
accessibilityElementsHidden={true}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
accessibilityElementsHidden={true}
accessibilityElementsHidden

@lukewalczak lukewalczak merged commit 3ebc86a into callstack:main Jan 8, 2024
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Screen reader: Items in FAB group each have three focusable regions
3 participants