Add a localization for counter text, separate into own semantic node (flutter#21029)

Author: Jonah Williams

packages/flutter/lib/src/material/input_decorator.dart

@@ -1813,10 +1813,14 @@ class _InputDecoratorState extends State<InputDecorator> with TickerProviderStat
     );
 
     final Widget counter = decoration.counterText == null ? null :
-      new Text(
-        decoration.counterText,
-        style: _getHelperStyle(themeData).merge(decoration.counterStyle),
-        overflow: TextOverflow.ellipsis,
+      new Semantics(
+        container: true,
+        child: new Text(
+          decoration.counterText,
+          style: _getHelperStyle(themeData).merge(decoration.counterStyle),
+          overflow: TextOverflow.ellipsis,
+          semanticsLabel: decoration.semanticCounterText,
+        ),
       );
 
     // The _Decoration widget and _RenderDecoration assume that contentPadding
@@ -1940,6 +1944,7 @@ class InputDecoration {
     this.enabledBorder,
     this.border,
     this.enabled = true,
+    this.semanticCounterText,
   }) : assert(enabled != null),
        assert(!(prefix != null && prefixText != null), 'Declaring both prefix and prefixText is not allowed'),
        assert(!(suffix != null && suffixText != null), 'Declaring both suffix and suffixText is not allowed'),
@@ -1983,7 +1988,8 @@ class InputDecoration {
        focusedBorder = null,
        focusedErrorBorder = null,
        disabledBorder = null,
-       enabledBorder = null;
+       enabledBorder = null,
+       semanticCounterText = null;
 
   /// An icon to show before the input field and outside of the decoration's
   /// container.
@@ -2197,6 +2203,8 @@ class InputDecoration {
   ///
   /// Rendered using [counterStyle]. Uses [helperStyle] if [counterStyle] is
   /// null.
+  ///
+  /// The semantic label can be replaced by providing a [semanticCounterText].
   final String counterText;
 
   /// The style to use for the [counterText].
@@ -2380,6 +2388,13 @@ class InputDecoration {
   /// This property is true by default.
   final bool enabled;
 
+  /// A semantic label for the [counterText].
+  ///
+  /// Defaults to null.
+  ///
+  /// If provided, this replaces the semantic label of the [counterText].
+  final String semanticCounterText;
+
   /// Creates a copy of this input decoration with the given fields replaced
   /// by the new values.
   ///
@@ -2416,6 +2431,7 @@ class InputDecoration {
     InputBorder enabledBorder,
     InputBorder border,
     bool enabled,
+    String semanticCounterText,
   }) {
     return new InputDecoration(
       icon: icon ?? this.icon,
@@ -2449,6 +2465,7 @@ class InputDecoration {
       enabledBorder: enabledBorder ?? this.enabledBorder,
       border: border ?? this.border,
       enabled: enabled ?? this.enabled,
+      semanticCounterText: semanticCounterText ?? this.semanticCounterText,
     );
   }
 
@@ -2518,7 +2535,8 @@ class InputDecoration {
         && typedOther.disabledBorder == disabledBorder
         && typedOther.enabledBorder == enabledBorder
         && typedOther.border == border
-        && typedOther.enabled == enabled;
+        && typedOther.enabled == enabled
+        && typedOther.semanticCounterText == semanticCounterText;
   }
 
   @override
@@ -2565,6 +2583,7 @@ class InputDecoration {
         enabledBorder,
         border,
         enabled,
+        semanticCounterText,
       ),
     );
   }
@@ -2630,6 +2649,8 @@ class InputDecoration {
       description.add('border: $border');
     if (!enabled)
       description.add('enabled: false');
+    if (semanticCounterText != null)
+      description.add('semanticCounterText: $semanticCounterText');
     return 'InputDecoration(${description.join(', ')})';
   }
 }

packages/flutter/lib/src/material/material_localizations.dart

@@ -307,6 +307,9 @@ abstract class MaterialLocalizations {
   /// The semantics hint to describe the tap action on a collapsed [ExpandIcon].
   String get collapsedIconTapHint => 'Expand';
 
+  /// The label for the [TextField]'s character counter.
+  String remainingTextFieldCharacterCount(int remaining);
+
   /// The `MaterialLocalizations` from the closest [Localizations] instance
   /// that encloses the given context.
   ///
@@ -709,4 +712,16 @@ class DefaultMaterialLocalizations implements MaterialLocalizations {
   ///
   /// [MaterialApp] automatically adds this value to [MaterialApp.localizationsDelegates].
   static const LocalizationsDelegate<MaterialLocalizations> delegate = _MaterialLocalizationsDelegate();
+
+  @override
+  String remainingTextFieldCharacterCount(int remaining) {
+    switch (remaining) {
+      case 0:
+        return 'No characters remaining';
+      case 1:
+        return '1 character remaining';
+      default:
+        return '$remaining characters remaining';
+    }
+  }
 }

packages/flutter/lib/src/material/text_field.dart

@@ -14,6 +14,7 @@ import 'feedback.dart';
 import 'ink_well.dart' show InteractiveInkFeature;
 import 'input_decorator.dart';
 import 'material.dart';
+import 'material_localizations.dart';
 import 'text_selection.dart';
 import 'theme.dart';
 
@@ -379,6 +380,7 @@ class _TextFieldState extends State<TextField> with AutomaticKeepAliveClientMixi
     && widget.decoration.counterText == null;
 
   InputDecoration _getEffectiveDecoration() {
+    final MaterialLocalizations localizations = MaterialLocalizations.of(context);
     final InputDecoration effectiveDecoration = (widget.decoration ?? const InputDecoration())
       .applyDefaults(Theme.of(context).inputDecorationTheme)
       .copyWith(
@@ -388,17 +390,24 @@ class _TextFieldState extends State<TextField> with AutomaticKeepAliveClientMixi
     if (!needsCounter)
       return effectiveDecoration;
 
-    final String counterText = '${_effectiveController.value.text.runes.length}/${widget.maxLength}';
+    final int currentLength = _effectiveController.value.text.runes.length;
+    final String counterText = '$currentLength/${widget.maxLength}';
+    final int remaining = (widget.maxLength - currentLength).clamp(0, widget.maxLength);
+    final String semanticCounterText = localizations.remainingTextFieldCharacterCount(remaining);
     if (_effectiveController.value.text.runes.length > widget.maxLength) {
       final ThemeData themeData = Theme.of(context);
       return effectiveDecoration.copyWith(
         errorText: effectiveDecoration.errorText ?? '',
         counterStyle: effectiveDecoration.errorStyle
           ?? themeData.textTheme.caption.copyWith(color: themeData.errorColor),
         counterText: counterText,
+        semanticCounterText: semanticCounterText,
       );
     }
-    return effectiveDecoration.copyWith(counterText: counterText);
+    return effectiveDecoration.copyWith(
+      counterText: counterText,
+      semanticCounterText: semanticCounterText,
+    );
   }
 
   @override

packages/flutter/test/material/text_field_test.dart

@@ -2580,11 +2580,11 @@ void main() {
         child: new TextField(
           key: key,
           controller: controller,
+          maxLength: 10,
           decoration: const InputDecoration(
             labelText: 'label',
             hintText: 'hint',
             helperText: 'helper',
-            counterText: 'counter',
           ),
         ),
       ),
@@ -2593,7 +2593,7 @@ void main() {
     expect(semantics, hasSemantics(new TestSemantics.root(
       children: <TestSemantics>[
         new TestSemantics.rootChild(
-          label: 'label\nhelper\ncounter',
+          label: 'label\nhelper',
           id: 1,
           textDirection: TextDirection.ltr,
           actions: <SemanticsAction>[
@@ -2602,6 +2602,13 @@ void main() {
           flags: <SemanticsFlag>[
             SemanticsFlag.isTextField,
           ],
+          children: <TestSemantics>[
+            new TestSemantics(
+              id: 2,
+              label: '10 characters remaining',
+              textDirection: TextDirection.ltr,
+            ),
+          ],
         ),
       ],
     ), ignoreTransform: true, ignoreRect: true));
@@ -2612,7 +2619,7 @@ void main() {
     expect(semantics, hasSemantics(new TestSemantics.root(
       children: <TestSemantics>[
         new TestSemantics.rootChild(
-          label: 'hint\nhelper\ncounter',
+          label: 'hint\nhelper',
           id: 1,
           textDirection: TextDirection.ltr,
           textSelection: const TextSelection(baseOffset: 0, extentOffset: 0),
@@ -2625,6 +2632,13 @@ void main() {
             SemanticsFlag.isTextField,
             SemanticsFlag.isFocused,
           ],
+          children: <TestSemantics>[
+            new TestSemantics(
+              id: 2,
+              label: '10 characters remaining',
+              textDirection: TextDirection.ltr,
+            ),
+          ],
         ),
       ],
     ), ignoreTransform: true, ignoreRect: true));
@@ -2634,4 +2648,49 @@ void main() {
     semantics.dispose();
   });
 
+  testWidgets('InputDecoration counterText can have a semanticCounterText', (WidgetTester tester) async {
+    final SemanticsTester semantics = new SemanticsTester(tester);
+    final TextEditingController controller = new TextEditingController();
+    final Key key = new UniqueKey();
+
+    await tester.pumpWidget(
+      overlay(
+        child: new TextField(
+          key: key,
+          controller: controller,
+          decoration: const InputDecoration(
+            labelText: 'label',
+            hintText: 'hint',
+            helperText: 'helper',
+            counterText: '0/10',
+            semanticCounterText: '0 out of 10',
+          ),
+        ),
+      ),
+    );
+
+    expect(semantics, hasSemantics(new TestSemantics.root(
+      children: <TestSemantics>[
+        new TestSemantics.rootChild(
+          label: 'label\nhelper',
+          id: 1,
+          textDirection: TextDirection.ltr,
+          actions: <SemanticsAction>[
+            SemanticsAction.tap,
+          ],
+          flags: <SemanticsFlag>[
+            SemanticsFlag.isTextField,
+          ],
+          children: <TestSemantics>[
+            new TestSemantics(
+              label: '0 out of 10',
+              textDirection: TextDirection.ltr,
+            ),
+          ],
+        ),
+      ],
+    ), ignoreTransform: true, ignoreRect: true, ignoreId: true));
+
+    semantics.dispose();
+  });
 }