Merge branch 'v6' into unlock-lit-version

documents/src/pages/styles/styling-components.md

@@ -36,6 +36,4 @@ ef-led-gauge[red-blue-scale] {
 }
 ```
 
-*>For Single Page Applications, the `<shady-css-scoped>` tag must be placed at the root of the application i.e. `index.html`.
-
 ::footer::

packages/elements/src/checkbox/__test__/checkbox.test.js

@@ -25,7 +25,6 @@ describe('checkbox/Checkbox', () => {
   const readonly = `<ef-checkbox readonly>${label}</ef-checkbox>`;
   const indeterminate = `<ef-checkbox indeterminate>${label}</ef-checkbox>`;
 
-
   describe('Accessiblity', () => {
     it('should fail without label', async () => {
       const el = await fixture(noLabel);
@@ -38,45 +37,44 @@ describe('checkbox/Checkbox', () => {
     it('should pass a11y test with slotted label', async () => {
       const el = await fixture(unchecked);
       expect(el).to.be.accessible();
-      await expect(el.ariaChecked).to.equal(String(el.checked));
+      expect(el.getAttribute('aria-checked')).to.equal(String(el.checked));
     });
     it('should pass a11y test when in checked state', async () => {
       const el = await fixture(checked);
-
       expect(el).to.be.accessible();
-      await expect(el.ariaChecked).to.equal(String(el.checked));
+      expect(el.getAttribute('aria-checked')).to.equal(String(el.checked));
     });
     it('should pass a11y test when in indeterminate state and has aria-checked="mixed"', async () => {
       const el = await fixture(indeterminate);
-
       expect(el).to.be.accessible();
-      await expect(el.ariaChecked).to.equal('mixed');
+      expect(el.getAttribute('aria-checked')).to.equal('mixed');
     });
     it('should have aria-checked equals to false when indeterminate changes to false', async () => {
       const el = await fixture(indeterminate);
       el.indeterminate = false;
       await elementUpdated(el);
 
       expect(el).to.be.accessible();
-      await expect(el.checked).to.equal(false);
-      await expect(el.ariaChecked).to.equal(String(el.checked));
+      expect(el.checked).to.equal(false);
+      expect(el.getAttribute('aria-checked')).to.equal(String(el.checked));
     });
     it('should have aria-checked equals to false when checked is set to indeterminate checkbox', async () => {
       const el = await fixture(indeterminate);
       el.checked = true;
       await elementUpdated(el);
 
       expect(el).to.be.accessible();
-      await expect(el.checked).to.equal(true);
-      await expect(el.ariaChecked).to.equal(String(el.checked));
+      expect(el.checked).to.equal(true);
+      expect(el.getAttribute('aria-checked')).to.equal(String(el.checked));
     });
     it('should have aria-checked equals to mixed when indeterminate is set to checked checkbox', async () => {
       const el = await fixture(checked);
       el.indeterminate = true;
       await elementUpdated(el);
 
       expect(el).to.be.accessible();
-      await expect(el.ariaChecked).to.equal('mixed');
+      expect(el.checked).to.equal(false);
+      expect(el.getAttribute('aria-checked')).to.equal('mixed');
     });
     it('should pass a11y test when disabled', async () => {
       const el = await fixture(disabled);

packages/elements/src/checkbox/index.ts

@@ -72,69 +72,47 @@ export class Checkbox extends ControlElement {
     `;
   }
 
-  private _checked = false;
   /**
    * Value of checkbox
-   * @param value new checked value
-   * @default false
    */
   @property({ type: Boolean, reflect: true })
-  public set checked (value: boolean) {
-    const oldValue = this._checked;
-    if (oldValue !== value) {
-      this._checked = value;
+  public checked = false;
 
-      // remove indeterminate if change state to checked
-      if (this._checked) {
-        this.indeterminate = false;
-      }
-
-      this.ariaChecked = String(value);
-      void this.requestUpdate('checked', oldValue);
-    }
-  }
-  public get checked (): boolean {
-    return this._checked;
-  }
-
-  private _indeterminate = false;
   /**
    * Set state to indeterminate
-   * @param value new indeterminate value
-   * @default false
    */
   @property({ type: Boolean, reflect: true })
-  public set indeterminate (value: boolean) {
-    const oldValue = this._indeterminate;
-    if (oldValue !== value) {
-      this._indeterminate = value;
-
-      // remove checked if change state to indeterminate
-      if (value) {
-        this.checked = false;
-      }
-
-      this.ariaChecked = value ? 'mixed' : String(this.checked);
-      void this.requestUpdate('indeterminate', oldValue);
-    }
-  }
-  public get indeterminate (): boolean {
-    return this._indeterminate;
-  }
-
-  /**
-   * Indicates current state of checkbox
-   * @ignore
-   */
-  @property({ type: String, reflect: true, attribute: 'aria-checked' })
-  public ariaChecked = String(this.checked);
+  public indeterminate = false;
 
   /**
    * Getter for label
    */
   @query('[part=label]', true)
   private labelEl!: HTMLElement;
 
+  /**
+   * Called before update() to compute values needed during the update.
+   * @param changedProperties Properties that has changed
+   * @returns {void}
+   */
+  protected willUpdate (changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('checked')) {
+      if (this.checked) {
+        this.indeterminate = false;
+      }
+      this.setAttribute('aria-checked', String(this.checked));
+    }
+
+    if (changedProperties.has('indeterminate')) {
+      if (this.indeterminate) {
+        this.checked = false;
+      }
+      this.setAttribute('aria-checked', this.indeterminate ? 'mixed' : String(this.checked));
+    }
+  }
+
   /**
    * Called once after the component is first rendered
    * @param changedProperties map of changed properties with old values

packages/elements/src/radio-button/__test__/radio-button.test.js

@@ -715,25 +715,22 @@ describe('radio-button/RadioButton', () => {
     });
     it('should pass a11y test with aria-label', async () => {
       const el = await fixture(`<ef-radio-button aria-label="Radio Button"></ef-checkbox>`);
-      expect(el).to.be.accessible({ignoredRules: ['aria-allowed-attr']});
-      expect(el.ariaChecked).to.be.equal(String(el.checked), 'ariaChecked');
-      expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked), 'aria-checked');
+      expect(el).to.be.accessible();
+      expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked));
     });
     it('should pass a11y test with slotted label', async () => {
       const el = await fixture(`<ef-radio-button>Radio Button</ef-checkbox>`);
-      expect(el).to.be.accessible({ignoredRules: ['aria-allowed-attr']});
-      expect(el.ariaChecked).to.be.equal(String(el.checked), 'ariaChecked');
-      expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked), 'aria-checked');
+      expect(el).to.be.accessible();
+      expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked));
     });
     it('should pass a11y test when radio button is checked', async () => {
       const el = await fixture(`<ef-radio-button checked>Radio Button</ef-checkbox>`);
-      expect(el).to.be.accessible({ignoredRules: ['aria-allowed-attr']});
-      expect(el.ariaChecked).to.be.equal(String(el.checked), 'ariaChecked');
-      expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked), 'aria-checked');
+      expect(el).to.be.accessible();
+      expect(el.getAttribute('aria-checked')).to.be.equal(String(el.checked));
     });
     it('should pass a11y test when disabled', async () => {
       const el = await fixture(`<ef-radio-button disabled>Radio Button</ef-checkbox>`);
-      expect(el).to.be.accessible({ignoredRules: ['aria-allowed-attr']});
+      expect(el).to.be.accessible();
     });
   });
 });

packages/elements/src/radio-button/index.ts

@@ -83,34 +83,11 @@ export class RadioButton extends ControlElement {
     `;
   }
 
-  private _checked = false;
-
   /**
    * Radio button checked state
-   * @param value checked state
-   * @default false
-   * @returns {void}
    */
   @property({ type: Boolean, reflect: true })
-  public set checked (value: boolean) {
-    const oldValue = this._checked;
-    if (oldValue !== value) {
-      this._checked = value;
-
-      this.ariaChecked = String(value);
-      void this.requestUpdate('checked', oldValue);
-    }
-  }
-  public get checked (): boolean {
-    return this._checked;
-  }
-
-  /**
-   * Aria indicating checked state
-   * @ignore
-   */
-  @property({ type: String, reflect: true, attribute: 'aria-checked' })
-  public ariaChecked = String(this.checked);
+  public checked = false;
 
   /**
    * Getter for label
@@ -137,6 +114,19 @@ export class RadioButton extends ControlElement {
     super.disconnectedCallback();
   }
 
+  /**
+   * Called before update() to compute values needed during the update.
+   * @param changedProperties Properties that has changed
+   * @returns {void}
+   */
+  protected willUpdate (changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('checked')) {
+      this.setAttribute('aria-checked', String(this.checked));
+    }
+  }
+
   /**
    * Invoked whenever the element is updated
    * @param changedProperties changed properties

packages/elements/src/toggle/__test__/toggle.test.js

@@ -43,14 +43,14 @@ describe('toggle/Toggle', () => {
     });
     it('Should pass a11y test when in unchecked state', async () => {
       expect(el).to.be.accessible();
-      await expect(el.ariaChecked).to.equal(String(el.checked));
+      expect(el.getAttribute('aria-checked')).to.equal(String(el.checked));
     });
     it('Should pass a11y test when in checked state', async () => {
       el.checked = true;
 
       await elementUpdated(el);
       expect(el).to.be.accessible();
-      await expect(el.ariaChecked).to.equal(String(el.checked));
+      expect(el.getAttribute('aria-checked')).to.equal(String(el.checked));
     });
     it('Should pass a11y test when disabled', async () => {
       el.disabled = true;

packages/elements/src/toggle/index.ts

@@ -67,31 +67,11 @@ export class Toggle extends ControlElement {
   })
   public label = '';
 
-  private _checked = false;
   /**
    * Value of toggle
-   * @param value new checked value
-   * @default false
    */
   @property({ type: Boolean, reflect: true })
-  public set checked (value: boolean) {
-    const oldValue = this._checked;
-    if (oldValue !== value) {
-      this._checked = value;
-      this.ariaChecked = String(value);
-      void this.requestUpdate('checked', oldValue);
-    }
-  }
-  public get checked (): boolean {
-    return this._checked;
-  }
-
-  /**
-   * Aria indicating current state of toggle
-   * @ignore
-   */
-  @property({ type: String, reflect: true, attribute: 'aria-checked' })
-  public ariaChecked = String(this.checked);
+  public checked = false;
 
   /**
    * A `CSSResultGroup` that will be used
@@ -107,6 +87,19 @@ export class Toggle extends ControlElement {
     `;
   }
 
+  /**
+   * Called before update() to compute values needed during the update.
+   * @param changedProperties Properties that has changed
+   * @returns {void}
+   */
+  protected willUpdate (changedProperties: PropertyValues): void {
+    super.willUpdate(changedProperties);
+
+    if (changedProperties.has('checked')) {
+      this.setAttribute('aria-checked', String(this.checked));
+    }
+  }
+
   /**
    * Invoked when the element is first updated. Implement to perform one time
    * work on the element after update.