fix(button): closure conformance issue

PiperOrigin-RevId: 526720124

button/lib/button.ts

@@ -18,6 +18,7 @@ import {dispatchActivationClick, isActivationClick} from '../../controller/event
 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 button component.
@@ -118,13 +119,15 @@ export abstract class Button extends LitElement {
     const isDisabled = this.disabled && !this.href;
 
     const button = this.href ? literal`a` : literal`button`;
+    // Needed for closure conformance
+    const {ariaLabel, ariaHasPopup, ariaExpanded} = this as ARIAMixinStrict;
     return staticHtml`
       <${button}
         class="md3-button ${classMap(this.getRenderClasses())}"
         ?disabled=${isDisabled}
-        aria-label="${this.ariaLabel || nothing}"
-        aria-haspopup="${this.ariaHasPopup || nothing}"
-        aria-expanded="${this.ariaExpanded || nothing}"
+        aria-label="${ariaLabel || nothing}"
+        aria-haspopup="${ariaHasPopup || nothing}"
+        aria-expanded="${ariaExpanded || nothing}"
         href=${this.href || nothing}
         target=${this.target || nothing}
         @pointerdown="${this.handlePointerDown}"

types/aria.d.ts

@@ -2,12 +2,72 @@
  * @license
  * Copyright 2022 Google LLC
  * SPDX-License-Identifier: Apache-2.0
- *
+ */
+/**
  * @fileoverview Provides types for `ariaX` properties. These are required when
  * typing `ariaX` properties since lit analyzer requires strict aria string
  * types.
  */
 
+/**
+ * An extension of `ARIAMixin` that enforces strict value types for aria
+ * properties.
+ *
+ * This is needed for correct typing in render functions with lit analyzer.
+ *
+ * @example
+ * render() {
+ *   const {ariaLabel} = this as ARIAMixinStrict;
+ *   return html`
+ *     <button aria-label=${ariaLabel || nothing}>
+ *       <slot></slot>
+ *     </button>
+ *   `;
+ * }
+ */
+export interface ARIAMixinStrict extends ARIAMixin {
+  ariaAtomic: 'true'|'false'|null;
+  ariaAutoComplete: 'none'|'inline'|'list'|'both'|null;
+  ariaBusy: 'true'|'false'|null;
+  ariaChecked: 'true'|'false'|null;
+  ariaColCount: `${number}`|null;
+  ariaColIndex: `${number}`|null;
+  ariaColIndexText: string|null;
+  ariaColSpan: `${number}`|null;
+  ariaCurrent: 'page'|'step'|'location'|'date'|'time'|'true'|'false'|null;
+  ariaDisabled: 'true'|'false'|null;
+  ariaExpanded: 'true'|'false'|null;
+  ariaHasPopup: 'false'|'true'|'menu'|'listbox'|'tree'|'grid'|'dialog'|null;
+  ariaHidden: 'true'|'false'|null;
+  ariaInvalid: 'true'|'false'|null;
+  ariaKeyShortcuts: string|null;
+  ariaLabel: string|null;
+  ariaLevel: `${number}`|null;
+  ariaLive: 'assertive'|'off'|'polite'|null;
+  ariaModal: 'true'|'false'|null;
+  ariaMultiLine: 'true'|'false'|null;
+  ariaMultiSelectable: 'true'|'false'|null;
+  ariaOrientation: 'horizontal'|'vertical'|'undefined'|null;
+  ariaPlaceholder: string|null;
+  ariaPosInSet: `${number}`|null;
+  ariaPressed: 'true'|'false'|null;
+  ariaReadOnly: 'true'|'false'|null;
+  ariaRequired: 'true'|'false'|null;
+  ariaRoleDescription: string|null;
+  ariaRowCount: `${number}`|null;
+  ariaRowIndex: `${number}`|null;
+  ariaRowIndexText: string|null;
+  ariaRowSpan: `${number}`|null;
+  ariaSelected: 'true'|'false'|null;
+  ariaSetSize: `${number}`|null;
+  ariaSort: 'ascending'|'descending'|'none'|'other'|null;
+  ariaValueMax: `${number}`|null;
+  ariaValueMin: `${number}`|null;
+  ariaValueNow: `${number}`|null;
+  ariaValueText: string|null;
+  role: ARIARole|null;
+}
+
 /**
  * Valid values for `aria-expanded`.
  */