[web] scale semantic text elements to match the desired focus ring size

lib/web_ui/lib/src/engine/dom.dart

@@ -589,6 +589,14 @@ extension DomElementExtension on DomElement {
   external JSNumber get _clientWidth;
   double get clientWidth => _clientWidth.toDartDouble;
 
+  @JS('offsetHeight')
+  external JSNumber get _offsetHeight;
+  double get offsetHeight => _offsetHeight.toDartDouble;
+
+  @JS('offsetWidth')
+  external JSNumber get _offsetWidth;
+  double get offsetWidth => _offsetWidth.toDartDouble;
+
   @JS('id')
   external JSString get _id;
   String get id => _id.toDart;

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

@@ -55,7 +55,7 @@ class Checkable extends PrimaryRoleManager {
         super.withBasics(
           PrimaryRole.checkable,
           semanticsObject,
-          labelRepresentation: LeafLabelRepresentation.ariaLabel,
+          preferredLabelRepresentation: LabelRepresentation.ariaLabel,
         ) {
     addTappable();
   }

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

@@ -28,7 +28,7 @@ class Incrementable extends PrimaryRoleManager {
     // the one being focused on, but the internal `<input>` element.
     addLiveRegion();
     addRouteName();
-    addLabelAndValue(labelRepresentation: LeafLabelRepresentation.ariaLabel);
+    addLabelAndValue(preferredRepresentation: LabelRepresentation.ariaLabel);
 
     append(_element);
     _element.type = 'range';