(chore) Fix Typescript 4.4 compilation issues with aria properties

Typescript 4.4 defines aria properties on Element prototype to be non-nullable. This matches the spec language in https://www.w3.org/TR/wai-aria-1.2/#AriaAttributes, but Chrome and Safari as of when these properties were added to MWC allowed the property to be set with `null` to clear the attribute.

There should be some ongoing work to align the spec and browsers in behavior, but that is out of scope for this project, unblocking Typescript 4.4 is of higher priority.

Related microsoft/TypeScript-DOM-lib-generator#1119
Fixes #2676

PiperOrigin-RevId: 395581595

Author: dfreedm

packages/base/aria-property.ts

@@ -97,7 +97,7 @@ function tsDecorator(
  * class MyElement {
  *   @ariaProperty
  *   @property({ type: String, attribute: 'aria-label' })
- *   ariaLabel?: string;
+ *   ariaLabel!: string;
  * }
  * ```
  * @category Decorator

packages/base/test/aria-property.test.ts

@@ -20,17 +20,17 @@ import {fixture, TestFixture} from '../../../test/src/util/helpers';
 class TestElement extends LitElement {
   @ariaProperty
   @property({type: String, attribute: 'aria-label'})
-  ariaLabel?: string;
+  ariaLabel!: string;
 
-  protected internalAriaChecked: 'true'|'false'|'mixed'|undefined = undefined;
+  protected internalAriaChecked: 'true'|'false'|'mixed'|null = null;
 
   @ariaProperty
   @property({attribute: 'aria-checked'})
-  set ariaChecked(value: 'true'|'false'|'mixed'|undefined) {
+  set ariaChecked(value: 'true'|'false'|'mixed'|null) {
     if (value === 'mixed') {
       this.internalAriaChecked = value;
     } else {
-      this.internalAriaChecked = undefined;
+      this.internalAriaChecked = null;
     }
     this.requestUpdate();
   }
@@ -39,7 +39,7 @@ class TestElement extends LitElement {
     return this.internalAriaChecked;
   }
 
-  @property({attribute: 'aria-owns'}) @ariaProperty ariaOwns?: string;
+  @property({attribute: 'aria-owns'}) @ariaProperty ariaOwns!: string;
 
   override render() {
     return html`<input aria-label="${
@@ -86,7 +86,7 @@ describe('aria-property:', () => {
         expect(shadowTargetElement).not.toBeNull();
         return;
       }
-      expect(component.ariaLabel).toEqual(undefined);
+      expect(component.ariaLabel).toBeFalsy();
       component.ariaLabel = 'foo';
       await component.updateComplete;
       expect(component.getAttribute('aria-label')).toBeNull();
@@ -107,7 +107,8 @@ describe('aria-property:', () => {
         expect(shadowTargetElement).not.toBeNull();
         return;
       }
-      expect(component.ariaChecked).toEqual(undefined);
+      expect(component.ariaChecked).toBeFalsy();
+      ;
       component.ariaChecked = 'mixed';
       await component.updateComplete;
       expect(component.getAttribute('aria-checked')).toBeNull();
@@ -128,7 +129,7 @@ describe('aria-property:', () => {
         expect(shadowTargetElement).not.toBeNull();
         return;
       }
-      expect(component.ariaOwns).toEqual(undefined);
+      expect(component.ariaOwns).toBeFalsy();
       component.ariaOwns = 'baz';
       await component.updateComplete;
       expect(component.getAttribute('aria-owns')).toBeNull();
@@ -149,7 +150,7 @@ describe('aria-property:', () => {
         expect(shadowTargetElement).not.toBeNull();
         return;
       }
-      expect(component.ariaLabel).toEqual(undefined);
+      expect(component.ariaLabel).toBeFalsy();
       component.setAttribute('aria-label', 'foo');
       await component.updateComplete;
       expect(component.getAttribute('aria-label')).toBeNull();
@@ -170,7 +171,7 @@ describe('aria-property:', () => {
         expect(shadowTargetElement).not.toBeNull();
         return;
       }
-      expect(component.ariaChecked).toEqual(undefined);
+      expect(component.ariaChecked).toEqual(null);
       component.setAttribute('aria-checked', 'mixed');
       await component.updateComplete;
       expect(component.getAttribute('aria-checked')).toBeNull();
@@ -192,7 +193,7 @@ describe('aria-property:', () => {
         expect(shadowTargetElement).not.toBeNull();
         return;
       }
-      expect(component.ariaOwns).toEqual(undefined);
+      expect(component.ariaOwns).toBeFalsy();
       component.setAttribute('aria-owns', 'baz');
       await component.updateComplete;
       expect(component.getAttribute('aria-owns')).toBeNull();

packages/button/mwc-button-base.ts

@@ -25,7 +25,7 @@ export class ButtonBase extends LitElement {
   /** @soyPrefixAttribute */
   @ariaProperty
   @property({type: String, attribute: 'aria-haspopup'})
-  ariaHasPopup?: AriaHasPopup;
+  ariaHasPopup!: AriaHasPopup;
 
   @property({type: Boolean, reflect: true}) raised = false;
 

packages/checkbox/mwc-checkbox-base.ts

@@ -36,17 +36,17 @@ export class CheckboxBase extends FormElement {
   /** @soyPrefixAttribute */
   @ariaProperty
   @property({type: String, attribute: 'aria-label'})
-  ariaLabel?: string;
+  ariaLabel!: string;
 
   /** @soyPrefixAttribute */
   @ariaProperty
   @property({type: String, attribute: 'aria-labelledby'})
-  ariaLabelledBy?: string;
+  ariaLabelledBy!: string;
 
   /** @soyPrefixAttribute */
   @ariaProperty
   @property({type: String, attribute: 'aria-describedby'})
-  ariaDescribedBy?: string;
+  ariaDescribedBy!: string;
 
   /**
    * Touch target extends beyond visual boundary of a component by default.

packages/circular-progress-four-color/test/mwc-circular-progress-four-color.test.ts

@@ -54,7 +54,7 @@ describe('mwc-circular-progress-four-color', () => {
       expect(element.progress).toEqual(0);
       expect(element.density).toEqual(0);
       expect(element.closed).toBeFalse();
-      expect(element.ariaLabel).toEqual(undefined);
+      expect(element.ariaLabel).toBeFalsy();
     });
 
     it('open sets closed to false', async () => {

packages/circular-progress/mwc-circular-progress-base.ts

@@ -26,7 +26,7 @@ export class CircularProgressBase extends LitElement {
   /** @soyPrefixAttribute */
   @ariaProperty
   @property({type: String, attribute: 'aria-label'})
-  ariaLabel?: string
+  ariaLabel!: string
 
   open() {
     this.closed = false;

packages/circular-progress/test/mwc-circular-progress.test.ts

@@ -15,7 +15,7 @@ import {fixture, TestFixture} from '../../../test/src/util/helpers';
 const INDETERMINATE_CLASS = 'mdc-circular-progress--indeterminate';
 
 interface ProgressProps {
-  ariaLabel: string|undefined;
+  ariaLabel: string;
   progress: number;
   indeterminate: true;
   density: number;
@@ -56,7 +56,7 @@ describe('mwc-circular-progress', () => {
       expect(element.progress).toEqual(0);
       expect(element.density).toEqual(0);
       expect(element.closed).toBeFalse();
-      expect(element.ariaLabel).toEqual(undefined);
+      expect(element.ariaLabel).toBeFalsy();
     });
 
     it('open sets closed to false', async () => {

packages/icon-button-toggle/mwc-icon-button-toggle-base.ts

@@ -23,7 +23,7 @@ export class IconButtonToggleBase extends LitElement {
   /** @soyPrefixAttribute */
   @ariaProperty
   @property({type: String, attribute: 'aria-label'})
-  ariaLabel?: string;
+  ariaLabel!: string;
 
   @property({type: Boolean, reflect: true}) disabled = false;
 
@@ -32,10 +32,10 @@ export class IconButtonToggleBase extends LitElement {
   @property({type: String}) offIcon = '';
 
   // `aria-label` of the button when `on` is true.
-  @property({type: String}) ariaLabelOn?: string;
+  @property({type: String}) ariaLabelOn!: string;
 
   // `aria-label` of the button when `on` is false.
-  @property({type: String}) ariaLabelOff?: string;
+  @property({type: String}) ariaLabelOff!: string;
 
   @property({type: Boolean, reflect: true}) on = false;
 

packages/icon-button/mwc-icon-button-base.ts

@@ -29,7 +29,7 @@ export class IconButtonBase extends LitElement {
   /** @soyPrefixAttribute */
   @ariaProperty
   @property({type: String, attribute: 'aria-haspopup'})
-  ariaHasPopup?: AriaHasPopup;
+  ariaHasPopup!: AriaHasPopup;
 
   @query('button') buttonElement!: HTMLElement;
 

packages/linear-progress/mwc-linear-progress-base.ts

@@ -29,7 +29,7 @@ export class LinearProgressBase extends LitElement {
   @property({type: Boolean, reflect: true}) closed = false;
 
   /** @soyPrefixAttribute */
-  @ariaProperty @property({attribute: 'aria-label'}) ariaLabel?: string;
+  @ariaProperty @property({attribute: 'aria-label'}) ariaLabel!: string;
 
   @state() protected stylePrimaryHalf = '';
   @state() protected stylePrimaryFull = '';