Reverts "[web][a11y]Delete _childContainerElement (#163662)" (#165416)

<!-- start_original_pr_link -->
Reverts: flutter/flutter#163662
<!-- end_original_pr_link -->
<!-- start_initiating_author -->
Initiated by: hannah-hyj
<!-- end_initiating_author -->
<!-- start_revert_reason -->
Reason for reverting: google 3 failure
<!-- end_revert_reason -->
<!-- start_original_pr_author -->
Original PR Author: hannah-hyj
<!-- end_original_pr_author -->

<!-- start_reviewers -->
Reviewed By: {yjbanov}
<!-- end_reviewers -->

<!-- start_revert_body -->
This change reverts the following previous change:
delete _childContainerElement , add the rect compensate and scrolling
adjustment to the children

## 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.

If you need help, consider asking for advice on the #hackers-new channel
on [Discord].

<!-- Links -->
[Contributor Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview
[Tree Hygiene]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md
[test-exempt]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests
[Flutter Style Guide]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md
[Features we expect every widget to implement]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement
[CLA]: https://cla.developers.google.com/
[flutter/tests]: https://github.com/flutter/tests
[breaking change policy]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes
[Discord]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md
[Data Driven Fixes]:
https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

<!-- end_revert_body -->

Co-authored-by: auto-submit[bot] <flutter-engprod-team@google.com>

Author: auto-submit[bot]

engine/src/flutter/lib/web_ui/lib/src/engine/semantics/scrollable.dart

@@ -70,7 +70,6 @@ class SemanticScrollable extends SemanticRole {
       final bool doScrollForward = _domScrollPosition > _effectiveNeutralScrollPosition;
       _neutralizeDomScrollPosition();
       semanticsObject.recomputePositionAndSize();
-      semanticsObject.updateChildrenPositionAndSize();
 
       final int semanticsId = semanticsObject.id;
       if (doScrollForward) {
@@ -132,7 +131,6 @@ class SemanticScrollable extends SemanticRole {
     semanticsObject.owner.addOneTimePostUpdateCallback(() {
       _neutralizeDomScrollPosition();
       semanticsObject.recomputePositionAndSize();
-      semanticsObject.updateChildrenPositionAndSize();
     });
 
     if (_scrollListener == null) {
@@ -205,8 +203,8 @@ class SemanticScrollable extends SemanticRole {
       // Read back because the effective value depends on the amount of content.
       _effectiveNeutralScrollPosition = element.scrollTop.toInt();
       semanticsObject
-        ..verticalScrollAdjustment = _effectiveNeutralScrollPosition.toDouble()
-        ..horizontalScrollAdjustment = 0.0;
+        ..verticalContainerAdjustment = _effectiveNeutralScrollPosition.toDouble()
+        ..horizontalContainerAdjustment = 0.0;
     } else {
       // Place the _scrollOverflowElement at the end of the content and
       // make sure that when we neutralize the scrolling position,
@@ -221,8 +219,8 @@ class SemanticScrollable extends SemanticRole {
       // Read back because the effective value depends on the amount of content.
       _effectiveNeutralScrollPosition = element.scrollLeft.toInt();
       semanticsObject
-        ..verticalScrollAdjustment = 0.0
-        ..horizontalScrollAdjustment = _effectiveNeutralScrollPosition.toDouble();
+        ..verticalContainerAdjustment = 0.0
+        ..horizontalContainerAdjustment = _effectiveNeutralScrollPosition.toDouble();
     }
   }
 

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

@@ -1358,6 +1358,33 @@ class SemanticsObject {
   /// The dom element of this semantics object.
   DomElement get element => semanticRole!.element;
 
+  /// Returns the HTML element that contains the HTML elements of direct
+  /// children of this object.
+  ///
+  /// The element is created lazily. When the child list is empty this element
+  /// is not created. This is necessary for "aria-label" to function correctly.
+  /// The browser will ignore the [label] of HTML element that contain child
+  /// elements.
+  DomElement? getOrCreateChildContainer() {
+    if (_childContainerElement == null) {
+      _childContainerElement = createDomElement('flt-semantics-container');
+      _childContainerElement!.style
+        ..position = 'absolute'
+        // Ignore pointer events on child container so that platform views
+        // behind it can be reached.
+        ..pointerEvents = 'none';
+      element.append(_childContainerElement!);
+    }
+    return _childContainerElement;
+  }
+
+  /// The element that contains the elements belonging to the child semantics
+  /// nodes.
+  ///
+  /// This element is used to correct for [_rect] offsets. It is only non-`null`
+  /// when there are non-zero children (i.e. when [hasChildren] is `true`).
+  DomElement? _childContainerElement;
+
   /// The parent of this semantics object.
   ///
   /// This value is not final until the tree is finalized. It is not safe to
@@ -1655,15 +1682,22 @@ class SemanticsObject {
     // Trivial case: remove all children.
     if (_childrenInHitTestOrder == null || _childrenInHitTestOrder!.isEmpty) {
       if (_currentChildrenInRenderOrder == null || _currentChildrenInRenderOrder!.isEmpty) {
+        // A container element must not have been created when child list is empty.
+        assert(_childContainerElement == null);
         _currentChildrenInRenderOrder = null;
         return;
       }
 
+      // A container element must have been created when child list is not empty.
+      assert(_childContainerElement != null);
+
       // Remove all children from this semantics object.
       final int len = _currentChildrenInRenderOrder!.length;
       for (int i = 0; i < len; i++) {
         owner._detachObject(_currentChildrenInRenderOrder![i].id);
       }
+      _childContainerElement!.remove();
+      _childContainerElement = null;
       _currentChildrenInRenderOrder = null;
       return;
     }
@@ -1672,6 +1706,7 @@ class SemanticsObject {
     final Int32List childrenInTraversalOrder = _childrenInTraversalOrder!;
     final Int32List childrenInHitTestOrder = _childrenInHitTestOrder!;
     final int childCount = childrenInHitTestOrder.length;
+    final DomElement? containerElement = getOrCreateChildContainer();
 
     assert(childrenInTraversalOrder.length == childrenInHitTestOrder.length);
 
@@ -1703,7 +1738,7 @@ class SemanticsObject {
     // Trivial case: previous list was empty => just populate the container.
     if (_currentChildrenInRenderOrder == null || _currentChildrenInRenderOrder!.isEmpty) {
       for (final SemanticsObject child in childrenInRenderOrder) {
-        element.append(child.element);
+        containerElement!.append(child.element);
         owner._attachObject(parent: this, child: child);
       }
       _currentChildrenInRenderOrder = childrenInRenderOrder;
@@ -1787,9 +1822,9 @@ class SemanticsObject {
       final SemanticsObject child = childrenInRenderOrder[i];
       if (!stationaryIds.contains(child.id)) {
         if (refNode == null) {
-          element.append(child.element);
+          containerElement!.append(child.element);
         } else {
-          element.insertBefore(child.element, refNode);
+          containerElement!.insertBefore(child.element, refNode);
         }
         owner._attachObject(parent: this, child: child);
       } else {
@@ -1955,6 +1990,10 @@ class SemanticsObject {
 
     // Reparent element.
     if (previousElement != element) {
+      final DomElement? container = _childContainerElement;
+      if (container != null) {
+        element.append(container);
+      }
       final DomElement? parent = previousElement?.parent;
       if (parent != null) {
         parent.insertBefore(element, previousElement);
@@ -2040,74 +2079,60 @@ class SemanticsObject {
   /// Indicates whether the node is currently expanded.
   bool get isExpanded => hasFlag(ui.SemanticsFlag.isExpanded);
 
-  /// Role-specific adjustment of the vertical position of the children.
+  /// Role-specific adjustment of the vertical position of the child container.
   ///
   /// This is used, for example, by the [SemanticScrollable] to compensate for the
   /// `scrollTop` offset in the DOM.
   ///
   /// This field must not be null.
-  double verticalScrollAdjustment = 0.0;
+  double verticalContainerAdjustment = 0.0;
 
-  /// Role-specific adjustment of the horizontal position of children.
+  /// Role-specific adjustment of the horizontal position of the child
+  /// container.
   ///
   /// This is used, for example, by the [SemanticScrollable] to compensate for the
   /// `scrollLeft` offset in the DOM.
   ///
   /// This field must not be null.
-  double horizontalScrollAdjustment = 0.0;
-
-  double verticalAdjustmentFromParent = 0.0;
-  double horizontalAdjustmentFromParent = 0.0;
+  double horizontalContainerAdjustment = 0.0;
 
   /// Computes the size and position of [element] and, if this element
-  /// [hasChildren], computes the parent adjustment for each child.
+  /// [hasChildren], of [getOrCreateChildContainer].
   void recomputePositionAndSize() {
     element.style
       ..width = '${_rect!.width}px'
       ..height = '${_rect!.height}px';
 
+    final DomElement? containerElement = hasChildren ? getOrCreateChildContainer() : null;
+
     final bool hasZeroRectOffset = _rect!.top == 0.0 && _rect!.left == 0.0;
     final Float32List? transform = _transform;
     final bool hasIdentityTransform =
         transform == null || isIdentityFloat32ListTransform(transform);
 
-    // If this node has children, we need to compensate for the parent's rect and
-    // pass down the scroll adjustments.
-    if (hasChildren) {
-      final double translateX = -_rect!.left + horizontalScrollAdjustment;
-      final double translateY = -_rect!.top + verticalScrollAdjustment;
-
-      for (final childIndex in _childrenInTraversalOrder!) {
-        final child = owner._semanticsTree[childIndex];
-        if (child == null) {
-          continue;
-        }
-        child.horizontalAdjustmentFromParent = translateX;
-        child.verticalAdjustmentFromParent = translateY;
-      }
-    }
-
     if (hasZeroRectOffset &&
         hasIdentityTransform &&
-        verticalAdjustmentFromParent == 0.0 &&
-        horizontalAdjustmentFromParent == 0.0) {
+        verticalContainerAdjustment == 0.0 &&
+        horizontalContainerAdjustment == 0.0) {
       _clearSemanticElementTransform(element);
+      if (containerElement != null) {
+        _clearSemanticElementTransform(containerElement);
+      }
       return;
     }
 
     late Matrix4 effectiveTransform;
     bool effectiveTransformIsIdentity = true;
-
-    final double left = _rect!.left + horizontalAdjustmentFromParent;
-    final double top = _rect!.top + verticalAdjustmentFromParent;
-
-    if (left != 0.0 || top != 0.0) {
+    if (!hasZeroRectOffset) {
       if (transform == null) {
+        final double left = _rect!.left;
+        final double top = _rect!.top;
         effectiveTransform = Matrix4.translationValues(left, top, 0.0);
-        effectiveTransformIsIdentity = false;
+        effectiveTransformIsIdentity = left == 0.0 && top == 0.0;
       } else {
         // Clone to avoid mutating _transform.
-        effectiveTransform = Matrix4.fromFloat32List(transform).clone()..translate(left, top);
+        effectiveTransform =
+            Matrix4.fromFloat32List(transform).clone()..translate(_rect!.left, _rect!.top);
         effectiveTransformIsIdentity = effectiveTransform.isIdentity();
       }
     } else if (!hasIdentityTransform) {
@@ -2122,16 +2147,19 @@ class SemanticsObject {
     } else {
       _clearSemanticElementTransform(element);
     }
-  }
 
-  /// Computes the size and position of children.
-  void updateChildrenPositionAndSize() {
-    for (final childIndex in _childrenInTraversalOrder!) {
-      final child = owner._semanticsTree[childIndex];
-      if (child == null) {
-        continue;
+    if (containerElement != null) {
+      if (!hasZeroRectOffset ||
+          verticalContainerAdjustment != 0.0 ||
+          horizontalContainerAdjustment != 0.0) {
+        final double translateX = -_rect!.left + horizontalContainerAdjustment;
+        final double translateY = -_rect!.top + verticalContainerAdjustment;
+        containerElement.style
+          ..top = '${translateY}px'
+          ..left = '${translateX}px';
+      } else {
+        _clearSemanticElementTransform(containerElement);
       }
-      child.recomputePositionAndSize();
     }
   }
 
@@ -2691,7 +2719,7 @@ class EngineSemanticsOwner {
           removals.add(node);
         } else {
           assert(node._parent == parent);
-          assert(node.element.parentNode == parent.element);
+          assert(node.element.parentNode == parent._childContainerElement);
         }
         return true;
       });
@@ -2800,9 +2828,6 @@ class EngineSemanticsOwner {
       final SemanticsObject object = _semanticsTree[nodeUpdate.id]!;
       object.updateChildren();
       object._dirtyFields = 0;
-
-      object.recomputePositionAndSize();
-      object.updateChildrenPositionAndSize();
     }
 
     final SemanticsObject root = _semanticsTree[0]!;
@@ -2838,6 +2863,9 @@ AFTER: $description
         // Dirty fields should be cleared after the tree has been finalized.
         assert(object._dirtyFields == 0);
 
+        // Make sure a child container is created only when there are children.
+        assert(object._childContainerElement == null || object.hasChildren);
+
         // Ensure child ID list is consistent with the parent-child
         // relationship of the semantics tree.
         if (object._childrenInTraversalOrder != null) {

engine/src/flutter/lib/web_ui/test/common/matchers.dart

@@ -274,6 +274,7 @@ class HtmlPatternMatcher extends Matcher {
   static bool _areTagsEqual(html.Element a, html.Element b) {
     const Map<String, String> synonyms = <String, String>{
       'sem': 'flt-semantics',
+      'sem-c': 'flt-semantics-container',
       'sem-img': 'flt-semantics-img',
       'sem-tf': 'flt-semantics-text-field',
     };

engine/src/flutter/lib/web_ui/test/engine/semantics/semantics_multi_view_test.dart

@@ -99,11 +99,15 @@ Future<void> testMain() async {
     // Test that each view renders its own semantics tree.
     expectSemanticsTree(view1.semantics, '''
 <sem style="filter: opacity(0%); color: rgba(0, 0, 0, 0)">
+  <sem-c>
     <sem flt-tappable="" role="button"></sem>
+  </sem-c>
 </sem>''');
     expectSemanticsTree(view2.semantics, '''
 <sem style="filter: opacity(0%); color: rgba(0, 0, 0, 0)">
+  <sem-c>
     <sem aria-label="d"><input aria-valuemax="1" aria-valuemin="1" aria-valuenow="1" aria-valuetext="" role="slider"></sem>
+  </sem-c>
 </sem>
 ''');