microsoft · chrisdholt · Mar 10, 2023 · Oct 9, 2022 · Oct 9, 2022 · Oct 9, 2022
diff --git a/change/@microsoft-fast-foundation-b9885563-e3e8-4c85-a55d-bac04c627fec.json b/change/@microsoft-fast-foundation-b9885563-e3e8-4c85-a55d-bac04c627fec.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "remove readonly support from fast radio",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}
@@ -1610,9 +1610,6 @@ export class FASTRadio extends FormAssociatedRadio implements RadioControl {
     // @beta
     keypressHandler(e: KeyboardEvent): boolean | void;
     name: string;
-    readOnly: boolean;
-    // (undocumented)
-    protected readOnlyChanged(): void;
 }
 
 // @public
@@ -1637,8 +1634,6 @@ export class FASTRadioGroup extends FASTElement {
     protected nameChanged(): void;
     orientation: Orientation | "horizontal" | "vertical";
     readOnly: boolean;
-    // (undocumented)
-    protected readOnlyChanged(): void;
     // @internal (undocumented)
     slottedRadioButtons: HTMLElement[];
     // (undocumented)
@@ -2528,7 +2523,7 @@ export interface PropertyTarget {
 export type ProxyElement = HTMLSelectElement | HTMLTextAreaElement | HTMLInputElement;
 
 // @public
-export type RadioControl = Pick<HTMLInputElement, "checked" | "disabled" | "readOnly" | "focus" | "setAttribute" | "getAttribute">;
+export type RadioControl = Pick<HTMLInputElement, "checked" | "disabled" | "focus" | "setAttribute" | "getAttribute">;
 
 // @public
 export function radioGroupTemplate<T extends FASTRadioGroup>(): ElementViewTemplate<T>;

@@ -78,7 +78,6 @@ export const myRadioGroup = RadioGroup.compose({
 
 | Name                         | Privacy   | Description | Parameters                                   | Return | Inherited From |
 | ---------------------------- | --------- | ----------- | -------------------------------------------- | ------ | -------------- |
-| `readOnlyChanged`            | protected |             |                                              | `void` |                |
 | `disabledChanged`            | protected |             |                                              | `void` |                |
 | `nameChanged`                | protected |             |                                              | `void` |                |
 | `valueChanged`               | protected |             |                                              | `void` |                |

@@ -162,32 +162,6 @@ test.describe("Radio Group", () => {
         ).toBeTruthy();
     });
 
-    test("should set all child radio elements to readonly when the `readonly` property is true", async () => {
-        await root.evaluate(node => {
-            node.innerHTML = /* html */ `
-                <fast-radio-group readonly>
-                    <fast-radio></fast-radio>
-                    <fast-radio></fast-radio>
-                    <fast-radio></fast-radio>
-                </fast-radio-group>
-            `;
-        });
-
-        await expect(element).toHaveBooleanAttribute("readonly");
-
-        expect(
-            await radios.evaluateAll(radios =>
-                radios.every(radio => radio.hasAttribute("readonly"))
-            )
-        ).toBeTruthy();
-
-        expect(
-            await radios.evaluateAll(radios =>
-                radios.every(radio => radio.getAttribute("aria-readonly") === "true")
-            )
-        ).toBeTruthy();
-    });
-
     test("should set tabindex of 0 to a child radio with a matching `value`", async () => {
         await root.evaluate(node => {
             node.innerHTML = /* html */ `

@@ -31,17 +31,6 @@ export class FASTRadioGroup extends FASTElement {
      */
     @attr({ attribute: "readonly", mode: "boolean" })
     public readOnly: boolean;
-    protected readOnlyChanged(): void {
-        if (this.slottedRadioButtons !== undefined) {
-            this.slottedRadioButtons.forEach((radio: HTMLInputElement) => {
-                if (this.readOnly) {
-                    radio.readOnly = true;
-                } else {
-                    radio.readOnly = false;
-                }
-            });
-        }
-    }
 
     /**
      * Disables the radio group and child radios.
@@ -250,16 +239,10 @@ export class FASTRadioGroup extends FASTElement {
         const radio: HTMLInputElement = group[index] as HTMLInputElement;
         if (!this.isInsideToolbar) {
             radio.setAttribute("tabindex", "0");
-            if (radio.readOnly) {
-                this.slottedRadioButtons.forEach((nextRadio: HTMLInputElement) => {
-                    if (nextRadio !== radio) {
-                        nextRadio.setAttribute("tabindex", "-1");
-                    }
-                });
-            } else {
+            if (!this.readOnly) {
                 radio.checked = true;
-                this.selectedRadio = radio;
             }
+            this.selectedRadio = radio;
         }
         this.focusedRadio = radio;
         radio.focus();

@@ -113,32 +113,24 @@ export const myRadio = Radio.compose<RadioOptions>({
 
 #### 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. |                     |
-| `name`     | public  | `string`  |         | The name of the radio. See [name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) for more info.                                              |                     |
-| `proxy`    |         |           |         |                                                                                                                                                                                             | FormAssociatedRadio |
+| Name    | Privacy | Type     | Default | Description                                                                                                                                    | Inherited From      |
+| ------- | ------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `name`  | public  | `string` |         | The name of the radio. See [name attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname) for more info. |                     |
+| `proxy` |         |          |         |                                                                                                                                                | FormAssociatedRadio |
 
 #### Methods
 
-| Name              | Privacy   | Description                       | Parameters         | Return            | Inherited From |
-| ----------------- | --------- | --------------------------------- | ------------------ | ----------------- | -------------- |
-| `readOnlyChanged` | protected |                                   |                    | `void`            |                |
-| `keypressHandler` | public    | Handles key presses on the radio. | `e: KeyboardEvent` | `boolean or void` |                |
-| `clickHandler`    | public    | Handles clicks on the radio.      | `e: MouseEvent`    | `boolean or void` |                |
+| Name              | Privacy | Description                       | Parameters         | Return            | Inherited From |
+| ----------------- | ------- | --------------------------------- | ------------------ | ----------------- | -------------- |
+| `keypressHandler` | public  | Handles key presses on the radio. | `e: KeyboardEvent` | `boolean or void` |                |
+| `clickHandler`    | public  | Handles clicks on the radio.      | `e: MouseEvent`    | `boolean or void` |                |
 
 #### 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                                       |

@@ -71,17 +71,6 @@ test.describe("Radio", () => {
         await element.evaluate((node: FASTRadio) => (node.disabled = false));
 
         await expect(element).toHaveAttribute("aria-disabled", "false");
-
-        // Readonly
-        await expect(element).not.hasAttribute("aria-readonly");
-
-        await element.evaluate((node: FASTRadio) => (node.readOnly = true));
-
-        await expect(element).toHaveAttribute("aria-readonly", "true");
-
-        await element.evaluate((node: FASTRadio) => (node.readOnly = false));
-
-        await expect(element).toHaveAttribute("aria-readonly", "false");
     });
 
     test("should set a tabindex of 0 on the element", async () => {

@@ -35,8 +35,6 @@ Extends [form associated custom element](../form-associated/form-associated-cust
   - The current checked state of the radio
 
 *Content attributes*
-- `readonly`
-  - The radio should be submitted with the form but should not be editable.
 - `disabled`
   - The radio should be disabled from user interaction and will not be submitted with the form data.
 - `value` - Not visible to the user, it's used for form data and to distinguish between other radio buttons of the same name attribute value.
@@ -72,7 +70,6 @@ Extends [form associated custom element](../form-associated/form-associated-cust
 - checked
 - disabled
 - required
-- readonly
 
 *Slotted Content/Slotted Classes*
 *CSS Parts*
@@ -89,9 +86,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 radio will be a focusable element with the following accessibility content attributes:
 [MDN Web docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role)

@@ -16,7 +16,6 @@ export function radioTemplate<T extends FASTRadio>(
             aria-checked="${x => x.checked}"
             aria-required="${x => x.required}"
             aria-disabled="${x => x.disabled}"
-            aria-readonly="${x => x.readOnly}"
             @keypress="${(x, c) => x.keypressHandler(c.event as KeyboardEvent)}"
             @click="${(x, c) => x.clickHandler(c.event as MouseEvent)}"
         >

@@ -1,5 +1,6 @@
 import { attr, observable, SyntheticViewTemplate } from "@microsoft/fast-element";
 import { keySpace } from "@microsoft/fast-web-utilities";
+import type { FASTRadioGroup } from "src/radio-group/radio-group.js";
 import { FormAssociatedRadio } from "./radio.form-associated.js";
 
 /**
@@ -8,7 +9,7 @@ import { FormAssociatedRadio } from "./radio.form-associated.js";
  */
 export type RadioControl = Pick<
     HTMLInputElement,
-    "checked" | "disabled" | "readOnly" | "focus" | "setAttribute" | "getAttribute"
+    "checked" | "disabled" | "focus" | "setAttribute" | "getAttribute"
 >;
 
 /**
@@ -32,20 +33,6 @@ export type RadioOptions = {
  * @public
  */
 export class FASTRadio extends FormAssociatedRadio implements RadioControl {
-    /**
-     * 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 name of the radio. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute} for more info.
      */
@@ -66,6 +53,12 @@ export class FASTRadio extends FormAssociatedRadio implements RadioControl {
     @observable
     public defaultSlottedNodes: Node[];
 
+    private get radioGroup() {
+        return (this as HTMLElement).closest(
+            "[role=radiogroup]"
+        ) as FASTRadioGroup | null;
+    }
+
     /**
      * @internal
      */
@@ -116,10 +109,7 @@ export class FASTRadio extends FormAssociatedRadio implements RadioControl {
     }
 
     private isInsideRadioGroup(): boolean {
-        const parent: HTMLElement | null = (this as HTMLElement).closest(
-            "[role=radiogroup]"
-        );
-        return parent !== null;
+        return this.radioGroup !== null;
     }
 
     /**
@@ -129,7 +119,7 @@ export class FASTRadio extends FormAssociatedRadio implements RadioControl {
     public keypressHandler(e: KeyboardEvent): boolean | void {
         switch (e.key) {
             case keySpace:
-                if (!this.checked && !this.readOnly) {
+                if (!this.checked && !this.radioGroup?.readOnly) {
                     this.checked = true;
                 }
                 return;
@@ -143,7 +133,7 @@ export class FASTRadio extends FormAssociatedRadio implements RadioControl {
      * @beta
      */
     public clickHandler(e: MouseEvent): boolean | void {
-        if (!this.disabled && !this.readOnly && !this.checked) {
+        if (!this.disabled && !this.radioGroup?.readOnly && !this.checked) {
             this.checked = true;
         }
     }

@@ -118,8 +118,6 @@ const styles = css`
     }
 
     :host([disabled]) .label,
-    :host([readonly]) .label,
-    :host([readonly]) .control,
     :host([disabled]) .control {
         cursor: not-allowed;
     }

@@ -8,7 +8,6 @@ export const storyTemplate = html<StoryArgs<FASTRadio>>`
         ?checked="${x => x.checked}"
         ?disabled="${x => x.disabled}"
         ?required="${x => x.required}"
-        ?readonly="${x => x.readOnly}"
         name="${x => x.name}"
         value="${x => x.value}"
     >
@@ -23,7 +22,6 @@ export default {
         checked: false,
         disabled: false,
         required: false,
-        readOnly: false,
         storyContent: "Label",
     },
     argTypes: {