Fix aria-pressed state on material-toggle

PiperOrigin-RevId: 189364944

Author: Googler

lib/material_toggle/material_toggle.dart

@@ -31,7 +31,15 @@ import 'package:angular_components/utils/browser/events/events.dart';
     directives: const [NgIf],
     changeDetection: ChangeDetectionStrategy.OnPush,
     visibility: Visibility.local)
-class MaterialToggleComponent {
+class MaterialToggleComponent implements AfterViewInit {
+  @ViewChild('toggle')
+  HtmlElement toggleElement;
+
+  @override
+  void ngAfterViewInit() {
+    _syncAriaPressed();
+  }
+
   /// Enables/disables the toggle button.
   ///
   /// `true` is disabled and `false` is enabled.
@@ -42,7 +50,13 @@ class MaterialToggleComponent {
   ///
   /// `true` is ON and `false` is OFF.
   @Input()
-  bool checked = false;
+  set checked(bool value) {
+    _checked = value;
+    _syncAriaPressed();
+  }
+
+  bool get checked => _checked;
+  bool _checked = false;
 
   final _controller = new StreamController<bool>.broadcast();
 
@@ -108,4 +122,9 @@ class MaterialToggleComponent {
       keyEvent.stopPropagation();
     }
   }
+
+  void _syncAriaPressed() {
+    if (toggleElement == null) return;
+    toggleElement.attributes['aria-pressed'] = '$checked';
+  }
 }

lib/material_toggle/material_toggle.html

@@ -3,7 +3,7 @@
  for details. All rights reserved. Use of this source code is governed by a
  BSD-style license that can be found in the LICENSE file.
 -->
-<div attr.aria-pressed="{{checked}}"
+<div #toggle
      attr.aria-disabled="{{disabled}}"
      attr.aria-label="{{ariaLabel}}"
      class="material-toggle"