Repository navigation
[web] Clip semantics DOM text labels to stop stealing taps - #194011
Conversation
There was a problem hiding this comment.
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'; |
There was a problem hiding this comment.
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.
| semanticsObject.element.style.overflow = 'visible'; | |
| semanticsObject.element.style.removeProperty('overflow'); |
There was a problem hiding this comment.
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'); |
There was a problem hiding this comment.
Same as above, the expectation stays 'visible' to match the baseline set in _initElement.
…#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) ...
…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.
Fixes #192466
Problem
On web with semantics enabled, a button's label is rendered as DOM text inside a
flt-semanticselement withoverflow: 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 aCustomScrollView, taps on the later node land on the button and dispatchSemanticsAction.tapto the wrong node. This affects all browsers, not just iOS Safari.Fix
DomTextRepresentationnow setsoverflow: hiddenon the node, andcleanUprestoresvisiblewhen 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.