fix: Screen Reader: Many Pages: There is no dialog role and title announced by TaduJR · Pull Request #85221 · Expensify/App

TaduJR · 2026-03-13T11:43:28Z

Explanation of Change

When opening RHP pages, screen readers (JAWS, VoiceOver) don't announce the dialog role or title, violating WCAG 4.1.2 (Name, Role, Value).

This PR adds dialog semantics to the RHP container and moves focus to the first interactive element for screen reader announcement.

What's changed

DialogLabelContext - A ref-based label stack that communicates the screen title from Header to the RHP container. Uses direct DOM mutation (setAttribute) to update aria-label, avoiding React state updates during animation. Split into data and actions contexts per lint rules.
RHP Animated.View - Gets role="dialog", aria-modal="true", and aria-label (via DOM mutation) on wide layouts. Small screens already get dialog semantics from createModalStackNavigator. DialogLabelProvider wraps the Stack.Navigator inside the Animated.View.
useDialogLabelRegistration - Hook that encapsulates the label lifecycle (push on mount, pop on unmount). Only registers when isScreenHeader is true, preventing nested Header components (e.g., inside PDF modals) from overwriting the dialog label.
useDialogContainerFocus - Platform-specific hook (web only, no-op on native) that focuses the first interactive element (typically the back button) inside the dialog after the screen transition completes. Uses InteractionManager + requestAnimationFrame to defer past useAutoFocusInput's async focus chain, and preventScroll: true to avoid layout recalculation during close animation. Skips focus if another element already has focus. Filters out stacked screens via aria-hidden="true".
Header - Accepts isScreenHeader prop (set by HeaderWithBackButton) to gate dialog label registration and focus. Only screen-level headers participate in the dialog system.
HeaderWithBackButton - Passes isScreenHeader to Header. For avatar-header routes (e.g., MoneyReportHeader) that skip Header, registers report?.reportName as the dialog label directly.

Fixed Issues

$ #76944
PROPOSAL: #76944 (comment)

Tests

Setup: Use web (wide layout). Enable a screen reader (VoiceOver on macOS, or JAWS/NVDA on Windows).

Accessibility verification:

Open Settings > About
Navigate using Tab to "App download links" and press Enter to activate it
Verify the screen reader announces the dialog role
Verify focus moves to the back button inside the RHP
Press Tab verify focus moves to the next interactive element
Press Shift+Tab verify focus moves to the Back button
Press Back verify no flickering and focus is not lost

Regression tests (screen reader can be off):

#85013 Sluggish RHP close animation:

Open a workspace chat, create two expenses, open the report
Open any expense > click Amount
Click outside the RHP to close it
Repeat steps 2-3 several times
Verify RHP closes smoothly each time (no sluggishness)

#84960 Amount input field loses focus:

FAB > Create Expense
Verify the amount input field has focus and you can type immediately

#84958 Name field auto throws error:

Go to workspace settings > Reports > Add field > Name
Verify the Name field does not auto-throw an error on open

#84957 Blank page on Clear cache and restart:

Go to Account > Troubleshoot > Clear cache and restart
Verify the "Are you sure" modal appears (no blank page)

#84966 Blank page when deleting expense:

Open a workspace chat, create an expense
Right-click the preview > Delete
Verify the app does not crash
Open the report > More > Delete
Verify the delete modal opens (no blank page)

#84972 Blank page on disabling Approvals:

Go to workspace settings > Workflows > enable Approvals > disable Approvals
Verify the warning popup appears (no blank page)

#84975 Long click on Inbox chats:

Go to Inbox, long-click a chat > Pin or Mark as unread
Verify the action is carried out

#84995 Blank page after importing Per diem CSV:

Go to workspace > More Features > enable Per diem > import a valid CSV
Verify the workspace loads with imported settings (no blank page)

#85007 Removing a member crashes the page:

Go to workspaces > Members > click a user > Remove from workspace
Verify the user is removed (no blank page)

#85017 Blank page on deleting contact method:

Go to Account > Profile > Contact Method > click a method > 3-dot menu > Remove
Verify redirect to Contact methods RHP (no blank page)

#85019 Cancel payment leads to blank page:

Submit and pay an expense in a workspace chat
Open the report > More > Cancel payment
Verify the payment is canceled (no blank page)

#85033 Delete bank account blank page:

Go to Wallet > 3-dot menu on a bank account > Delete
Verify the confirmation modal appears (no blank page)

#85045 Sign out offline shows blank page:

Toggle Force offline (Ctrl+D), then Account > Sign out
Verify the "Are you sure?" confirmation appears (no blank page)

Verify that no errors appear in the JS console

Offline tests

Same as tests

QA Steps

// TODO: These must be filled out, or the issue title must include "[No QA]."
Same as tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

Mac-Chrome.1.mp4

…ounced

melvin-bot · 2026-03-13T11:43:35Z

@mkhutornyi 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]

src/components/Header.tsx

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 43d1d07094

ℹ️ 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".

src/components/Header.tsx

codecov · 2026-03-13T11:56:25Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
src/CONST/index.ts	`93.65% <ø> (ø)`
src/components/Header.tsx	`100.00% <100.00%> (ø)`
src/components/HeaderWithBackButton/index.tsx	`91.95% <100.00%> (+0.09%)`	⬆️
src/hooks/useDialogContainerFocus/index.native.ts	`100.00% <100.00%> (ø)`
...on/AppNavigator/Navigators/Overlay/BaseOverlay.tsx	`0.00% <ø> (ø)`
src/hooks/useDialogLabelRegistration.ts	`83.33% <83.33%> (ø)`
src/components/DialogLabelContext.tsx	`88.88% <88.88%> (ø)`
src/hooks/useDialogContainerFocus/index.ts	`0.00% <0.00%> (ø)`
...on/AppNavigator/Navigators/RightModalNavigator.tsx	`5.31% <0.00%> (-0.18%)`	⬇️
... and 11 files with indirect coverage changes

mkhutornyi · 2026-03-13T11:59:19Z

Please do regression tests:

Troubleshoot - Blank page is opened after clicking Clear cache and restart #84957
[Due for payment 2026-03-19] Report field & Taxes - Name field auto throws error #84958
[$250] Expense - Amount input field loses focus #84960
[Due for payment 2026-03-19] Expense - App crashes when deleting expense, or blank page opens #84966
[Due for payment 2026-03-19] Workflows - Blank page displayed on disabling Approvals in Workflows #84972
[Due for payment 2026-03-19] LHN - Nothing happens when long clicking on Inbox chats and Pinning or marking as unread #84975
[Due for payment 2026-03-19] WS Settings - Blank page after importing csv file to enable Per diem #84995
[Due for payment 2026-03-19] Removing a member from a workspace crashes the page #85007
[Due for payment 2026-03-19] Expense - Sluggish animation when RHP closes #85013
[Due for payment 2026-03-19] Contact method - Blank page opens when deleting a contact method #85017
[Due for payment 2026-03-19] Report - Cancel payment doesn't work and leads to blank page #85019
[Due for payment 2026-03-19] Bank Account - Delete modal not display and Wallet page blank when trying to delete any account #85033
[Due for payment 2026-03-19] Web - Sign out - Blank page shown after clicking 'Sign out' while offline #85045

…ion hook

…P animation

…Reader-Many-Pages-There-is-no-dialog-role-and-title-announced

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 95126f75b4

ℹ️ 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".

src/hooks/useDialogContainerFocus/index.ts

TaduJR · 2026-03-13T14:37:04Z

Ready for review.

You can ignore the Jest, it's failing on main.

mkhutornyi · 2026-03-13T14:38:30Z

Please summarize new fixes with root cause

rushatgabhane · 2026-03-13T14:41:24Z

@MelvinBot please help with #85221 (comment)

MelvinBot · 2026-03-13T14:43:28Z

Summary of Changes and Root Causes

Original Issue (#76944)

Problem: When opening Right-Hand Panel (RHP) pages, screen readers (JAWS, VoiceOver, NVDA) do not announce the dialog role or title, violating WCAG 4.1.2 (Name, Role, Value).

Root Cause: The RHP container (RightModalNavigator) renders as a plain Animated.View with no ARIA semantics. It has no role="dialog", no aria-modal, and no aria-label. Screen readers therefore treat it as generic content rather than a dialog, and don't announce the title when it opens.

Fix Breakdown

1. RHPDialogContainer + DialogLabelProvider (in RightModalNavigator.tsx)

Wraps the Stack.Navigator in a <View role="dialog" aria-modal> so screen readers recognize the RHP as a modal dialog.
DialogLabelProvider manages the aria-label for this container, ensuring it always reflects the current screen's title.

2. DialogLabelContext.tsx — ref-based label stack

Uses a ref-based stack (not React state) to track which screen title is active. Each Header pushes its title on mount and pops on unmount.
Updates the container's aria-label via direct DOM mutation (node.setAttribute), bypassing React's render cycle entirely.
Why refs instead of state: The initial implementation used React state, which triggered re-renders of the dialog container during RHP slide-in/slide-out animations. This caused a re-render cascade that made the JS-driven animation sluggish (regression [Due for payment 2026-03-19] Expense - Sluggish animation when RHP closes #85013). By using refs + direct DOM mutation, the label updates happen synchronously without triggering any React re-renders, keeping animations smooth.

3. useDialogContainerFocus (web-only, no-op on native)

After the screen transition completes (didScreenTransitionEnd), programmatically focuses the dialog heading so screen readers announce it.
Skips focus if an interactive element (<input>, <textarea>, <select>) already has focus — this preserves auto-focus behavior on form screens (preventing regressions like [$250] Expense - Amount input field loses focus #84960 where the amount input field would lose focus).
Uses claimInitialFocus() — a one-shot flag that ensures only the first Header to mount in a dialog claims focus, preventing focus fights between nested headers.

4. useDialogLabelRegistration hook (extracted from Header)

Encapsulates the push/pop label lifecycle into a dedicated hook, keeping Header.tsx focused on rendering.
Reads ScreenWrapperStatusContext to determine isTransitionReady, ensuring focus isn't moved until the screen transition animation has completed.

5. Header.tsx changes

Registers its title with the dialog context on mount.
Adds tabIndex={-1} to the title <Text> when inside a dialog, making it programmatically focusable without adding it to the tab order.
Applies styles.noOutline to prevent a visible focus ring on the heading.

Why this approach avoids the regression issues

The many regression tests (#84957, #84958, #84960, #84966, #84972, etc. — blank pages, lost focus, sluggish animation) all relate to the same concern: the accessibility additions must not interfere with existing navigation and rendering behavior. The key design decisions that prevent regressions:

Decision	Prevents
Ref-based label stack (no React state)	Re-render cascade during RHP animation (#85013)
Skip focus if input already focused	Stealing focus from form fields (#84960, #84958)
Focus only after transition ends	Focus-related blank pages during navigation (#84957, #84966, #84972, etc.)
`claimInitialFocus` one-shot flag	Focus fights between multiple Headers
`role="dialog"` on always-mounted container	No conditional mounting/unmounting that could break navigation state

…Reader-Many-Pages-There-is-no-dialog-role-and-title-announced

TaduJR · 2026-03-13T18:32:58Z

Jest fail is gone.

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3dfef9c6f2

ℹ️ 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".

src/hooks/useDialogContainerFocus/index.ts

mkhutornyi · 2026-03-15T02:47:45Z

Performance regression while testing #85007:

this branch: popover is not opened immediately, checkbox is not unchecked immediately

Screen.Recording.2026-03-15.at.2.45.05.am.mov

main:

Screen.Recording.2026-03-15.at.2.47.02.am.mov

TaduJR · 2026-03-15T06:51:44Z

main:

staging or dev?

mkhutornyi · 2026-03-15T06:56:49Z

main:

staging or dev?

main branch

TaduJR · 2026-04-06T20:40:17Z

@mkhutornyi

Could you share a video?

mkhutornyi · 2026-04-06T20:42:53Z

Video doesn't help because accessibility is broken while screen recording is on

Screen.Recording.2026-04-06.at.9.41.27.pm.mov

TaduJR · 2026-04-06T20:47:02Z

Ok I see. Its very confusing

TaduJR · 2026-04-06T20:48:14Z

@rushatgabhane

Could you give it a try? After the back button announcement there should be an announcement that announces its in dialog

TaduJR · 2026-04-06T20:49:38Z

Feel free to test @amyevans

src/hooks/useDialogLabelRegistration.ts

…Reader-Many-Pages-There-is-no-dialog-role-and-title-announced

…rFocus ref type

…Reader-Many-Pages-There-is-no-dialog-role-and-title-announced # Conflicts: # src/components/HeaderWithBackButton/index.tsx

github-actions · 2026-04-07T14:56:17Z

🚧 @amyevans has triggered a test Expensify/App build. You can view the workflow run here.

github-actions · 2026-04-07T15:01:43Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #85221.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-1276520-c55fd38-c6ee6fd7f772485045f1c85b226ef1659ba3dbd6/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-1276520-c55fd38-3e8921ae0c4155aa2d3e4412d8a82759cd2dc8b8/index.html

Web 🕸️
https://85221.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-04-07T15:01:58Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

mkhutornyi · 2026-04-07T17:06:25Z

@TaduJR please check this. Back button is highlighted after refresh app

Screen.Recording.2026-04-07.at.6.05.44.pm.mov

TaduJR · 2026-04-07T19:24:26Z

Sure. We will handle it in the next child issue, or should I create a separate PR.

LMK!

mkhutornyi · 2026-04-07T19:26:02Z

Sure. We will handle it in the next child issue, or should I create a separate PR.

Maybe separate PR. Please fix as priority. QA might report this as blocker.

TaduJR · 2026-04-07T19:27:14Z

Maybe separate PR. Please fix as priority. QA might report this as blocker.

On it now.

TaduJR · 2026-04-07T22:31:05Z

Maybe separate PR. Please fix as priority. QA might report this as blocker.

PR is ready.

OSBotify · 2026-04-08T00:18:22Z

🚀 Deployed to staging by https://github.com/amyevans in version: 9.3.54-0 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android
iOS

MelvinBot · 2026-04-08T00:20:40Z

No help site changes are required for this PR.

This PR adds screen reader accessibility (ARIA dialog role, aria-modal, aria-label) to the Right Hand Panel container — a purely technical accessibility fix (WCAG 4.1.2). It doesn't introduce new features, settings, UI labels, or navigation paths that would need documentation updates under docs/articles/.

mitarachim · 2026-04-08T01:01:46Z

Deploy Blocker #87304 was identified to be related to this PR.

OSBotify · 2026-04-09T00:31:29Z

🚀 Deployed to production by https://github.com/roryabraham in version: 9.3.54-7 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

TaduJR added 2 commits March 13, 2026 14:18

fix: Screen Reader: Many Pages: There is no dialog role and title ann…

648839d

…ounced

refactor: simplify useDialogContainerFocus JSDoc comment

43d1d07

TaduJR requested review from a team as code owners March 13, 2026 11:43

melvin-bot bot assigned TaduJR Mar 13, 2026

melvin-bot bot requested review from mkhutornyi and removed request for a team March 13, 2026 11:43

melvin-bot bot requested review from heyjennahay and removed request for a team March 13, 2026 11:43

github-actions bot reviewed Mar 13, 2026

View reviewed changes

src/components/Header.tsx Show resolved Hide resolved

chatgpt-codex-connector bot reviewed Mar 13, 2026

View reviewed changes

src/components/Header.tsx Outdated Show resolved Hide resolved

TaduJR marked this pull request as draft March 13, 2026 12:00

TaduJR added 3 commits March 13, 2026 15:03

refactor: extract dialog label lifecycle into useDialogLabelRegistrat…

f2a9e9e

…ion hook

fix: use ref-based label stack to prevent re-render cascade during RH…

890565c

…P animation

Merge branch 'main' of https://github.com/TaduJR/App into fix-Screen-…

95126f7

…Reader-Many-Pages-There-is-no-dialog-role-and-title-announced

TaduJR marked this pull request as ready for review March 13, 2026 14:19

chatgpt-codex-connector bot reviewed Mar 13, 2026

View reviewed changes

src/hooks/useDialogContainerFocus/index.ts Outdated Show resolved Hide resolved

Merge branch 'main' of https://github.com/TaduJR/App into fix-Screen-…

3dfef9c

…Reader-Many-Pages-There-is-no-dialog-role-and-title-announced

chatgpt-codex-connector bot reviewed Mar 15, 2026

View reviewed changes

src/hooks/useDialogContainerFocus/index.ts Outdated Show resolved Hide resolved

This comment was marked as outdated.

Sign in to view

mkhutornyi reviewed Apr 6, 2026

View reviewed changes

src/hooks/useDialogLabelRegistration.ts Show resolved Hide resolved

TaduJR added 3 commits April 7, 2026 04:39

Merge branch 'main' of https://github.com/TaduJR/App into fix-Screen-…

6da2fac

…Reader-Many-Pages-There-is-no-dialog-role-and-title-announced

refactor: remove dead isInsideDialog return and fix UseDialogContaine…

90962e7

…rFocus ref type

Merge branch 'main' of https://github.com/TaduJR/App into fix-Screen-…

068aa27

…Reader-Many-Pages-There-is-no-dialog-role-and-title-announced # Conflicts: # src/components/HeaderWithBackButton/index.tsx

mkhutornyi approved these changes Apr 7, 2026

View reviewed changes

melvin-bot bot requested a review from amyevans April 7, 2026 09:47

amyevans approved these changes Apr 7, 2026

View reviewed changes

amyevans merged commit 1276520 into Expensify:main Apr 7, 2026
33 checks passed

TaduJR mentioned this pull request Apr 7, 2026

[CP staging] follow-up: Screen Reader: Many Pages: There is no dialog role and title announced #87292

Merged

54 tasks

OSBotify mentioned this pull request Apr 7, 2026

Deploy Checklist: New Expensify 2026-04-07 #87294

Closed

97 tasks

mitarachim mentioned this pull request Apr 8, 2026

[Due for payment 2026-04-16] Web - Expense - Enter on confirm page returns to amount input page #87304

Closed

7 tasks

melvin-bot bot mentioned this pull request Apr 9, 2026

[Due for payment 2026-04-16] [$500] Screen Reader: Many Pages: There is no dialog role and title announced #76944

Open

Conversation

TaduJR commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

What's changed

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot bot commented Mar 13, 2026

Uh oh!

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

codecov bot commented Mar 13, 2026 • edited by github-actions bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

mkhutornyi commented Mar 13, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

TaduJR commented Mar 13, 2026

Uh oh!

mkhutornyi commented Mar 13, 2026

Uh oh!

rushatgabhane commented Mar 13, 2026

Uh oh!

MelvinBot commented Mar 13, 2026

Summary of Changes and Root Causes

Original Issue (#76944)

Fix Breakdown

Why this approach avoids the regression issues

Uh oh!

TaduJR commented Mar 13, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

mkhutornyi commented Mar 15, 2026

Uh oh!

TaduJR commented Mar 15, 2026

Uh oh!

mkhutornyi commented Mar 15, 2026

Uh oh!

TaduJR commented Apr 6, 2026

Uh oh!

mkhutornyi commented Apr 6, 2026

Uh oh!

This comment was marked as outdated.

TaduJR commented Apr 6, 2026

Uh oh!

TaduJR commented Apr 6, 2026

Uh oh!

TaduJR commented Apr 6, 2026

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

github-actions bot commented Apr 7, 2026

Uh oh!

OSBotify commented Apr 7, 2026

Uh oh!

mkhutornyi commented Apr 7, 2026

Uh oh!

TaduJR commented Apr 7, 2026

Uh oh!

mkhutornyi commented Apr 7, 2026

TaduJR commented Mar 13, 2026 •

edited

Loading

codecov bot commented Mar 13, 2026 •

edited by github-actions bot

Loading