Fix: Remove Duplicate Focusable Elements#83155
Merged
roryabraham merged 4 commits intoExpensify:mainfrom Mar 2, 2026
Merged
Conversation
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
melvin-bot
bot
requested review from
trjExpensify
and removed request for
a team
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| )} | ||
| {column.rows.map((row) => ( | ||
| <Hoverable key={row.translationPath}> | ||
| {(hovered) => |
Contributor
There was a problem hiding this comment.
❌ CONSISTENCY-3 (docs)
The two branches of the ternary render nearly identical FooterRow components -- only the onPress vs href prop differs. Since FooterRow already handles the onPress/href branching internally (both the web and native implementations check if (onPress)), the caller can pass the whole row without splitting:
{column.rows.map((row) => (
<Hoverable key={row.translationPath}>
{(hovered) => (
<FooterRow
onPress={row.onPress}
href={row.href}
translationPath={row.translationPath}
text={translate(row.translationPath)}
style={getTextLinkStyle(hovered)}
/>
)}
</Hoverable>
))}This eliminates the duplicated JSX block.
Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
| style: StyleProp<TextStyle>; | ||
| }; | ||
|
|
||
| function FooterRow({href, onPress, text, style}: FooterRowProps) { |
Contributor
There was a problem hiding this comment.
❌ CONSISTENCY-4 (docs)
The translationPath prop is included in FooterRowProps (via FooterColumnRow) but is never used in the web implementation of FooterRow. The caller in Footer.tsx passes translationPath={row.translationPath} to this component, but it is silently ignored.
Consider either:
- Using
translationPathfor something (e.g., as adata-testidorsentryLabelfor consistency with the native version), or - Omitting it from the props type for the web implementation if it is truly not needed here.
Please rate this suggestion with 👍 or 👎 to help us improve! Reactions are used to monitor reviewer efficiency.
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
trjExpensify
previously approved these changes
Feb 23, 2026
Contributor
trjExpensify
left a comment
trjExpensify
left a comment
There was a problem hiding this comment.
Accessibility project PR 👍
Contributor
|
Will get to this one tomorrow. |
Contributor
Reviewer Checklist
Screenshots/VideosAndroid: HybridApp01_Android_Native.mp4Android: mWeb Chrome02_Android_Chrome.mp4iOS: HybridApp03_iOS_Native.mp4iOS: mWeb Safari04_iOS_Safari.mp4MacOS: Chrome / Safari05_MacOS_Chrome.mp4 |
Contributor
|
This one requires a little more testing, will finish it off on monday. |
roryabraham
approved these changes
Mar 2, 2026
Contributor
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
Contributor
|
🚧 @roryabraham has triggered a test Expensify/App build. You can view the workflow run here. |
Contributor
|
🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
|
Contributor
|
🚀 Deployed to staging by https://github.com/roryabraham in version: 9.3.28-0 🚀
|
Contributor
|
🚀 Deployed to staging by https://github.com/roryabraham in version: 9.3.30-0 🚀
|
Contributor
|
🚀 Deployed to production by https://github.com/blimpich in version: 9.3.30-3 🚀
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Explanation of Change
Prevent duplicate TalkBack focus stops by making footer links render as a single accessible pressable on native (inner text is non‑accessible), while keeping web TextLink behavior intact.
Remove extra accessibility nodes from text inputs by hiding the floating label and marking the wrapper as non‑accessible, so only the actual input is announced once.
Fixed Issues
$ #79245
PROPOSAL: #79245 (comment)
Tests
Precondition:
The user is not signed in
Second issue
Precondition:
The user is not signed in
'Phone or email input field, edit box'
Offline tests
Same as Tests.
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
phone-email-android.mp4
footer-android.mp4
Android: mWeb Chrome
email-mweb.mp4
footer-mweb.mp4
iOS: Native
Screen.Recording.1404-11-09.at.2.07.47.PM.mov
Screen.Recording.1404-11-09.at.2.18.20.PM.mov
iOS: mWeb Safari
Screen.Recording.1404-11-09.at.2.11.15.PM.mov
Screen.Recording.1404-11-09.at.2.23.46.PM.mov
MacOS: Chrome / Safari
Screen.Recording.1404-11-09.at.3.01.19.PM.mp4
Screen.Recording.1404-11-09.at.3.02.02.PM.mov