This repository is currently being migrated. It's locked while the migration is in progress.
Updated a11y for travel claim flow#13383
Open
matthew-df wants to merge 6 commits into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Improves accessibility in the multi-step travel claim (and other multi-step) flows by resetting screen reader focus to the top-of-screen header when navigating between steps, addressing issue #12558.
Changes:
- Adds a focus ref to
MultiStepSubtaskand triggers header focus reset on step navigation events. - Extends
FullScreenSubtaskto accept an optionalheaderRefand forwards it into the header. - Updates
HeaderBannerto support an externally provided ref (customRef) and uses it as the active focus target.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| VAMobile/src/components/Templates/MultiStepSubtask.tsx | Adds accessibility focus handling to reset focus on step transitions via navigator listeners. |
| VAMobile/src/components/Templates/HeaderBanner.tsx | Introduces customRef to allow external control of which header element receives accessibility focus. |
| VAMobile/src/components/Templates/FullScreenSubtask.tsx | Adds headerRef prop and forwards it to HeaderBanner to support multi-step focus resets. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…a-mobile-app into bug/12558-travel-claims-flow-a11y
AdryienH
previously approved these changes
May 5, 2026
…a-mobile-app into bug/12558-travel-claims-flow-a11y
AdryienH
reviewed
May 6, 2026
Comment on lines
+6
to
+17
| import { ParamListBase, useFocusEffect } from '@react-navigation/native'; | ||
| import { TransitionPresets, createStackNavigator } from '@react-navigation/stack'; | ||
|
|
||
|
|
||
|
|
||
| import { useSnackbar } from '@department-of-veterans-affairs/mobile-component-library'; | ||
|
|
||
|
|
||
|
|
||
| import { FullScreenSubtask, FullScreenSubtaskProps } from 'components'; | ||
| import { useAccessibilityFocus } from 'utils/hooks'; | ||
|
|
Contributor
There was a problem hiding this comment.
A bit of extra spacing here
digitalken
previously approved these changes
May 7, 2026
Contributor
digitalken
left a comment
digitalken
left a comment
There was a problem hiding this comment.
Approved. Looks good on iOS and Android.
2. Accessibility
Reference: Accessibility Testing Plan
- All interactive elements are reachable and operable via VoiceOver (iOS)
- All interactive elements are reachable and operable via TalkBack (Android)
- Screen reader announces elements in a logical reading order
- Headings are properly leveled (no skipped levels)
- Actionable elements have meaningful accessible labels (no bare "Button", "Link", etc.)
- Focus is managed correctly after navigation or modal dismiss
- Color is not the sole means of conveying information
6. Platform Parity
- Tested on iOS (simulator or device)
- Tested on Android (emulator or device)
- Behavior is consistent across platforms (or platform-specific behavior is intentional and documented)
7. Data and State
- Works with expected/valid test data (happy path)
8. Feature-Specific Verification
These checks are informed by the QA Test Context section of the PR.
- Happy path: Navigate to the feature using the path described in the PR and verify it works as described
AdryienH
previously approved these changes
May 7, 2026
This reverts commit 891331f.
AdryienH
approved these changes
May 7, 2026
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
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.
There is no requirement to implement the suggestions but please respond to Copilot review comments in some way. Unaddressed comments will prevent the PR from moving to the QA process.
Description of Change
Updated the a11y focusing to reset the screen reader focus to the top of the screen when moving through the travel claim details flow. This also affects anywhere with a multi-step including file request and submitting evidence.
Target Release Date
Link to Issue
Closes #12558
Code testing
Pre-QA Artifacts
Include all artifacts or select not applicable and explain below.
No visual changes but here is the screen reader interaction in iOS and Android
ScreenRecording_05-05-2026.07-27-06_1.MP4
Screen_recording_20260505_071923.mp4
How to capture these
Screenshots & Video
2x text size
Settings > Accessibility > Display & Text Size > Larger Text.Toggle ON, move slider.Settings > Accessibility > Display size and text.Adjust Font size and Display size sliders.VoiceOver / TalkBack (best on actual hardware)
Test Context for QA
How does a user get here?
Feature Flags
Risk Assessment:
What should QA pay extra attention to?
Test Review
Test User(s)
Checklist for QA
QA Engineer: Check off the items below as you test
Run a build for this branch