fix: [Accessibility][Tracking] Other Accessibility Issues#82518
Conversation
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
|
@ShridharGoel 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] |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cb1832fbe3
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
…ListPage - Add onKeyDown handler to handle Space key for role="row" rows, since RNW PressResponder only allows Space activation for button-like roles - Extract shouldApplyTableRole variable to condition all table-related ARIA roles (table, row, columnheader) consistently - Pass isTableActive parameter to getWorkspaceMenuItem for conditional row vs button role
…bility-Tracking-Other-Accessibility-Issues
…bility-Tracking-Other-Accessibility-Issues
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d7131ab579
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
…bility-Tracking-Other-Accessibility-Issues
|
@TaduJR Unable to go to the domains row, and can't select the complete row of a workspace Screen.Recording.2026-02-19.at.1.34.56.AM.mov |
|
#76951 doesn't seem to have been fixed Screen.Recording.2026-02-19.at.1.32.24.AM.mov |
|
@TaduJR can you please prioritize this |
heyjennahay
left a comment
heyjennahay
left a comment
There was a problem hiding this comment.
No concern with product change
Sure sure 👍 |
…bility-Tracking-Other-Accessibility-Issues
As mention on W3 guidelines and the OP they are not navigated using tab since they are not interactive elements, you should use
For VoiceOver on Mac its equivalent is control + option + arrow key as on the test steps Mac-Chrome.mp4
Fixed these to focus on the whole workspace row |
Oh I see I was focusing on the end list |
|
Might be out of scope here: The full text of "Please fix the errors in the form before continuing." is not accessible. Only the link is accessible. Edit: The parts of the full text get selected on using the arrow keys, but not the whole text at once. Screen.Recording.2026-02-20.at.11.18.47.PM.mov |
|
What about the domains row ? |
The domains row also in not intractable so we don't need to announce like workspace row. We announce Workspace row because it's intractable using enter key then it leads you to workspace setting. Only the domain enable button should be focused via tabl tho I don't fully agree that the current announcement of the button is correct |
This is also expected I think as Per W3 guideline since we already announce the error on the input that would violate the guideline if we announce redundantly. On the current video you uploaded you can see the "fix the errors" is only focusable but the whole sentence is not focused |
I thought we would want the whole sentence to be focused. But it's fine if that's not expected. |
|
@TaduJR What about the "empty group" issue? |
On Real Device. It works as you expected. Screen_Recording_20260221_075055_New.Expensify.Dev.mp4 |
Fixed. |
|
Also please check this note on the Test Steps
|
src/pages/settings/Subscription/SubscriptionPlan/SubscriptionPlanCard.tsx
Outdated
Show resolved
Hide resolved
ShridharGoel
left a comment
ShridharGoel
left a comment
There was a problem hiding this comment.
Let's use diff values for web and native using index.ts and index.native.ts instead of the Platform.OS check.
|
✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release. |
|
🚧 @Julesssss 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/Julesssss in version: 9.3.25-0 🚀
|
|
Hi @TaduJR. QA failed this PR with one of the original issue 1771923492769.82518.mp4 |
|
🚀 Deployed to production by https://github.com/puneetlath in version: 9.3.25-13 🚀
|
|
Sorry for the delay. I thought I replied. The tables are not focusable with Tab that is the expected result. You should use Ctrl + Option + Arrow Keys if you are on Mac, or if you are on windows follow this guide https://support.microsoft.com/en-us/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1 about navigating on tables section. |
7 participants
Explanation of Change
This PR fixes 4 accessibility issues from the Accessibility Tracking initiative:
1. #77255 — Error messages not associated with input fields (WCAG 1.3.1)
Screen readers didn't announce form validation errors when inputs received focus because
FormHelpMessagehad no programmatic link to its input. Fixed by addingaria-describedby/nativeIDpairing inBaseTextInput(web) andaccessibilityHint(native) so errors are announced in context. Covers 15+ pages automatically since the fix is in the sharedBaseTextInputcomponent.2. #76951 — Subscription plan cards missing list semantics (WCAG 1.3.1)
Subscription plan cards were rendered as plain Views. Added
role="list"on the container androle="listitem"with descriptivearia-label+importantForAccessibility="no-hide-descendants"on each card so screen readers announce "list, 2 items" and provide atomic card descriptions.3. #76914 — Workspaces page missing table semantics (WCAG 1.3.1)
The Workspaces page displays a visual data table but used flat
View/Textwith no ARIA table roles. Addedrole="table",role="row",role="columnheader", androle="cell"on the wide layout so screen readers announce proper table structure with cell-by-cell navigation. Narrow/mobile layout retains button semantics since it uses a card-like UI. AddedTABLE,ROW,COLUMNHEADER, andCELLtoCONST.ROLE.4. #77573 — No screen reader feedback after requesting new OTP code (WCAG 4.1.3)
When requesting a new magic code, the success message "Code requested. Please check your device." appeared visually but screen readers never announced it. Fixed with two complementary mechanisms:
AccessibilityInfo.announceForAccessibility()in auseEffectfor reliable iOS/Android announcements<View accessibilityLiveRegion="polite">wrapper around the conditionalDotIndicatorMessagefor Android and web (aria-live)requestValidateCodeAction()to resetvalidateCodeSent: falsein optimistic data (matchingrequestContactMethodValidateCode) so the state transitiontrue → false → truecorrectly re-triggers the announcement on resendFixed Issues
$ #79248
PROPOSAL: #79248 (comment)
Tests
#77255 — Error messages associated with input fields
Web (JAWS/NVDA + Chrome):
aria-describedby)#76951 — Subscription plan cards with list semantics
Note: VoiceOver on macOS does not announce the position for the last item in the subscription plan benefits list (e.g., item 8 says "Budgeting" instead of "Budgeting, 8 of 8"). Items 1–7 announce position correctly. This
is a confirmed VoiceOver-only bug Windows Narrator announces all 8 items correctly including "8 of 8".
#76914 — Workspaces page with table semantics
#77573 — Screen reader feedback after requesting new OTP code
Native (VoiceOver on iOS / TalkBack on 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
Screen_Recording_20260216_202330_New.Expensify.Dev.mp4
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari
Mac-Chrome.mp4