fix: Color: Onboarding: The status of the progress bar relies only on the use of color#80460
Conversation
|
Hey, I noticed you changed If you want to automatically generate translations for other locales, an Expensify employee will have to:
Alternatively, if you are an external contributor, you can run the translation script locally with your own OpenAI API key. To learn more, try running: npx ts-node ./scripts/generateTranslations.ts --helpTypically, you'd want to translate only what you changed by running |
… the use of color
TaduJR
force-pushed
the
fix-Color-Onboarding-The-status-of-the-progress-bar-relies-only-on-the-use-of-color
branch
from
c7a2cef to
0df385d
Compare
…nboarding-The-status-of-the-progress-bar-relies-only-on-the-use-of-color
…nboarding-The-status-of-the-progress-bar-relies-only-on-the-use-of-color
…nboarding-The-status-of-the-progress-bar-relies-only-on-the-use-of-color
…web compatibility
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx
Outdated
Show resolved
Hide resolved
src/pages/OnboardingInterestedFeatures/BaseOnboardingInterestedFeatures.tsx
Outdated
Show resolved
Hide resolved
src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
Outdated
Show resolved
Hide resolved
src/pages/OnboardingWorkEmailValidation/BaseOnboardingWorkEmailValidation.tsx
Outdated
Show resolved
Hide resolved
@TaduJR Could you clarify why? Would it not be possible to centre-align the highlighted area so that it's roughly over the progress bar? |
…nboarding-The-status-of-the-progress-bar-relies-only-on-the-use-of-color
|
Do you have an iOS Physical device? |
|
Great news. The iOS Safari limitation is only on Emulator. Just tested out on Physical Devices and it's working. So we are good to merge if code looks good to you. |
Fixed Done. |
…om accessibility tree
|
🚧 @amyevans has triggered a test Expensify/App build. You can view the workflow run here. |
This comment has been minimized.
This comment has been minimized.
|
@TaduJR Nice work! I'm thinking we probably don't want the step and the percentage though (especially because it's not entirely accurate until we know the total number of steps)? I think keeping to a simple readout like There's also some slightly glitchy readouts where the value of the progress percentage is read out in a way that's awkward, e.g. |
Thanks @jjcoffee
Yea, I also thought about it, but it's unavoidable if we want to keep the semantics like the announcement of that is progress bar when user focuses on it. If we remove it the percentages go away but when a user focuses on it it announces as WDYT? If |
|
@TaduJR Ah, interesting! What about using |
…nboarding-The-status-of-the-progress-bar-relies-only-on-the-use-of-color
Just tried it. The percentage is gone but substituted with indeterminate keyword. I think that is a better approach. Screen.Recording.2026-03-13.at.8.11.22.in.the.evening.mov |
…nboarding-The-status-of-the-progress-bar-relies-only-on-the-use-of-color
…nboarding-The-status-of-the-progress-bar-relies-only-on-the-use-of-color # Conflicts: # src/pages/OnboardingInterestedFeatures/BaseOnboardingInterestedFeatures.tsx
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 @marcochavezf 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! 🧪🧪
|
|
🚀 Deployed to staging by https://github.com/marcochavezf in version: 9.3.41-0 🚀
Bundle Size Analysis (Sentry): |
8 participants
Explanation of Change
This PR addresses the WCAG 1.4.1 (Use of Color) accessibility violation in the onboarding progress bar by adding proper accessibility attributes.
Fixed Issues
$ #77334
PROPOSAL: #77334 (comment)
Tests
Web:
Cmd+F5) and navigate to the progress bar usingCtrl+Option+Right ArrowiOS:
Android:
Offline tests
Same as tests
QA Steps
// TODO: These must be filled out, or the issue title must include "[No QA]."
Same as tests
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
Android-Native.mp4
Android: mWeb Chrome
Android-mWeb.mp4
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
Mac-Chrome.mp4