Remove interactive role and double announcement for switches#80765
Remove interactive role and double announcement for switches#80765Valforte merged 10 commits intoExpensify:mainfrom
Conversation
…ve platforms like Android or iOS
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
@dominictb Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
|
@dominictb Here is the overview of this PR. We've got two issues. The first issue isn't reproducible so instead of that we are covering this issue pointed out by @dominictb I've provided the recordings on Android native for both issues we are solving in this PR. We might need to run the test build for this to check on other platforms. |
|
@joekaufmanexpensify @dominictb Kindly bump for PR review. |
joekaufmanexpensify
left a comment
There was a problem hiding this comment.
Fine from a product perspective
|
@Uzaifm127 apologies for the delay from @dominictb , they're offboarding. I pinged them in Slack to see if they'll review or if we need a new C+ |
dominictb
left a comment
There was a problem hiding this comment.
Normally when the implementation deviates from the initial proposal, we'd ask to update the proposal first.
| <Switch | ||
| disabledAction={disabledAction} | ||
| accessibilityLabel={typeof subtitle === 'string' && subtitle ? `${switchAccessibilityLabel}, ${subtitle}` : switchAccessibilityLabel} | ||
| accessibilityLabel={ |
There was a problem hiding this comment.
Can you explain a bit about your fix here for #79590 (comment)?
Also, can you also give a brief description why the first issue #77497 is no longer reproducible? But we only had this instance left? Are there any similar instances?
There was a problem hiding this comment.
Can you explain a bit about your fix here for #79590 (comment)?
#79590 (comment) - This issue is the regression from this PR: #79149, so we aren't removing this completely instead we only preventing it if the accessibilityLabel and subtitle are same.
Also, can you also give a brief description why the first issue #77497 is no longer reproducible? But we only had this instance left? Are there any similar instances?
When I made my proposal, I made it in a hurry and I was brief about the issue. In the PR phase, when I deeply investigated the issues and tested in real android devices then I found the first issue not reproducible so I reverted my fix for first issue.
But we only had this instance left
If you're asking for the issue which we found here then we have several instances in the application but all the instances stems from src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx component as we used ToggleSettingOptionRow in several places, so fixing this ToggleSettingOptionRow will cover every instance.
src/components/MenuItem.tsx
Outdated
| accessibilityLabel={accessibilityLabel ?? defaultAccessibilityLabel} | ||
| accessible={shouldBeAccessible} | ||
| tabIndex={tabIndex} | ||
| tabIndex={getPlatform() !== CONST.PLATFORM.WEB && !interactive ? -1 : tabIndex} |
There was a problem hiding this comment.
Can you explain why we previously need to set role, accessible and accessibilityLabel based on interactive. But now we only have tabIndex?
There was a problem hiding this comment.
Previously we were trying to make the non interactive menu items non focusable but we don't need to make them non focusable, only "double tap to activate it" shouldn't be there in android and ios and setting the tab index to -1 would work.
I got to know about this when I was testing this in real android device and we are preventing it from web as setting tabIndex to -1 will make menu item non focusable in web which isn't the expected behaviour in the issue.
@dominictb Should I update my proposal first or we should move with the PR changes? |
Reviewer Checklist
Screenshots/VideosAndroid: mWeb ChromeScreen.Recording.2026-02-18.at.00.38.01.moviOS: HybridAppiOS: mWeb Safari |
This comment was marked as resolved.
This comment was marked as resolved.
|
Both of the issues are not fixed for me: Screen.Recording.2026-02-09.at.23.37.30.movScreen.Recording.2026-02-09.at.23.31.18.mov |
|
Will look into it. |
|
@dominictb Thanks for pointing out that the issue #77497 is reproducible. When I said
Then I only tested it on Android native and macOS, but it was reproducible on mWeb (Android and iOS) and iOS native. For MenuItem.tsx issue, this issue was fixed in Android native by setting tabIndex to -1 but was still reproducible on Android mWeb. Now I fixed on mWeb and native android. Now we are solving all three issues in all platforms, I added the video recordings and updated the PR description. Let me know if that sounds good to you. |
| const {isAccordionExpanded, shouldAnimateAccordionSection} = useAccordionAnimation(isActive); | ||
|
|
||
| // We are disabling the announcement for subtitle if subtitle and switchAccessibilityLabel are equal | ||
| const isSubtitleAndSwitchAccessibilityLabelAreEqual = switchAccessibilityLabel === subtitle; |
There was a problem hiding this comment.
| const isSubtitleAndSwitchAccessibilityLabelAreEqual = switchAccessibilityLabel === subtitle; | |
| const areSubtitleAndSwitchAccessibilityLabelEqual = switchAccessibilityLabel === subtitle; |
| * We hide the subtitle from screen readers if it is identical to the switch's accessibility label. | ||
| * 'aria-hidden' is used for compatibility with iOS mWeb, while 'accessible={false}' | ||
| * is required for iOS native. |
There was a problem hiding this comment.
| * We hide the subtitle from screen readers if it is identical to the switch's accessibility label. | |
| * 'aria-hidden' is used for compatibility with iOS mWeb, while 'accessible={false}' | |
| * is required for iOS native. | |
| * We hide the subtitle from screen readers to avoid double announcements | |
| * 'aria-hidden' is used for compatibility with iOS mWeb, while 'accessible={false}' works on iOS native. |
src/components/MenuItem.tsx
Outdated
| const platform = getPlatform(true); | ||
| // This is required because we are preventing the "double tap to activate" announcement on Android web | ||
| const isAndroidWeb = platform === CONST.PLATFORM.MOBILE_WEB && getOperatingSystem() === CONST.OS.ANDROID; |
There was a problem hiding this comment.
This can be moved out of functional component.
There was a problem hiding this comment.
Not required now.
src/components/MenuItem.tsx
Outdated
| const platform = getPlatform(true); | ||
| // This is required because we are preventing the "double tap to activate" announcement on Android web | ||
| const isAndroidWeb = platform === CONST.PLATFORM.MOBILE_WEB && getOperatingSystem() === CONST.OS.ANDROID; |
There was a problem hiding this comment.
| const platform = getPlatform(true); | |
| // This is required because we are preventing the "double tap to activate" announcement on Android web | |
| const isAndroidWeb = platform === CONST.PLATFORM.MOBILE_WEB && getOperatingSystem() === CONST.OS.ANDROID; | |
| const platform = getPlatform(true); | |
| // This is required because we are preventing the "double tap to activate" announcement on Android web | |
| const isAndroidWeb = Browser.isMobileChrome(); |
There was a problem hiding this comment.
Not required now.
|
@Uzaifm127 How did you test VoiceOver on iOS? |
|
@dominictb I used accessibility inspector built in mac. P.S - Looking into the bug. |
|
@dominictb I looked into the bug, this is occuring because we are giving fullDisabled to MenuItem which makes it and it's children disabled. I found giving fullDisabled as the only way to fix this on Android chrome, this is too confusing as the platform is web (Android chrome) and in mac it is not announcing but with Talkback it is announcing on Android web. I tried every possible way I could. A help would be appreciable from your side. cc: @rushatgabhane |
|
@Uzaifm127 we could fix the bug on Android web in a follow up, if that helps unblock us. |
|
@dominictb As per @rushatgabhane
I've reverted the changes in MenuItem.tsx and keep the fix for Android native only and implemented your suggestions. You can review now. |
situchan
left a comment
There was a problem hiding this comment.
Just approving to assign engineer
|
Can you merge main to fix conflict so I can review? |
|
🚧 @Valforte has triggered a test Expensify/App build. You can view the workflow run here. |
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚀 Deployed to staging by https://github.com/Valforte in version: 9.3.26-0 🚀
|
|
Hi @Uzaifm127 Is verification required only for Android and iOS apps? |
|
@izarutskaya |
|
🚀 Deployed to production by https://github.com/puneetlath in version: 9.3.26-8 🚀
|






Explanation of Change
Fixed Issues
$ #79243
$ #77497
$ #77496
PROPOSAL: #79243 (comment)
Tests
Test 1: Double announcement for switches.
Precondition: User is logged in.
Other occurrence for this:
From Step 2 or 3.
Test 2: Plain text announced as actionable (Android)
Precondition: You must have a virtual Expensify Card issued and visible in the wallet.
Test 3: Toggle/checkbox label announced twice - #77497
Precondition: User is logged in.
Offline tests
These are accessibility changes that don't affect offline behavior.
QA Steps
Same as tests
// TODO: These must be filled out, or the issue title must include "[No QA]."
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectioncanBeMissingparam foruseOnyxtoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Double announcement for switches.
Android-native-3.mov
Plain text announced as actionable
Android-native-2.mov
Toggle/checkbox label announced twice
Android-native-1.mov
Android: mWeb Chrome
Double announcement for switches.
Android-mWeb-3.mov
Plain text announced as actionable
Android-mWeb-2.mov
Toggle/checkbox label announced twice
Android-mWeb-1.mov
iOS: Native
Double announcement for switches.
ios-native-3.mov
Toggle/checkbox label announced twice
ios-native-1.mp4
iOS: mWeb Safari
Double announcement for switches.
ios-mWeb-3.mov
Toggle/checkbox label announced twice
ios-mWeb-1.mov
MacOS: Chrome / Safari