[web] Fix semantic node order for webkit (#23601)

Author: ferhatb

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

@@ -853,25 +853,9 @@ class SemanticsObject {
         hasIdentityTransform &&
         verticalContainerAdjustment == 0.0 &&
         horizontalContainerAdjustment == 0.0) {
-      if (isDesktop) {
-        element.style
-          ..removeProperty('transform-origin')
-          ..removeProperty('transform');
-      } else {
-        element.style
-          ..removeProperty('top')
-          ..removeProperty('left');
-      }
+      _resetElementOffsets(element);
       if (containerElement != null) {
-        if (isDesktop) {
-          containerElement.style
-            ..removeProperty('transform-origin')
-            ..removeProperty('transform');
-        } else {
-          containerElement.style
-            ..removeProperty('top')
-            ..removeProperty('left');
-        }
+        _resetElementOffsets(containerElement);
       }
       return;
     }
@@ -905,11 +889,15 @@ class SemanticsObject {
       effectiveTransformIsIdentity = false;
     }
 
-    if (!effectiveTransformIsIdentity) {
+    if (!effectiveTransformIsIdentity || isMacOrIOS) {
+      if (effectiveTransformIsIdentity) {
+        effectiveTransform = Matrix4.identity();
+      }
       if (isDesktop) {
         element.style
           ..transformOrigin = '0 0 0'
-          ..transform = matrix4ToCssTransform(effectiveTransform);
+          ..transform = (effectiveTransformIsIdentity ? 'translate(0px 0px 0px)'
+              : matrix4ToCssTransform(effectiveTransform));
       } else {
         // Mobile screen readers observed to have errors while calculating the
         // semantics focus borders if css `transform` properties are used.
@@ -927,20 +915,13 @@ class SemanticsObject {
           ..height = '${rect.height}px';
       }
     } else {
+      _resetElementOffsets(element);
       // TODO: https://github.com/flutter/flutter/issues/73347
-      if (isDesktop) {
-        element.style
-          ..removeProperty('transform-origin')
-          ..removeProperty('transform');
-      } else {
-        element.style
-          ..removeProperty('top')
-          ..removeProperty('left');
-      }
     }
 
     if (containerElement != null) {
       if (!hasZeroRectOffset ||
+          isMacOrIOS ||
           verticalContainerAdjustment != 0.0 ||
           horizontalContainerAdjustment != 0.0) {
         final double translateX = -_rect!.left + horizontalContainerAdjustment;
@@ -955,15 +936,33 @@ class SemanticsObject {
             ..left = '${translateX}px';
         }
       } else {
-        if (isDesktop) {
-          containerElement.style
-            ..removeProperty('transform-origin')
-            ..removeProperty('transform');
-        } else {
-          containerElement.style
-            ..removeProperty('top')
-            ..removeProperty('left');
-        }
+        _resetElementOffsets(containerElement);
+      }
+    }
+  }
+
+  // On Mac OS and iOS, VoiceOver requires left=0 top=0 value to correctly
+  // handle order. See https://github.com/flutter/flutter/issues/73347.
+  static void _resetElementOffsets(html.Element element) {
+    if (isMacOrIOS) {
+      if (isDesktop) {
+        element.style
+          ..transformOrigin = '0 0 0'
+          ..transform = 'translate(0px, 0px)';
+      } else {
+        element.style
+          ..top = '0px'
+          ..left = '0px';
+      }
+    } else {
+      if (isDesktop) {
+        element.style
+          ..removeProperty('transform-origin')
+          ..removeProperty('transform');
+      } else {
+        element.style
+          ..removeProperty('top')
+          ..removeProperty('left');
       }
     }
   }

lib/web_ui/lib/src/engine/util.dart

@@ -446,9 +446,9 @@ const Set<String> _genericFontFamilies = <String>{
 /// For iOS, default to -apple-system, where it should be available, otherwise
 /// default to Arial. BlinkMacSystemFont is used for Chrome on iOS.
 final String _fallbackFontFamily =
-    _isMacOrIOS ? '-apple-system, BlinkMacSystemFont' : 'Arial';
+    isMacOrIOS ? '-apple-system, BlinkMacSystemFont' : 'Arial';
 
-bool get _isMacOrIOS =>
+bool get isMacOrIOS =>
     operatingSystem == OperatingSystem.iOs ||
     operatingSystem == OperatingSystem.macOs;
 
@@ -460,7 +460,7 @@ String? canonicalizeFontFamily(String? fontFamily) {
   if (_genericFontFamilies.contains(fontFamily)) {
     return fontFamily;
   }
-  if (_isMacOrIOS) {
+  if (isMacOrIOS) {
     // Unlike Safari, Chrome on iOS does not correctly fallback to cupertino
     // on sans-serif.
     // Map to San Francisco Text/Display fonts, use -apple-system,