[web] Scope the mobile semantics placeholder to its view by flutter-zl · Pull Request #190856 · flutter/flutter

flutter-zl · 2026-08-10T17:53:03Z

Problem

Flutter Web puts an invisible "Enable accessibility" button on the page for screen reader users. On mobile it covered the whole page instead of just the Flutter app, swallowing taps meant for the surrounding HTML until about 20 taps made the engine remove it.

Desktop was never affected: its button is one pixel and sits offscreen.

Fix

The button now lives inside <flutter-view> rather than <body>, one per view, so it can only cover the Flutter app. The CSS is unchanged, only the parent element, and it goes in as the first child so platform views keep their own events.

Demo

Before: https://flutter-demo-59-before.web.app
After: https://flutter-demo-59-after.web.app

Open either on a phone and tap the HTML links before touching the Flutter app.

Before: nothing responds. The links do not highlight and the log stays at "no HTML link clicked yet". They come alive only after tapping the Flutter app about 20 times.
After: the links respond on the first tap.

Desktop browsers cannot show the difference, since they use the 1x1 placeholder on both builds.

gemini-code-assist

Code Review

This pull request refactors accessibility placeholder management in the Flutter Web engine to support multi-view applications. On desktop, a single page-level placeholder is shared across views and attached to the document body, while on mobile, individual placeholders are attached to each view root. Feedback identifies two issues: first, addPlaceholder() is evaluated in DesktopSemanticsEnabler even if domDocument.body is null, which incorrectly tracks a placeholder; second, semanticsActivationTimer in MobileSemanticsEnabler should be explicitly cancelled during disposal to prevent post-dispose callbacks.

chunhtai · 2026-08-13T20:12:45Z

  ///
  /// This is used when semantics is enabled programmatically and therefore the
-  /// placehodler is no longer needed.
+  /// placeholder is no longer needed.


Suggested change

/// placeholder is no longer needed.

/// placeholders are no longer needed.

chunhtai · 2026-08-13T20:27:56Z

@@ -131,12 +178,46 @@ abstract class SemanticsEnabler {
 /// and enables semantics.
 @visibleForTesting
 class DesktopSemanticsEnabler extends SemanticsEnabler {


not related to this pr, but none of the method in this class should call its own dispose(). Only the owner that initalize a instance of this class should call dispose.

A instance shouldn't self destroy as a side effect of calling other method.

If the intention is to clear out placeholder list, refactor it to a separate clean up method.

Agreed. Done.

chunhtai · 2026-08-13T20:29:17Z

+  ///
+  /// See https://github.com/flutter/flutter/issues/152838
+  @override
+  void addPlaceholderForView(DomElement viewRoot) {


is there a reason desktop and mobile can't share the same placeholder insert and remove logic?

@flutter-zl so on desktop, we always have a single placeholder that covers the entire screen? That may not be ideal for multi-view mode where the screen contains other non-Flutter content.

Does it make sense to match the mobile behavior (have a placeholder for each view)?

Good suggestion and it's shared now.

@mdebbar on coverage: the desktop placeholder doesn't cover anything. The two form factors use opposite CSS.

// mobile: fills its containing block ..left = '0' ..top = '0' ..right = '0' ..bottom = '0'; // desktop: 1x1, offscreen ..left = '-1px' ..top = '-1px' ..width = '1px' ..height = '1px';

chunhtai · 2026-08-13T20:31:51Z

+  /// For Webkit browser engine the placeholders are removed upon the next
  /// "touchend" event. This is to prevent Safari from swallowing the event
  /// that happens on an element that's being removed. Blink doesn't have
  /// this issue.


does it work if we handle it the same way for Blink? that way we don't need to maintain two behavior

This PR doesn't change that behavior. The only edits in this block are pluralizing "placeholder is removed" to "placeholders are removed".

chunhtai · 2026-08-13T20:32:47Z

  void dispose() {
-    _semanticsPlaceholder?.remove();
-    _semanticsPlaceholder = null;
+    super.dispose();


dispose should be the last,

dispose should be the reverse order of init

mdebbar · 2026-09-02T16:46:41Z

+  /// Only touches [placeholders]. The caller attaches the element and keeps
+  /// its own bookkeeping in sync, so this is for [addPlaceholderForView]
+  /// implementations rather than outside callers.
+  DomElement addPlaceholder() {


If this is only meant for internal use (as the comment says), let's make it private. If it's needed only by tests, then let's add @visibleForTesting.

addPlaceholder() is gone.

mdebbar · 2026-09-02T16:58:36Z

+  ///
+  /// See https://github.com/flutter/flutter/issues/152838
+  @override
+  void addPlaceholderForView(DomElement viewRoot) {


@flutter-zl so on desktop, we always have a single placeholder that covers the entire screen? That may not be ideal for multi-view mode where the screen contains other non-Flutter content.

Does it make sense to match the mobile behavior (have a placeholder for each view)?

mdebbar

auto-submit · 2026-09-21T16:43:13Z

autosubmit label was removed for flutter/flutter/190856, because The base commit of the PR is older than 7 days and can not be merged. Please merge the latest changes from the main into this branch and resubmit the PR.

[web] Scope the mobile semantics placeholder to its view

464b058

github-actions Bot added engine flutter/engine related. See also e: labels. a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) platform-web Web applications specifically team-web Owned by Web platform team labels Aug 10, 2026

flutter-zl marked this pull request as ready for review August 10, 2026 19:03

flutter-zl added r: duplicate Issue is closed as a duplicate of an existing issue CICD Run CI/CD labels Aug 10, 2026

Merge branch 'master' into issue_152838_fix

19ab904

gemini-code-assist Bot reviewed Aug 10, 2026

View reviewed changes

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/semantics/semantics_helper.dart Resolved

Comment thread engine/src/flutter/lib/web_ui/lib/src/engine/semantics/semantics_helper.dart Resolved

flutter-zl added 2 commits August 10, 2026 12:22

[web] Cancel the pending semantics activation timer on dispose

f6e9897

Merge branch 'master' into issue_152838_fix

84144ab

flutter-zl requested review from chunhtai and mdebbar August 11, 2026 21:57

chunhtai reviewed Aug 13, 2026

View reviewed changes

Merge branch 'master' into issue_152838_fix

1b50755

mdebbar reviewed Sep 2, 2026

View reviewed changes

flutter-zl added 5 commits September 4, 2026 14:37

[web] Share semantics placeholder logic in the base enabler

730e42c

Merge branch 'master' into issue_152838_fix

0eec7dd

Merge branch 'master' into issue_152838_fix

7b46e1b

Merge branch 'master' into issue_152838_fix

7692325

Merge branch 'master' into issue_152838_fix

6473b1a

flutter-zl requested review from chunhtai and mdebbar September 9, 2026 21:07

mdebbar approved these changes Sep 21, 2026

View reviewed changes

flutter-zl added the autosubmit Merge PR when tree becomes green via auto submit App label Sep 21, 2026

auto-submit Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Sep 21, 2026

Merge branch 'master' into issue_152838_fix

8208bd6

flutter-zl added the autosubmit Merge PR when tree becomes green via auto submit App label Sep 21, 2026

auto-submit Bot added this pull request to the merge queue Sep 21, 2026

Merged via the queue into flutter:master with commit a9f7270 Sep 21, 2026
23 checks passed

flutter-dashboard Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Sep 21, 2026

kevmoo mentioned this pull request Oct 7, 2026

[ui/accessibility] Update web-accessibility.md for Flutter 3.50 WCAG 2.1 AA improvements and fix duplicated sentence flutter/website#13963

Closed

	/// placeholder is no longer needed.
	/// placeholders are no longer needed.

Conversation

flutter-zl commented Aug 10, 2026

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

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!

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!

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!

mdebbar left a comment

Choose a reason for hiding this comment

Uh oh!

auto-submit Bot commented Sep 21, 2026

Uh oh!

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants