Feat: Add a11y for loading indicators (#165173)

Feat: Add a11y for loading indicators
fixes: #161631 

## Pre-launch Checklist

- [x] I read the [Contributor Guide] and followed the process outlined
there for submitting PRs.
- [x] I read the [Tree Hygiene] wiki page, which explains my
responsibilities.
- [x] I read and followed the [Flutter Style Guide], including [Features
we expect every widget to implement].
- [x] I signed the [CLA].
- [x] I listed at least one issue that this PR fixes in the description
above.
- [x] I updated/added relevant documentation (doc comments with `///`).
- [x] I added new tests to check the change I am making, or this PR is
[test-exempt].
- [x] I followed the [breaking change policy] and added [Data Driven
Fixes] where supported.
- [x] All existing and new tests are passing.

Author: rkishan516

engine/src/flutter/lib/ui/fixtures/ui_test.dart

@@ -258,6 +258,8 @@ void sendSemanticsUpdate() {
     controlsNodes: null,
     inputType: SemanticsInputType.none,
     locale: null,
+    minValue: '0',
+    maxValue: '0',
   );
   _semanticsUpdate(builder.build());
 }
@@ -319,6 +321,8 @@ void sendSemanticsUpdateWithRole() {
     controlsNodes: null,
     inputType: SemanticsInputType.none,
     locale: null,
+    minValue: '0',
+    maxValue: '0',
   );
   _semanticsUpdate(builder.build());
 }
@@ -380,6 +384,8 @@ void sendSemanticsUpdateWithLocale() {
     controlsNodes: null,
     inputType: SemanticsInputType.none,
     locale: Locale('es', 'MX'),
+    minValue: '0',
+    maxValue: '0',
   );
   _semanticsUpdate(builder.build());
 }
@@ -436,6 +442,8 @@ void sendSemanticsUpdateWithIsLink() {
     controlsNodes: null,
     inputType: SemanticsInputType.none,
     locale: Locale('es', 'MX'),
+    minValue: '0',
+    maxValue: '0',
   );
   _semanticsUpdate(builder.build());
 }

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

@@ -1975,6 +1975,8 @@ abstract class SemanticsUpdateBuilder {
     SemanticsHitTestBehavior hitTestBehavior = SemanticsHitTestBehavior.defer,
     required SemanticsInputType inputType,
     required Locale? locale,
+    required String minValue,
+    required String maxValue,
   });
 
   /// Update the custom semantics action associated with the given `id`.
@@ -2056,6 +2058,8 @@ base class _NativeSemanticsUpdateBuilder extends NativeFieldWrapperClass1
     SemanticsHitTestBehavior hitTestBehavior = SemanticsHitTestBehavior.defer,
     required SemanticsInputType inputType,
     required Locale? locale,
+    required String minValue,
+    required String maxValue,
   }) {
     assert(_matrix4IsValid(transform));
     assert(
@@ -2107,6 +2111,8 @@ base class _NativeSemanticsUpdateBuilder extends NativeFieldWrapperClass1
       hitTestBehavior.index,
       inputType.index,
       locale?.toLanguageTag() ?? '',
+      minValue,
+      maxValue,
     );
   }
 
@@ -2157,6 +2163,8 @@ base class _NativeSemanticsUpdateBuilder extends NativeFieldWrapperClass1
       Int32,
       Int32,
       Handle,
+      Handle,
+      Handle,
     )
   >(symbol: 'SemanticsUpdateBuilder::updateNode')
   external void _updateNode(
@@ -2204,6 +2212,8 @@ base class _NativeSemanticsUpdateBuilder extends NativeFieldWrapperClass1
     int hitTestBehaviorIndex,
     int inputType,
     String locale,
+    String minValue,
+    String maxValue,
   );
 
   @override

engine/src/flutter/lib/ui/semantics/semantics_node.h

@@ -145,6 +145,8 @@ struct SemanticsNode {
   double scrollPosition = std::nan("");
   double scrollExtentMax = std::nan("");
   double scrollExtentMin = std::nan("");
+  std::string minValue;
+  std::string maxValue;
   std::string identifier;
   std::string label;
   StringAttributes labelAttributes;

engine/src/flutter/lib/ui/semantics/semantics_update_builder.cc

@@ -74,7 +74,9 @@ void SemanticsUpdateBuilder::updateNode(
     int validationResult,
     int hitTestBehavior,
     int inputType,
-    std::string locale) {
+    std::string locale,
+    std::string minValue,
+    std::string maxValue) {
   FML_CHECK(scrollChildren == 0 ||
             (scrollChildren > 0 && childrenInHitTestOrder.data()))
       << "Semantics update contained scrollChildren but did not have "
@@ -96,6 +98,8 @@ void SemanticsUpdateBuilder::updateNode(
   node.scrollPosition = scrollPosition;
   node.scrollExtentMax = scrollExtentMax;
   node.scrollExtentMin = scrollExtentMin;
+  node.minValue = std::move(minValue);
+  node.maxValue = std::move(maxValue);
   node.rect = SkRect::MakeLTRB(SafeNarrow(left), SafeNarrow(top),
                                SafeNarrow(right), SafeNarrow(bottom));
   node.identifier = std::move(identifier);

engine/src/flutter/lib/ui/semantics/semantics_update_builder.h

@@ -73,7 +73,9 @@ class SemanticsUpdateBuilder
       int validationResult,
       int hitTestBehavior,
       int inputType,
-      std::string locale);
+      std::string locale,
+      std::string minValue,
+      std::string maxValue);
 
   void updateCustomAction(int id,
                           std::string label,

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

@@ -753,6 +753,8 @@ class SemanticsUpdateBuilder {
     SemanticsHitTestBehavior hitTestBehavior = SemanticsHitTestBehavior.defer,
     required SemanticsInputType inputType,
     required Locale? locale,
+    required String minValue,
+    required String maxValue,
   }) {
     if (transform.length != 16) {
       throw ArgumentError('transform argument must have 16 entries.');
@@ -800,6 +802,8 @@ class SemanticsUpdateBuilder {
         hitTestBehavior: hitTestBehavior,
         inputType: inputType,
         locale: locale,
+        minValue: minValue,
+        maxValue: maxValue,
       ),
     );
   }

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

@@ -116,6 +116,7 @@ export 'engine/semantics/list.dart';
 export 'engine/semantics/live_region.dart';
 export 'engine/semantics/menus.dart';
 export 'engine/semantics/platform_view.dart';
+export 'engine/semantics/progress_bar.dart';
 export 'engine/semantics/requirable.dart';
 export 'engine/semantics/route.dart';
 export 'engine/semantics/scrollable.dart';

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

@@ -20,6 +20,7 @@ export 'semantics/list.dart';
 export 'semantics/live_region.dart';
 export 'semantics/menus.dart';
 export 'semantics/platform_view.dart';
+export 'semantics/progress_bar.dart';
 export 'semantics/requirable.dart';
 export 'semantics/scrollable.dart';
 export 'semantics/semantics.dart';

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

@@ -0,0 +1,66 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import 'label_and_value.dart';
+import 'semantics.dart';
+
+/// Indicates a progress bar element.
+///
+/// Uses aria progressbar role to convey this semantic information to the element.
+///
+/// Screen-readers take advantage of "aria-label" to describe the visual.
+class SemanticsProgressBar extends SemanticRole {
+  SemanticsProgressBar(SemanticsObject semanticsObject)
+    : super.withBasics(
+        EngineSemanticsRole.progressBar,
+        semanticsObject,
+        preferredLabelRepresentation: LabelRepresentation.ariaLabel,
+      ) {
+    setAriaRole('progressbar');
+
+    // Set ARIA attributes for min, max and current value.
+    if (semanticsObject.minValue != null) {
+      setAttribute('aria-valuemin', semanticsObject.minValue!);
+    }
+    if (semanticsObject.maxValue != null) {
+      setAttribute('aria-valuemax', semanticsObject.maxValue!);
+    }
+
+    if (semanticsObject.value != null) {
+      setAttribute('aria-valuenow', semanticsObject.value!);
+    }
+  }
+
+  @override
+  void update() {
+    super.update();
+
+    if (semanticsObject.minValue != null) {
+      setAttribute('aria-valuemin', semanticsObject.minValue!);
+    }
+
+    if (semanticsObject.maxValue != null) {
+      setAttribute('aria-valuemax', semanticsObject.maxValue!);
+    }
+
+    if (semanticsObject.value != null) {
+      setAttribute('aria-valuenow', semanticsObject.value!);
+    }
+  }
+
+  @override
+  bool focusAsRouteDefault() => focusable?.focusAsRouteDefault() ?? false;
+}
+
+/// Indicates a loading spinner element.
+class SementicsLoadingSpinner extends SemanticRole {
+  SementicsLoadingSpinner(SemanticsObject semanticsObject)
+    : super.withBasics(
+        EngineSemanticsRole.loadingSpinner,
+        semanticsObject,
+        preferredLabelRepresentation: LabelRepresentation.ariaLabel,
+      );
+
+  @override
+  bool focusAsRouteDefault() => focusable?.focusAsRouteDefault() ?? false;
+}

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

@@ -37,6 +37,7 @@ import 'list.dart';
 import 'live_region.dart';
 import 'menus.dart';
 import 'platform_view.dart';
+import 'progress_bar.dart';
 import 'requirable.dart';
 import 'route.dart';
 import 'scrollable.dart';
@@ -275,6 +276,8 @@ class SemanticsNodeUpdate {
     this.hitTestBehavior = ui.SemanticsHitTestBehavior.defer,
     required this.inputType,
     required this.locale,
+    required this.minValue,
+    required this.maxValue,
   });
 
   /// See [ui.SemanticsUpdateBuilder.updateNode].
@@ -399,6 +402,12 @@ class SemanticsNodeUpdate {
 
   /// See [ui.SemanticsUpdateBuilder.updateNode].
   final ui.Locale? locale;
+
+  /// See [ui.SemanticsUpdateBuilder.updateNode].
+  final String minValue;
+
+  /// See [ui.SemanticsUpdateBuilder.updateNode].
+  final String maxValue;
 }
 
 /// Identifies [SemanticRole] implementations.
@@ -503,6 +512,12 @@ enum EngineSemanticsRole {
   /// An item in a [list].
   listItem,
 
+  /// A graphic object that shows progress with a numeric number.
+  progressBar,
+
+  /// A graphic object that spins to indicate the application is busy.
+  loadingSpinner,
+
   /// A role used when a more specific role cannot be assigend to
   /// a [SemanticsObject].
   ///
@@ -1550,6 +1565,31 @@ class SemanticsObject {
     _dirtyFields |= _hitTestBehaviorIndex;
   }
 
+  String? get minValue => _minValue;
+  String? _minValue;
+
+  static const int _minValueIndex = 1 << 29;
+
+  /// Whether the [minValue] field has been updated but has not been
+  /// applied to the DOM yet.
+  bool get isMinValueDirty => _isDirty(_minValueIndex);
+  void _markMinValueDirty() {
+    _dirtyFields |= _minValueIndex;
+  }
+
+  /// See [ui.SemanticsUpdateBuilder.updateNode].
+  String? get maxValue => _maxValue;
+  String? _maxValue;
+
+  static const int _maxValueIndex = 1 << 30;
+
+  /// Whether the [maxValue] field has been updated but has not been
+  /// applied to the DOM yet.
+  bool get isMaxValueDirty => _isDirty(_maxValueIndex);
+  void _markMaxValueDirty() {
+    _dirtyFields |= _maxValueIndex;
+  }
+
   /// A unique permanent identifier of the semantics node in the tree.
   final int id;
 
@@ -1887,6 +1927,16 @@ class SemanticsObject {
       _markHitTestBehaviorDirty();
     }
 
+    if (_minValue != update.minValue) {
+      _minValue = update.minValue;
+      _markMinValueDirty();
+    }
+
+    if (_maxValue != update.maxValue) {
+      _maxValue = update.maxValue;
+      _markMaxValueDirty();
+    }
+
     role = update.role;
 
     inputType = update.inputType;
@@ -2139,14 +2189,16 @@ class SemanticsObject {
         return EngineSemanticsRole.region;
       case ui.SemanticsRole.form:
         return EngineSemanticsRole.form;
+      case ui.SemanticsRole.loadingSpinner:
+        return EngineSemanticsRole.loadingSpinner;
+      case ui.SemanticsRole.progressBar:
+        return EngineSemanticsRole.progressBar;
       // TODO(chunhtai): implement these roles.
       // https://github.com/flutter/flutter/issues/159741.
       case ui.SemanticsRole.dragHandle:
       case ui.SemanticsRole.spinButton:
       case ui.SemanticsRole.comboBox:
       case ui.SemanticsRole.tooltip:
-      case ui.SemanticsRole.loadingSpinner:
-      case ui.SemanticsRole.progressBar:
       case ui.SemanticsRole.hotKey:
       case ui.SemanticsRole.none:
       // fallback to checking semantics properties.
@@ -2213,6 +2265,8 @@ class SemanticsObject {
       EngineSemanticsRole.menuItemRadio => SemanticMenuItemRadio(this),
       EngineSemanticsRole.alert => SemanticAlert(this),
       EngineSemanticsRole.status => SemanticStatus(this),
+      EngineSemanticsRole.progressBar => SemanticsProgressBar(this),
+      EngineSemanticsRole.loadingSpinner => SementicsLoadingSpinner(this),
       EngineSemanticsRole.generic => GenericRole(this),
       EngineSemanticsRole.complementary => SemanticComplementary(this),
       EngineSemanticsRole.contentInfo => SemanticContentInfo(this),