Skip to content

feat(web): Add navigation focus handler for assistive technology focus restoration - #170046

Merged
flutter-zl merged 49 commits into
flutter:masterfrom
flutter-zl:focus_0603
Jun 30, 2025
Merged

flutter-zl merged 49 commits into
flutter:masterfrom
flutter-zl:focus_0603

Conversation

@flutter-zl

@flutter-zl flutter-zl commented Jun 5, 2025 •

Copy link
Copy Markdown
Contributor

Description
This pull request adds a navigation focus handler to the Flutter web engine that bridges assistive technology activations with Flutter's focus tracking system. The listener intercepts screen reader activations (VoiceOver, NVDA, JAWS, etc.) and forces DOM focus on the activated elements, ensuring they integrate properly with Flutter's navigation focus restoration.

Before
When using VoiceOver or other screen readers to navigate between pages in a Flutter web app, focus restoration would fail because assistive technology activations don't naturally trigger the DOM focus events that Flutter's navigation system expects. Users would lose their navigation context, with focus jumping to default elements instead of returning to the previously activated button.

Before behavior demo
https://focus-demo-0529-before.web.app
On mac os, Use command + F5 to activate voice over.
Use control + option + arrow right to focus on "Go to page two" button.
Use control + option + space to click the "Go to page two" button.
Then in page two, use control + option + arrow right to focus on "Back to page one" button.
The focus will be on "Page one" heading instead of "Go to page two" button. This is not expected

After
Screen reader users can now navigate between pages and have their focus properly restored to the previously activated element (e.g., "Go to Page Two" button) when returning to a previous page, providing a consistent and accessible navigation experience across all assistive technologies.

After behavior demo
https://focus-demo-0529-after.web.app
On mac os, Use command + F5 to activate voice over.
Use control + option + arrow right to focus on "Go to page two" button.
Use control + option + space to click the "Go to page two" button.
Then in page two, use control + option + arrow right to focus on "Back to page one" button.
The focus will be on "Go to page two" button. This is expected.

Issue Fixed
This PR addresses GitHub Issue #140483, which reports that VoiceOver focus restoration doesn't work in Flutter web applications during navigation.

Pre-launch Checklist

  • I read the [Contributor Guide] and followed the process outlined there for submitting PRs.
  • I read the [Tree Hygiene] wiki page, which explains my responsibilities.
  • I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement].
  • I signed the [CLA].
  • I listed at least one issue that this PR fixes in the description above.
  • I updated/added relevant documentation (doc comments with ///).
  • I added new tests to check the change I am making, or this PR is [test-exempt].
  • I followed the [breaking change policy] and added [Data Driven Fixes] where supported.
  • All existing and new tests are passing.

@github-actions github-actions Bot added engine flutter/engine related. See also e: labels. platform-web Web applications specifically labels Jun 5, 2025
@flutter-zl

Copy link
Copy Markdown
Contributor Author

Difference between TAB navigation and VoiceOver navigation:

Using Tab + Space (keyboard-only user):
If you use the keyboard to navigate:

Press Tab to focus on the "Go to page two" button in https://focus-demo-0529-before.web.app/

Press Space to activate it

On Page Two, press Tab to focus on the "Back to page one" button

Press Space to activate it

Back on Page One, the focus is restored to the "Go to page two" button (correct behavior for keyboard users)

Because DOM focus was used, and frameworks like Flutter handle focus restoration for keyboard users

Using VoiceOver on macOS:
Activate VoiceOver: Command + F5

Use Control + Option + Right Arrow to navigate to the "Go to page two" button

Use Control + Option + Space to activate it

On Page Two, use Control + Option + Right Arrow to focus on the "Back to page one" button

Activate it

Back on Page One, VoiceOver virtual cursor lands on the "Page one" heading, not the "Go to page two" button

Because VoiceOver’s virtual cursor is separate from DOM focus, and it doesn’t trigger or track DOM focus events by default

@flutter-zl
flutter-zl requested review from hannah-hyj and mdebbar June 5, 2025 15:21
@flutter-zl
flutter-zl marked this pull request as ready for review June 5, 2025 15:22
@flutter-zl
flutter-zl requested a review from yjbanov June 5, 2025 15:23
@flutter-zl

flutter-zl commented Jun 5, 2025 •

Copy link
Copy Markdown
Contributor Author

Difference between TAB navigation and VoiceOver navigation:

Using Tab + Space (keyboard-only user): If you use the keyboard to navigate:

Press Tab to focus on the "Go to page two" button in https://focus-demo-0529-before.web.app/

Press Space to activate it

On Page Two, press Tab to focus on the "Back to page one" button

Press Space to activate it

Back on Page One, the focus is restored to the "Go to page two" button (correct behavior for keyboard users)

Because DOM focus was used, and frameworks like Flutter handle focus restoration for keyboard users

Using VoiceOver on macOS: Activate VoiceOver: Command + F5

Use Control + Option + Right Arrow to navigate to the "Go to page two" button

Use Control + Option + Space to activate it

On Page Two, use Control + Option + Right Arrow to focus on the "Back to page one" button

Activate it

Back on Page One, VoiceOver virtual cursor lands on the "Page one" heading, not the "Go to page two" button

Because VoiceOver’s virtual cursor is separate from DOM focus, and it doesn’t trigger or track DOM focus events by default

@yjbanov , @mdebbar, @hannah-hyj , From above observation, we can conclude that we need to forces DOM focus on the activated elements when using screen reader activations. Hence this PR can fix the issue #140483.

@flutter-zl
flutter-zl marked this pull request as draft June 6, 2025 16:16
@flutter-dashboard

Copy link
Copy Markdown

This pull request has been changed to a draft. The currently pending flutter-gold status will not be able to resolve until a new commit is pushed or the change is marked ready for review again.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

@flutter-zl flutter-zl changed the title feat(web): Add global click listener for assistive technology focus restoration feat(web): Add navigation focus handler for assistive technology focus restoration Jun 9, 2025
@flutter-zl
flutter-zl marked this pull request as ready for review June 9, 2025 16:17
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 2, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 2, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 2, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 3, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 3, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 3, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 3, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 3, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 4, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 4, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 4, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 5, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 5, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 6, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 6, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 6, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 7, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 7, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Jul 7, 2025
mboetger pushed a commit to mboetger/flutter that referenced this pull request Jul 21, 2025
…s restoration (flutter#170046)

**Description**
This pull request adds a navigation focus handler to the Flutter web
engine that bridges assistive technology activations with Flutter's
focus tracking system. The listener intercepts screen reader activations
(VoiceOver, NVDA, JAWS, etc.) and forces DOM focus on the activated
elements, ensuring they integrate properly with Flutter's navigation
focus restoration.

**Before**
When using VoiceOver or other screen readers to navigate between pages
in a Flutter web app, focus restoration would fail because assistive
technology activations don't naturally trigger the DOM focus events that
Flutter's navigation system expects. Users would lose their navigation
context, with focus jumping to default elements instead of returning to
the previously activated button.

**Before behavior demo**
https://focus-demo-0529-before.web.app
On mac os, Use command + F5 to activate voice over. 
Use control + option + arrow right to focus on "Go to page two" button. 
Use control + option +  space to click the "Go to page two" button. 
Then in page two, use control + option + arrow right to focus on "Back
to page one" button.
The focus will be on "Page one" heading instead of "Go to page two"
button. This is not expected

**After**
Screen reader users can now navigate between pages and have their focus
properly restored to the previously activated element (e.g., "Go to Page
Two" button) when returning to a previous page, providing a consistent
and accessible navigation experience across all assistive technologies.

**After behavior demo**
https://focus-demo-0529-after.web.app
On mac os, Use command + F5 to activate voice over. 
Use control + option + arrow right to focus on "Go to page two" button. 
Use control + option +  space to click the "Go to page two" button. 
Then in page two, use control + option + arrow right to focus on "Back
to page one" button.
The focus will be on "Go to page two" button. This is expected.

**Issue Fixed**
This PR addresses GitHub Issue flutter#140483, which reports that VoiceOver
focus restoration doesn't work in Flutter web applications during
navigation.


## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 14, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 15, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Aug 16, 2025
lucaantonelli pushed a commit to lucaantonelli/flutter that referenced this pull request Nov 21, 2025
…s restoration (flutter#170046)

**Description**
This pull request adds a navigation focus handler to the Flutter web
engine that bridges assistive technology activations with Flutter's
focus tracking system. The listener intercepts screen reader activations
(VoiceOver, NVDA, JAWS, etc.) and forces DOM focus on the activated
elements, ensuring they integrate properly with Flutter's navigation
focus restoration.

**Before**
When using VoiceOver or other screen readers to navigate between pages
in a Flutter web app, focus restoration would fail because assistive
technology activations don't naturally trigger the DOM focus events that
Flutter's navigation system expects. Users would lose their navigation
context, with focus jumping to default elements instead of returning to
the previously activated button.

**Before behavior demo**
https://focus-demo-0529-before.web.app
On mac os, Use command + F5 to activate voice over. 
Use control + option + arrow right to focus on "Go to page two" button. 
Use control + option +  space to click the "Go to page two" button. 
Then in page two, use control + option + arrow right to focus on "Back
to page one" button.
The focus will be on "Page one" heading instead of "Go to page two"
button. This is not expected

**After**
Screen reader users can now navigate between pages and have their focus
properly restored to the previously activated element (e.g., "Go to Page
Two" button) when returning to a previous page, providing a consistent
and accessible navigation experience across all assistive technologies.

**After behavior demo**
https://focus-demo-0529-after.web.app
On mac os, Use command + F5 to activate voice over. 
Use control + option + arrow right to focus on "Go to page two" button. 
Use control + option +  space to click the "Go to page two" button. 
Then in page two, use control + option + arrow right to focus on "Back
to page one" button.
The focus will be on "Go to page two" button. This is expected.

**Issue Fixed**
This PR addresses GitHub Issue flutter#140483, which reports that VoiceOver
focus restoration doesn't work in Flutter web applications during
navigation.


## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) engine flutter/engine related. See also e: labels. platform-web Web applications specifically

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants