diff --git a/core/src/components.d.ts b/core/src/components.d.ts index b14412d561..c1e5731aa0 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -644,7 +644,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; "setFocus": () => Promise; @@ -5452,7 +5452,7 @@ declare namespace LocalJSX { */ "onIonFocus"?: (event: IonCheckboxCustomEvent) => 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/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index e9771e4f28..2e05e366f7 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -99,7 +99,9 @@ export class Checkbox 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; @@ -187,7 +189,7 @@ export class Checkbox implements ComponentInterface { name, value, alignment, - required + required, } = this; const mode = getIonMode(this); const path = getSVGPath(mode, indeterminate); diff --git a/core/src/components/checkbox/test/checkbox.spec.ts b/core/src/components/checkbox/test/checkbox.spec.ts index e27f0e2a50..e390d4d1b2 100644 --- a/core/src/components/checkbox/test/checkbox.spec.ts +++ b/core/src/components/checkbox/test/checkbox.spec.ts @@ -54,3 +54,33 @@ describe('ion-checkbox: indeterminate', () => { expect(checkbox.getAttribute('aria-checked')).toBe('mixed'); }); }); + +describe('ion-checkbox: required', () => { + it('should have a required attribute in inner input when true', async () => { + const page = await newSpecPage({ + components: [Checkbox], + html: ` + Checkbox + `, + }); + + const checkbox = page.body.querySelector('ion-checkbox')!; + const nativeInput = checkbox.shadowRoot?.querySelector('input[type=checkbox]')!; + + expect(nativeInput.hasAttribute('required')).toBeTruthy(); + }); + + it('should not have a required attribute in inner input when false', async () => { + const page = await newSpecPage({ + components: [Checkbox], + html: ` + Checkbox + `, + }); + + const checkbox = page.body.querySelector('ion-checkbox')!; + const nativeInput = checkbox.shadowRoot?.querySelector('input[type=checkbox]')!; + + expect(nativeInput.hasAttribute('required')).toBeFalsy(); + }); +}); diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 4ddd5487b1..998695e5c6 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -243,10 +243,6 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer