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

flutter-zl · 2025-06-05T05:55:07Z

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.

…estoration

flutter-zl · 2025-06-05T06:13:56Z

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 · 2025-06-05T15:28:54Z

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.

…tion

flutter-dashboard · 2025-06-06T16:18:08Z

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.

…tation

mdebbar · 2025-06-11T14:17:09Z

I don't think I'm the best person to review this, but maybe @chunhtai or @yjbanov ?

chunhtai · 2025-06-11T18:26:27Z

engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart

+      final NavigationTarget? target = _findNavigationTarget(event);
+      if (target != null && !_isAlreadyFocused(target.element)) {
+        final DomElement? focusableElement = _findFocusableElement(target.element);
+        focusableElement?.focusWithoutScroll();


Can you explain a bit how this preserve focus when navigate back to the screen?

If I read the code correctly, this seems to attempt to focus the navigation target when it is clicked e.g. focuses the button when hitting the button that may or may not cause navigation?

Also, framework actually send focus event to previously focused node when a page is popped.

flutter/packages/flutter/lib/src/rendering/object.dart

Line 3705 in f59e8e5

void sendSemanticsEvent(SemanticsEvent semanticsEvent) {

This will send a message through flutter/accessibility channel with a FocusSemanticEvent, can the engine listen to this a switch focus instead?

You are right: framework actually send focus event to previously focused node when a page is popped. Please check https://github.com/flutter/flutter/pull/170046#issuecomment-2944993145. The assitive technology like macos voice over does not trigger or track DOM focus events. So the solution is to forces DOM focus on the activated elements when using screen reader activations. Hence this PR can fix the issue.

Can you explain a bit how this preserve focus when navigate back to the screen?

If I read the code correctly, this seems to attempt to focus the navigation target when it is clicked e.g. focuses the button when hitting the button that may or may not cause navigation?

How does this preserve focus when navigating back?
This implementation works as a bridge between assistive technology and Flutter's focus tracking system. Here's the flow:
User navigates with AT: VoiceOver user uses Control+Option+Space to activate "Go to page two" button
Your handler detects AT activation: The click event has characteristics of AT usage (coordinates near origin, etc.)
Force DOM focus: This code calls focusableElement?.focusWithoutScroll() to ensure the button gets proper DOM focus
Flutter tracks the focus: Now Flutter's navigation system knows which element was focused when navigation occurred
Framework sends focus restoration: When popping back, framework sends FocusSemanticEvent to restore focus to the previously focused element
Focus is properly restored: The "Go to page two" button receives focus instead of defaulting to the page heading

Also, framework actually send focus event to previously focused node when a page is popped.

You are right: framework actually send focus event to previously focused node when a page is popped. Please check https://github.com/flutter/flutter/pull/170046#issuecomment-2944993145. The assistive technology like macos voice over does not trigger or track DOM focus events. So the solution is to forces DOM focus on the activated elements when using screen reader activations. Hence this PR can fix the issue.

flutter/packages/flutter/lib/src/rendering/object.dart

Line 3705 in f59e8e5

void sendSemanticsEvent(SemanticsEvent semanticsEvent) {

This will send a message through flutter/accessibility channel with a FocusSemanticEvent, can the engine listen to this a switch focus instead?

Do you mean add switch case for platform web in https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/navigator.dart#L3256C1-L3280C6 ? I tried it, but the issue is that The assistive technology like macos voice over does not trigger or track DOM focus events and lastFocusNode will be null. We can not detect lastFocusNode when in Voice over.

ah you are right, i forgot that web doesn't track last focus. i.e. onDidGainAccessibilityFocus.

The assistive technology like macos voice over does not trigger or track DOM focus events

Is this true even if the dom has a focus listener? I remembered @yjbanov and I had an idea to add onfocus to all dom objects so that we can still track a11y focus in web

Force DOM focus: This code calls focusableElement?.focusWithoutScroll() to ensure the button gets proper DOM focus
Flutter tracks the focus: Now Flutter's navigation system knows which element was focused when navigation occurred

Does this sends didGainFocus to framework through flutter/accessibility channel? I think the framework relies on this to record last focus.

ah you are right, i forgot that web doesn't track last focus. i.e. onDidGainAccessibilityFocus.

The assistive technology like macos voice over does not trigger or track DOM focus events

Is this true even if the dom has a focus listener? I remembered @yjbanov and I had an idea to add onfocus to all dom objects so that we can still track a11y focus in web

Please check https://github.com/flutter/flutter/blob/master/engine/src/flutter/lib/ui/semantics.dart#L282-#L288.
VoiceOver navigation doesn't automatically trigger DOM focus events.
This PR solution detects AT activations and forces DOM focus, which then triggers the focus listeners.

Force DOM focus: This code calls focusableElement?.focusWithoutScroll() to ensure the button gets proper DOM focus
Flutter tracks the focus: Now Flutter's navigation system knows which element was focused when navigation occurred

Does this sends didGainFocus to framework through flutter/accessibility channel? I think the framework relies on this to record last focus.

Please check https://github.com/flutter/flutter/blob/master/engine/src/flutter/lib/ui/semantics.dart#L282-#L288.
focusWithoutScroll() call does NOT directly send didGainFocus
But it ensures the element has DOM focus when the framework later needs to track it.
Unlike Android/iOS which send didGainFocus messages through the accessibility channel.
The web engine doesn't implement this pattern! This PR solution fills this gap by ensuring DOM focus happens, which then enables the existing focus tracking to work.
Please check this observation: #170046 (comment)

But it ensures the element has DOM focus when the framework later needs to track it.

Framework has two focus system, on for keyboard focus and one for accessibility focus.

for a11y focus, it completely relies on onDidGainAccessibilityFocus to track last focus when navigate between routes

for keyboard focus, it go through a focus mananger and I think it has a completely different way to track and restore focus based on focus structure.

I think in this pr, the onFocus will notify the framework keyboard focus and then when popping route, the framework attempts to restore keyboard focus which trigger focus event in engine. since engine doesn't differentiate keyboard focus and a11y focus, so it move both focus based on the framework focus.

I think this approach is fine. I will take a full review today

chunhtai · 2025-06-17T20:26:15Z

engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart

@@ -1290,6 +1298,141 @@ class EnginePlatformDispatcher extends ui.PlatformDispatcher {

  @override
  double scaleFontSize(double unscaledFontSize) => unscaledFontSize * textScaleFactor;
+
+  static const String _flutterSemanticNodePrefix = 'flt-semantic-node-';


we should define this somewhere as a const to share across web engine

chunhtai · 2025-06-17T20:26:50Z

engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart

+
+      final NavigationTarget? target = _findNavigationTarget(event);
+      if (target != null && !_isAlreadyFocused(target.element)) {
+        final DomElement? focusableElement = _findFocusableElement(target.element);


should we also find the one that has onFocus semantics action?

chunhtai · 2025-06-17T20:31:58Z

engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart

+      return true;
+    }
+
+    // Pattern 2: Integer coordinate navigation from sophisticated ATs


what are some example of of sophisticated ATs? maybe add some more comment here to clarify

chunhtai · 2025-06-17T20:35:26Z

engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart

+      }
+    });
+
+    domDocument.addEventListener('click', navigationFocusListener, true.toJS);


Does this makes the entire app a container that VO will focus? or will it cause additional tab to reach the item inside?

chunhtai · 2025-06-17T20:37:36Z

engine/src/flutter/lib/web_ui/lib/src/engine/platform_dispatcher.dart

+      return false;
+    }
+
+    // Exclude test coordinates to prevent false positives in Flutter tests


instead of doing this, should we fix our test to not hit integer target or origin?

feat(web): Add global click listener for assistive technology focus r…

d30e233

…estoration

github-actions bot added engine flutter/engine repository. See also e: labels. platform-web Web applications specifically labels Jun 5, 2025

Merge branch 'master' into focus_0603

093c170

Merge branch 'master' into focus_0603

8398928

flutter-zl requested review from mdebbar and hannah-hyj June 5, 2025 15:21

flutter-zl marked this pull request as ready for review June 5, 2025 15:22

flutter-zl requested a review from yjbanov June 5, 2025 15:23

flutter-zl added 6 commits June 5, 2025 09:45

fix(web): Make global click listener more selective for focus restora…

63ab5ec

…tion

Merge branch 'master' into focus_0603

5030db9

Merge branch 'master' into focus_0603

c733725

Merge branch 'master' into focus_0603

9415d0c

Merge branch 'master' into focus_0603

405da1c

Merge branch 'master' into focus_0603

85a306e

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

flutter-zl added 5 commits June 8, 2025 23:06

refactor(web): Improve AT focus handler code organization and documen…

dd93985

…tation

Merge branch 'master' into focus_0603

e53fed6

fix(web): Resolve compilation errors from AT focus handler refactoring

c9ae5cb

update test file

f3a7f69

Merge branch 'master' into focus_0603

177ba1c

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 marked this pull request as ready for review June 9, 2025 16:17

flutter-zl added 4 commits June 9, 2025 09:25

remove redudant comment

3a4ebf3

Merge branch 'master' into focus_0603

9f3a820

Merge branch 'master' into focus_0603

cce6df1

Merge branch 'master' into focus_0603

f2d5063

flutter-zl added 4 commits June 10, 2025 09:12

Merge branch 'master' into focus_0603

914d518

Merge branch 'master' into focus_0603

f939369

Merge branch 'master' into focus_0603

5df9eed

Merge branch 'master' into focus_0603

faae45b

mdebbar requested a review from chunhtai June 11, 2025 14:17

flutter-zl added 2 commits June 11, 2025 09:36

Merge branch 'master' into focus_0603

eacc7eb

Merge branch 'master' into focus_0603

22482a6

chunhtai reviewed Jun 11, 2025

View reviewed changes

chunhtai self-requested a review June 11, 2025 18:55

flutter-zl added 9 commits June 11, 2025 13:53

Merge branch 'master' into focus_0603

19fde2a

Merge branch 'master' into focus_0603

f89759c

Merge branch 'master' into focus_0603

dd8f6d4

Merge branch 'master' into focus_0603

bb54d5a

Merge branch 'master' into focus_0603

9b8fdea

Merge branch 'master' into focus_0603

596bdf3

Merge branch 'master' into focus_0603

092e45a

Merge branch 'master' into focus_0603

138216b

Merge branch 'master' into focus_0603

7771e18

chunhtai reviewed Jun 17, 2025

View reviewed changes

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

Are you sure you want to change the base?

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

Conversation

flutter-zl commented Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

flutter-zl commented Jun 5, 2025

Uh oh!

flutter-zl commented Jun 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

flutter-dashboard bot commented Jun 6, 2025

Uh oh!

mdebbar commented Jun 11, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chunhtai Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chunhtai Jun 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

flutter-zl Jun 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chunhtai Jun 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

flutter-zl commented Jun 5, 2025 •

edited

Loading

flutter-zl commented Jun 5, 2025 •

edited

Loading

chunhtai Jun 11, 2025 •

edited

Loading

chunhtai Jun 12, 2025 •

edited

Loading

flutter-zl Jun 13, 2025 •

edited

Loading

chunhtai Jun 17, 2025 •

edited

Loading