diff --git a/core/src/components.d.ts b/core/src/components.d.ts index c1e5731aa0..232a4a9041 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3293,7 +3293,7 @@ export namespace Components { */ "name": string; /** - * If `true`, the user must fill in a value before submitting a form. + * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. */ "required": boolean; /** @@ -8184,7 +8184,7 @@ declare namespace LocalJSX { */ "onIonFocus"?: (event: IonToggleCustomEvent) => void; /** - * If `true`, the user must fill in a value before submitting a form. + * If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. */ "required"?: boolean; /** diff --git a/core/src/components/toggle/test/toggle.spec.ts b/core/src/components/toggle/test/toggle.spec.ts index ec5c4f2965..8ba55eb70b 100644 --- a/core/src/components/toggle/test/toggle.spec.ts +++ b/core/src/components/toggle/test/toggle.spec.ts @@ -75,3 +75,33 @@ describe('ion-toggle: disabled', () => { expect(toggle.checked).toBe(false); }); }); + +describe('ion-toggle: required', () => { + it('should have a required attribute in inner input when true', async () => { + const page = await newSpecPage({ + components: [Toggle], + html: ` + Toggle + `, + }); + + const toggle = page.body.querySelector('ion-toggle')!; + const nativeInput = toggle.shadowRoot?.querySelector('input[role=switch]')!; + + expect(nativeInput.hasAttribute('required')).toBeTruthy(); + }); + + it('should not have a required attribute in inner input when false', async () => { + const page = await newSpecPage({ + components: [Toggle], + html: ` + Toggle + `, + }); + + const toggle = page.body.querySelector('ion-toggle')!; + const nativeInput = toggle.shadowRoot?.querySelector('input[role=switch]')!; + + expect(nativeInput.hasAttribute('required')).toBeFalsy(); + }); +}); diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index 2bfbd08496..7fbc7183f8 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -109,7 +109,9 @@ export class Toggle implements ComponentInterface { @Prop() alignment?: 'start' | 'center'; /** - * If `true`, the user must fill in a value before submitting a form. + * If true, screen readers will announce it as a required field. This property + * works only for accessibility purposes, it will not prevent the form from + * submitting if the value is invalid. */ @Prop() required = false; @@ -295,7 +297,8 @@ export class Toggle implements ComponentInterface { } render() { - const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = this; + const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment, required } = + this; const mode = getIonMode(this); const value = this.getValue(); diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 998695e5c6..a1ec95d10e 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -1027,10 +1027,6 @@ export const IonToggle = /*@__PURE__*/ defineContainer