Skip to content

[web] Clip semantics DOM text labels to stop stealing taps - #194011

Merged
auto-submit[bot] merged 2 commits into
flutter:masterfrom
flutter-zl:issue_192466_fix
Oct 12, 2026
Merged

auto-submit[bot] merged 2 commits into
flutter:masterfrom
flutter-zl:issue_192466_fix

Conversation

@flutter-zl

Copy link
Copy Markdown
Contributor

Fixes #192466

Problem

On web with semantics enabled, a button's label is rendered as DOM text inside a flt-semantics element with overflow: visible. A long label wraps far outside the button's rect, and the browser still hit-tests that transparent text. When the button stacks above a later node, as earlier slivers do in a CustomScrollView, taps on the later node land on the button and dispatch SemanticsAction.tap to the wrong node. This affects all browsers, not just iOS Safari.

Fix

DomTextRepresentation now sets overflow: hidden on the node, and cleanUp restores visible when the label switches to another representation. DOM text is only used for nodes without children, so the clip cannot hide child semantics. Screen readers still read the full label.

Demo

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

Tap the blue L button. Before, the UPPER counter increments. After, the LOWER counter increments.

@flutter-zl
flutter-zl marked this pull request as ready for review October 8, 2026 17:24
@github-actions github-actions Bot added a: text input Entering text in a text field or keyboard related problems 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 Oct 8, 2026
@flutter-zl flutter-zl added the CICD Run CI/CD label Oct 8, 2026

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request sets the overflow style of DOM text representation elements to 'hidden' to prevent overflowing text from intercepting hit tests, resetting it to 'visible' upon cleanup. It also adds regression and behavior tests. The review feedback suggests using removeProperty('overflow') instead of setting it to 'visible' to avoid overriding stylesheet rules, along with updating the corresponding test expectation.

@override
void cleanUp() {
_domText?.remove();
semanticsObject.element.style.overflow = 'visible';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Instead of hardcoding overflow = 'visible', it is cleaner and safer to remove the inline style property entirely using removeProperty('overflow'). This avoids overriding any potential CSS stylesheet rules or other default behaviors that might apply to the element.

Suggested change
semanticsObject.element.style.overflow = 'visible';
semanticsObject.element.style.removeProperty('overflow');

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keeping 'visible' here on purpose. SemanticsObject._initElement sets an inline overflow: visible on every semantics element when it is created, so cleanUp restores that baseline and a node that switches label representations ends up identical to a freshly created one. Removing the property would leave it in a state no fresh node has. There is also no stylesheet rule for overflow on flt-semantics that the inline value would mask; it was already inline before this change.


lav.preferredRepresentation = LabelRepresentation.ariaLabel;
lav.update();
expect(node.element.style.overflow, 'visible');

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

Update the expectation to match the removal of the inline style property, which results in an empty string.

Suggested change
expect(node.element.style.overflow, 'visible');
expect(node.element.style.overflow, '');

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as above, the expectation stays 'visible' to match the baseline set in _initElement.

@flutter-zl
flutter-zl requested a review from mdebbar October 8, 2026 18:47
@flutter-zl flutter-zl added the autosubmit Merge PR when tree becomes green via auto submit App label Oct 12, 2026
@auto-submit
auto-submit Bot added this pull request to the merge queue Oct 12, 2026
Merged via the queue into flutter:master with commit aacaa41 Oct 12, 2026
23 checks passed
@flutter-dashboard flutter-dashboard Bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Oct 12, 2026
auto-submit Bot pushed a commit to flutter/packages that referenced this pull request Oct 14, 2026
…#13220)

Manual roll Flutter from d03768eef055 to 4249ccbc18a3 (158 revisions)

Manual roll requested by [email protected]

flutter/flutter@d03768e...4249ccb

2026-10-12 [email protected] [AGP 9.1.0 Migration #8] Unify add-to-app module wiring on the variant API (flutter/flutter#193717)
2026-10-12 [email protected] [master] Update Flutter DEPS to Dart 5933cb486b4aef2f8cf6b9f89a5651c0d5b0955e (flutter/flutter#193982)
2026-10-12 [email protected] [Android] Fix use-after-free of SurfaceControl.Transaction in HCPP (flutter/flutter#192969)
2026-10-12 [email protected] [windows] Add OpenGL compositor tests against ANGLE at D3D11 feature level 10_0 (flutter/flutter#194114)
2026-10-12 [email protected] Fix HDR image packing for ios (flutter/flutter#192526)
2026-10-12 [email protected] Bump customer tests to pick up material_ui and cupertino_ui (flutter/flutter#194236)
2026-10-12 [email protected] Remove no-shuffle from text_field_test.dart (flutter/flutter#193550)
2026-10-12 [email protected] [web] Clip semantics DOM text labels to stop stealing taps (flutter/flutter#194011)
2026-10-12 [email protected] Roll Skia from 9b6ceba4728d to 17f6986c226c (6 revisions) (flutter/flutter#194232)
2026-10-12 [email protected] [web] Skip non-focusable containers in Focusable.focusAsRouteDefault (flutter/flutter#194138)
2026-10-12 [email protected] [web_paragraph] Honor kTextHeightNone in TextStyle and ParagraphStyle (flutter/flutter#193733)
2026-10-12 [email protected] Roll Skia from c88b49d1d6c7 to 9b6ceba4728d (4 revisions) (flutter/flutter#194226)
2026-10-12 [email protected] Migrate remaining test to macOS 26 (flutter/flutter#193825)
2026-10-12 [email protected] Roll Dart SDK from 047ca322aa9c to 221363557163 (1 revision) (flutter/flutter#194219)
2026-10-12 [email protected] [flutter_tools] Include dev_dependencies hooks for release integration tests (flutter/flutter#193436)
2026-10-12 [email protected] Roll Skia from d8afad1b1829 to c88b49d1d6c7 (1 revision) (flutter/flutter#194198)
2026-10-12 [email protected] Roll Skia from b23ddbff1265 to d8afad1b1829 (4 revisions) (flutter/flutter#194195)
2026-10-11 [email protected] Roll Skia from a168863e44ec to b23ddbff1265 (1 revision) (flutter/flutter#194185)
2026-10-11 [email protected] Roll Skia from 0c1d93abfa04 to a168863e44ec (1 revision) (flutter/flutter#194181)
2026-10-11 [email protected] iOS: Re-enable rendering on willEnterForeground (flutter/flutter#191350)
2026-10-11 [email protected] Roll Skia from 93c9d3ffda25 to 0c1d93abfa04 (1 revision) (flutter/flutter#194179)
2026-10-11 [email protected] Remove more instances of deprecated `withOpacity` (flutter/flutter#193559)
2026-10-11 [email protected] Fix another `parameter_assignments` warning (flutter/flutter#193669)
2026-10-11 [email protected] Roll Skia from 3136abef8f58 to 93c9d3ffda25 (1 revision) (flutter/flutter#194169)
2026-10-11 [email protected] [Impeller] Guard the sampler library caches with a mutex (flutter/flutter#193738)
2026-10-11 [email protected] Roll Dart SDK from e9c89888bcc1 to 047ca322aa9c (1 revision) (flutter/flutter#194157)
2026-10-10 [email protected] Roll Dart SDK from 787baa8aae78 to e9c89888bcc1 (2 revisions) (flutter/flutter#194141)
2026-10-10 [email protected] Fix OverlayPortal layout in shrink-wrapped overlays (flutter/flutter#193079)
2026-10-10 [email protected] Roll Skia from 353076e27b1c to 3136abef8f58 (1 revision) (flutter/flutter#194130)
2026-10-10 [email protected] Roll Dart SDK from 88a07589b1ff to 787baa8aae78 (1 revision) (flutter/flutter#194124)
2026-10-10 [email protected] Route windowing view lookups through WidgetsBinding (flutter/flutter#192666)
2026-10-10 [email protected] Roll Dart SDK from 2a06cab34715 to 88a07589b1ff (1 revision) (flutter/flutter#194117)
2026-10-10 [email protected] Roll Skia from f9043b7aa798 to 353076e27b1c (2 revisions) (flutter/flutter#194115)
2026-10-10 [email protected] Refactored PipelineLibraryGLES (flutter/flutter#193985)
2026-10-09 [email protected] add shorthands for scroll physics subclasses in framework (flutter/flutter#193082)
2026-10-09 [email protected] Roll Dart SDK from ba889e3cee8a to 2a06cab34715 (1 revision) (flutter/flutter#194105)
2026-10-09 [email protected] Roll Skia from 5ea03d8a53a6 to f9043b7aa798 (2 revisions) (flutter/flutter#194099)
2026-10-09 [email protected] Add docs for using bb and led with LUCI (flutter/flutter#193859)
2026-10-09 [email protected] Roll Skia from e329bb617820 to 5ea03d8a53a6 (5 revisions) (flutter/flutter#194087)
2026-10-09 [email protected] Roll Packages from 54706bd to d8d9e97 (5 revisions) (flutter/flutter#194080)
2026-10-09 [email protected] Move the Vulkan wrapped-texture helper out of the GPU surface (flutter/flutter#193001)
2026-10-09 [email protected] Roll Skia from 3e54bcf4c963 to e329bb617820 (1 revision) (flutter/flutter#194078)
2026-10-09 [email protected] Roll Dart SDK from 23f0308f9af8 to ba889e3cee8a (2 revisions) (flutter/flutter#194077)
2026-10-09 [email protected] Bump dartdoc to 9.0.11 (flutter/flutter#194076)
...
suryaKommana2662 pushed a commit to suryaKommana2662/flutter that referenced this pull request Oct 29, 2026
…94011)

Fixes flutter#192466

## Problem
On web with semantics enabled, a button's label is rendered as DOM text
inside a `flt-semantics` element with `overflow: visible`. A long label
wraps far outside the button's rect, and the browser still hit-tests
that transparent text. When the button stacks above a later node, as
earlier slivers do in a `CustomScrollView`, taps on the later node land
on the button and dispatch `SemanticsAction.tap` to the wrong node. This
affects all browsers, not just iOS Safari.

## Fix
`DomTextRepresentation` now sets `overflow: hidden` on the node, and
`cleanUp` restores `visible` when the label switches to another
representation. DOM text is only used for nodes without children, so the
clip cannot hide child semantics. Screen readers still read the full
label.

## Demo
Before: https://flutter-demo-73-before.web.app
After: https://flutter-demo-73-after.web.app

Tap the blue L button. Before, the UPPER counter increments. After, the
LOWER counter increments.
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) a: text input Entering text in a text field or keyboard related problems CICD Run CI/CD engine flutter/engine related. See also e: labels. platform-web Web applications specifically team-web Owned by Web platform team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[web][iOS Safari] Long Semantics label overflows its button and intercepts taps on a later sliver

2 participants