microsoft · chrisdholt · Nov 23, 2022 · Nov 12, 2022 · Nov 12, 2022 · Nov 12, 2022
diff --git a/change/@microsoft-fast-foundation-1eab34df-e56e-484b-95df-6fa33630a274.json b/change/@microsoft-fast-foundation-1eab34df-e56e-484b-95df-6fa33630a274.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "checkbox remove irrelevant read-only property",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
@@ -883,9 +883,6 @@ export class FASTCheckbox extends FormAssociatedCheckbox {
     initialValue: string;
     // @internal (undocumented)
     keypressHandler: (e: KeyboardEvent) => void;
-    readOnly: boolean;
-    // (undocumented)
-    protected readOnlyChanged(): void;
 }
 
 // Warning: (ae-different-release-tags) This symbol has another declaration with a different release tag

@@ -110,30 +110,17 @@ export const myCheckbox = Checkbox.compose<CheckboxOptions>({
 
 #### Fields
 
-| Name            | Privacy | Type      | Default | Description                                                                                                                                                                                 | Inherited From         |
-| --------------- | ------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
-| `readOnly`      | public  | `boolean` |         | When true, the control will be immutable by user interaction. See [readonly HTML attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly) for more information. |                        |
-| `indeterminate` | public  | `boolean` | `false` | The indeterminate state of the control                                                                                                                                                      |                        |
-| `proxy`         |         |           |         |                                                                                                                                                                                             | FormAssociatedCheckbox |
-
-#### Methods
-
-| Name              | Privacy   | Description | Parameters | Return | Inherited From |
-| ----------------- | --------- | ----------- | ---------- | ------ | -------------- |
-| `readOnlyChanged` | protected |             |            | `void` |                |
+| Name            | Privacy | Type      | Default | Description                            | Inherited From         |
+| --------------- | ------- | --------- | ------- | -------------------------------------- | ---------------------- |
+| `indeterminate` | public  | `boolean` | `false` | The indeterminate state of the control |                        |
+| `proxy`         |         |           |         |                                        | FormAssociatedCheckbox |
 
 #### Events
 
 | Name     | Type | Description                                                | Inherited From |
 | -------- | ---- | ---------------------------------------------------------- | -------------- |
 | `change` |      | Emits a custom change event when the checked state changes |                |
 
-#### Attributes
-
-| Name       | Field    | Inherited From |
-| ---------- | -------- | -------------- |
-| `readonly` | readOnly |                |
-
 #### CSS Parts
 
 | Name      | Description                                          |

@@ -150,38 +150,6 @@ test.describe("Checkbox", () => {
         await expect(element).not.toHaveAttribute("tabindex", "0");
     });
 
-    test("should NOT set a default `aria-readonly` value when `readonly` is not defined", async () => {
-        await root.evaluate(node => {
-            node.innerHTML = /* html */ `
-                <fast-checkbox></fast-checkbox>
-            `;
-        });
-
-        await expect(element).not.toHaveBooleanAttribute("readonly");
-
-        await expect(element).not.hasAttribute("aria-readonly");
-    });
-
-    test("should set the `aria-readonly` attribute equal to the `readonly` property", async () => {
-        await root.evaluate(node => {
-            node.innerHTML = /* html */ `
-                <fast-checkbox></fast-checkbox>
-            `;
-        });
-
-        await element.evaluate((node: FASTCheckbox) => {
-            node.readOnly = true;
-        });
-
-        await expect(element).toHaveAttribute("aria-readonly", "true");
-
-        await element.evaluate((node: FASTCheckbox) => {
-            node.readOnly = false;
-        });
-
-        await expect(element).toHaveAttribute("aria-readonly", "false");
-    });
-
     test("should set the aria-checked value to 'mixed' when indeterminate property is true", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `

@@ -39,8 +39,6 @@ Extends [form associated custom element](../form-associated/form-associated-cust
   - The indeterminate state. Independent of checked
 
 *Content attributes*
-- `readonly`
-  - The checkbox should be submitted with the form but should not be editable.
 - `value`
   - Defaults to "on" to match `input[type="checkbox"]`
 - `checked`
@@ -70,7 +68,6 @@ Extends [form associated custom element](../form-associated/form-associated-cust
 - checked
 - disabled
 - required
-- readonly
 
 *Slotted Content/Slotted Classes*
 *CSS Parts*
@@ -90,9 +87,6 @@ The checked state can be toggled by:
 **disabled**: `true` or `false`
 When disabled, the value will not be changeable through user interaction. It should also not expose it's value to a form submission.
 
-**readonly**: `true` or `false`
-When readonly, the value will not be changeable through user interaction. The value will still be exposed to forms on submission.
-
 ### Accessibility
 The root element inside the shadow-dom of the checkbox will be a focusable element with the following accessability content attributes:
 - role: checkbox

@@ -14,7 +14,6 @@ export function checkboxTemplate<T extends FASTCheckbox>(
             aria-checked="${x => (x.indeterminate ? "mixed" : x.checked)}"
             aria-required="${x => x.required}"
             aria-disabled="${x => x.disabled}"
-            aria-readonly="${x => x.readOnly}"
             tabindex="${x => (x.disabled ? null : 0)}"
             @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
             @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"

@@ -25,20 +25,6 @@ export type CheckboxOptions = {
  * @public
  */
 export class FASTCheckbox extends FormAssociatedCheckbox {
-    /**
-     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute} for more information.
-     * @public
-     * @remarks
-     * HTML Attribute: readonly
-     */
-    @attr({ attribute: "readonly", mode: "boolean" })
-    public readOnly: boolean; // Map to proxy element
-    protected readOnlyChanged(): void {
-        if (this.proxy instanceof HTMLInputElement) {
-            this.proxy.readOnly = this.readOnly;
-        }
-    }
-
     /**
      * The element's value to be included in form submission when checked.
      * Default to "on" to reach parity with input[type="checkbox"]
@@ -65,20 +51,24 @@ export class FASTCheckbox extends FormAssociatedCheckbox {
         this.proxy.setAttribute("type", "checkbox");
     }
 
+    private toggleChecked() {
+        if (this.indeterminate) {
+            this.indeterminate = false;
+        }
+        this.checked = !this.checked;
+    }
+
     /**
      * @internal
      */
     public keypressHandler = (e: KeyboardEvent): void => {
-        if (this.readOnly) {
+        if (this.disabled) {
             return;
         }
 
         switch (e.key) {
             case keySpace:
-                if (this.indeterminate) {
-                    this.indeterminate = false;
-                }
-                this.checked = !this.checked;
+                this.toggleChecked();
                 break;
         }
     };
@@ -87,11 +77,8 @@ export class FASTCheckbox extends FormAssociatedCheckbox {
      * @internal
      */
     public clickHandler = (e: MouseEvent): void => {
-        if (!this.disabled && !this.readOnly) {
-            if (this.indeterminate) {
-                this.indeterminate = false;
-            }
-            this.checked = !this.checked;
+        if (!this.disabled) {
+            this.toggleChecked();
         }
     };
 }