From 6df4c5d778de84c573dc38d4c286bbd169fb6f93 Mon Sep 17 00:00:00 2001 From: yinonov Date: Sat, 12 Nov 2022 18:40:47 +0200 Subject: [PATCH 1/5] fix(foundation): checkbox remove read-only support BREAKING CHANGE: removed readOnly property from checkbox's API --- packages/web-components/fast-foundation/src/checkbox/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web-components/fast-foundation/src/checkbox/README.md b/packages/web-components/fast-foundation/src/checkbox/README.md index 6062c01d965..15659ed12dc 100644 --- a/packages/web-components/fast-foundation/src/checkbox/README.md +++ b/packages/web-components/fast-foundation/src/checkbox/README.md @@ -112,7 +112,6 @@ export const myCheckbox = Checkbox.compose({ | 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 | From 68d6be59d95ec0cb2c6839103e5ac1cddfd8ea2c Mon Sep 17 00:00:00 2001 From: yinonov Date: Sat, 12 Nov 2022 19:17:54 +0200 Subject: [PATCH 2/5] remove any readOnly evidence --- .../fast-foundation/docs/api-report.md | 3 -- .../fast-foundation/src/checkbox/README.md | 20 +++--------- .../src/checkbox/checkbox.pw.spec.ts | 32 ------------------- .../src/checkbox/checkbox.spec.md | 6 ---- .../src/checkbox/checkbox.template.ts | 1 - .../fast-foundation/src/checkbox/checkbox.ts | 20 +----------- 6 files changed, 5 insertions(+), 77 deletions(-) diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md index 5ccd08f457f..3eba77c9c59 100644 --- a/packages/web-components/fast-foundation/docs/api-report.md +++ b/packages/web-components/fast-foundation/docs/api-report.md @@ -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 diff --git a/packages/web-components/fast-foundation/src/checkbox/README.md b/packages/web-components/fast-foundation/src/checkbox/README.md index 15659ed12dc..36c6d7d9ade 100644 --- a/packages/web-components/fast-foundation/src/checkbox/README.md +++ b/packages/web-components/fast-foundation/src/checkbox/README.md @@ -110,16 +110,10 @@ export const myCheckbox = Checkbox.compose({ #### Fields -| Name | Privacy | Type | Default | Description | Inherited From | -| --------------- | ------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | -| `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 @@ -127,12 +121,6 @@ export const myCheckbox = Checkbox.compose({ | -------- | ---- | ---------------------------------------------------------- | -------------- | | `change` | | Emits a custom change event when the checked state changes | | -#### Attributes - -| Name | Field | Inherited From | -| ---------- | -------- | -------------- | -| `readonly` | readOnly | | - #### CSS Parts | Name | Description | diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.pw.spec.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.pw.spec.ts index e4881b07287..a4414970bea 100644 --- a/packages/web-components/fast-foundation/src/checkbox/checkbox.pw.spec.ts +++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.pw.spec.ts @@ -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 */ ` - - `; - }); - - 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 */ ` - - `; - }); - - 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 */ ` diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.md b/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.md index c3b81e9d24a..14141b53881 100644 --- a/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.md +++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.spec.md @@ -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 diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts index 8cec63324ae..aeab1eccd27 100644 --- a/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts +++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.template.ts @@ -14,7 +14,6 @@ export function checkboxTemplate( 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)}" diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts index 19a2d3d957a..8095c229890 100644 --- a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts +++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts @@ -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"] @@ -69,10 +55,6 @@ export class FASTCheckbox extends FormAssociatedCheckbox { * @internal */ public keypressHandler = (e: KeyboardEvent): void => { - if (this.readOnly) { - return; - } - switch (e.key) { case keySpace: if (this.indeterminate) { @@ -87,7 +69,7 @@ export class FASTCheckbox extends FormAssociatedCheckbox { * @internal */ public clickHandler = (e: MouseEvent): void => { - if (!this.disabled && !this.readOnly) { + if (!this.disabled) { if (this.indeterminate) { this.indeterminate = false; } From e0df1e06ae6674b0bf9adbd2a346b720f83c6b6c Mon Sep 17 00:00:00 2001 From: yinonov Date: Sat, 12 Nov 2022 19:20:22 +0200 Subject: [PATCH 3/5] Change files --- ...st-foundation-1eab34df-e56e-484b-95df-6fa33630a274.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@microsoft-fast-foundation-1eab34df-e56e-484b-95df-6fa33630a274.json diff --git a/change/@microsoft-fast-foundation-1eab34df-e56e-484b-95df-6fa33630a274.json b/change/@microsoft-fast-foundation-1eab34df-e56e-484b-95df-6fa33630a274.json new file mode 100644 index 00000000000..09279d3f9a8 --- /dev/null +++ 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": "yinon@hotmail.com", + "dependentChangeType": "patch" +} From d2964b13589530e5f283e163f89db9eb42db0df0 Mon Sep 17 00:00:00 2001 From: yinonov Date: Mon, 14 Nov 2022 20:33:23 +0200 Subject: [PATCH 4/5] factor expressions to method --- .../fast-foundation/src/checkbox/checkbox.ts | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts index 8095c229890..af17a62555e 100644 --- a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts +++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts @@ -51,16 +51,20 @@ 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 => { switch (e.key) { case keySpace: - if (this.indeterminate) { - this.indeterminate = false; - } - this.checked = !this.checked; + this.toggleChecked(); break; } }; @@ -70,10 +74,7 @@ export class FASTCheckbox extends FormAssociatedCheckbox { */ public clickHandler = (e: MouseEvent): void => { if (!this.disabled) { - if (this.indeterminate) { - this.indeterminate = false; - } - this.checked = !this.checked; + this.toggleChecked(); } }; } From 597c956cc6c6036353b4191c454ef0b0eaf77313 Mon Sep 17 00:00:00 2001 From: yinonov Date: Wed, 23 Nov 2022 14:01:57 +0200 Subject: [PATCH 5/5] prevent emit when disabled --- .../web-components/fast-foundation/src/checkbox/checkbox.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts index af17a62555e..c057f25fc66 100644 --- a/packages/web-components/fast-foundation/src/checkbox/checkbox.ts +++ b/packages/web-components/fast-foundation/src/checkbox/checkbox.ts @@ -62,6 +62,10 @@ export class FASTCheckbox extends FormAssociatedCheckbox { * @internal */ public keypressHandler = (e: KeyboardEvent): void => { + if (this.disabled) { + return; + } + switch (e.key) { case keySpace: this.toggleChecked();