fix: remove @AriaProperty decorator

PiperOrigin-RevId: 526750432

Author: asyncliz

checkbox/lib/checkbox.ts

@@ -12,18 +12,23 @@ import {property, query, queryAsync, state} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 import {when} from 'lit/directives/when.js';
 
+import {requestUpdateOnAriaChange} from '../../aria/delegate.js';
 import {dispatchActivationClick, isActivationClick, redispatchEvent} from '../../controller/events.js';
 import {FormController, getFormValue} from '../../controller/form-controller.js';
 import {stringConverter} from '../../controller/string-converter.js';
-import {ariaProperty} from '../../decorators/aria-property.js';
 import {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';
 import {ripple} from '../../ripple/directive.js';
 import {MdRipple} from '../../ripple/ripple.js';
+import {ARIAMixinStrict} from '../../types/aria.js';
 
 /**
  * A checkbox component.
  */
 export class Checkbox extends LitElement {
+  static {
+    requestUpdateOnAriaChange(this);
+  }
+
   /**
    * @nocollapse
    */
@@ -70,10 +75,6 @@ export class Checkbox extends LitElement {
     return this.closest('form');
   }
 
-  @ariaProperty  // tslint:disable-line:no-new-decorators
-  @property({attribute: 'data-aria-label', noAccessor: true})
-  override ariaLabel!: string;
-
   @state() private prevChecked = false;
   @state() private prevDisabled = false;
   @state() private prevIndeterminate = false;
@@ -135,6 +136,8 @@ export class Checkbox extends LitElement {
       'prev-disabled': this.prevDisabled,
     });
 
+    // Needed for closure conformance
+    const {ariaLabel} = this as ARIAMixinStrict;
     return html`
       <div class="container ${containerClasses}">
         <div class="outline"></div>
@@ -148,7 +151,7 @@ export class Checkbox extends LitElement {
       </div>
       <input type="checkbox"
         aria-checked=${isIndeterminate ? 'mixed' : nothing}
-        aria-label=${this.ariaLabel || nothing}
+        aria-label=${ariaLabel || nothing}
         ?disabled=${this.disabled}
         .indeterminate=${this.indeterminate}
         .checked=${this.checked}

circularprogress/lib/circular-progress.ts

@@ -8,12 +8,17 @@ import {html, LitElement, nothing, TemplateResult} from 'lit';
 import {property} from 'lit/decorators.js';
 import {classMap} from 'lit/directives/class-map.js';
 
-import {ariaProperty} from '../../decorators/aria-property.js';
+import {requestUpdateOnAriaChange} from '../../aria/delegate.js';
+import {ARIAMixinStrict} from '../../types/aria.js';
 
 /**
  * Circular Progress component.
  */
 export class CircularProgress extends LitElement {
+  static {
+    requestUpdateOnAriaChange(this);
+  }
+
   /**
    * Progress to display, a fraction between 0 and 1.
    */
@@ -32,22 +37,19 @@ export class CircularProgress extends LitElement {
    */
   @property({type: Boolean, attribute: 'four-color'}) fourColor = false;
 
-  @property({attribute: 'data-aria-label', noAccessor: true})
-  // tslint:disable-next-line:no-new-decorators
-  @ariaProperty
-  override ariaLabel!: string;
-
   protected override render(): TemplateResult {
     const classes = {
       'indeterminate': this.indeterminate,
       'four-color': this.fourColor
     };
 
+    // Needed for closure conformance
+    const {ariaLabel} = this as ARIAMixinStrict;
     return html`
       <div
         class="circular-progress ${classMap(classes)}"
         role="progressbar"
-        aria-label="${this.ariaLabel || nothing}"
+        aria-label="${ariaLabel || nothing}"
         aria-valuemin="0"
         aria-valuemax="1"
         aria-valuenow="${this.indeterminate ? nothing : this.progress}">
@@ -58,7 +60,7 @@ export class CircularProgress extends LitElement {
       <slot></slot>`;
   }
 
-  // Determinate mode is rendered with an svg so the progress arc can be 
+  // Determinate mode is rendered with an svg so the progress arc can be
   // easily animated via stroke-dashoffset.
   protected renderDeterminateContainer() {
     const dashOffset = (1 - this.progress) * 100;
@@ -72,10 +74,10 @@ export class CircularProgress extends LitElement {
     </svg>`;
   }
 
-  // Indeterminate mode rendered with 2 bordered-divs. The borders are 
+  // Indeterminate mode rendered with 2 bordered-divs. The borders are
   // clipped into half circles by their containers. The divs are then carefully
   // animated to produce changes to the spinner arc size.
-  // This approach has 4.5x the FPS of rendering via svg on Chrome 111. 
+  // This approach has 4.5x the FPS of rendering via svg on Chrome 111.
   // See https://lit.dev/playground/#gist=febb773565272f75408ab06a0eb49746.
   protected renderIndeterminateContainer() {
     return html`
@@ -88,4 +90,4 @@ export class CircularProgress extends LitElement {
         </div>
       </div>`;
   }
-}
+}

decorators/aria-property.ts

@@ -4,9 +4,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-// This is required for @ariaProperty
-// tslint:disable:no-new-decorators
-
 import '../../elevation/elevation.js';
 import '../../focus/focus-ring.js';
 import '../../ripple/ripple.js';
@@ -16,10 +13,11 @@ import {property, queryAsync, state} from 'lit/decorators.js';
 import {ClassInfo, classMap} from 'lit/directives/class-map.js';
 import {when} from 'lit/directives/when.js';
 
-import {ariaProperty} from '../../decorators/aria-property.js';
+import {requestUpdateOnAriaChange} from '../../aria/delegate.js';
 import {pointerPress, shouldShowStrongFocus} from '../../focus/strong-focus.js';
 import {ripple} from '../../ripple/directive.js';
 import {MdRipple} from '../../ripple/ripple.js';
+import {ARIAMixinStrict} from '../../types/aria.js';
 
 /**
  * Sizes variants available to non-extended FABs.
@@ -28,14 +26,15 @@ export type FabSize = 'medium'|'small'|'large';
 
 // tslint:disable-next-line:enforce-comments-on-exported-symbols
 export abstract class SharedFab extends LitElement {
+  static {
+    requestUpdateOnAriaChange(this);
+  }
+
   static override shadowRootOptions: ShadowRootInit = {
     mode: 'open' as const,
     delegatesFocus: true,
   };
 
-  @property({attribute: 'data-aria-label', noAccessor: true})
-  @ariaProperty
-  override ariaLabel!: string;
   /**
    * The size of the FAB.
    *
@@ -71,13 +70,15 @@ export abstract class SharedFab extends LitElement {
   };
 
   protected override render(): TemplateResult {
+    // Needed for closure conformance
+    const {ariaLabel} = this as ARIAMixinStrict;
     return html`
       <button
           class="fab ${classMap(this.getRenderClasses())}"
-          aria-label="${this.ariaLabel || nothing}"
-          @focus="${this.handleFocus}"
-          @blur="${this.handleBlur}"
-          @pointerdown="${this.handlePointerDown}"
+          aria-label=${ariaLabel || nothing}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @pointerdown=${this.handlePointerDown}
           ${ripple(this.getRipple)}>
         ${this.renderElevation()}
         ${this.renderFocusRing()}