Merge branch 'ROU-11112-checkbox' into ROU-11112

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<void>;
@@ -5452,7 +5452,7 @@ declare namespace LocalJSX {
          */
         "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => 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;
         /**

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);

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: `
+        <ion-checkbox required="true">Checkbox</ion-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: `
+        <ion-checkbox required="false">Checkbox</ion-checkbox>
+      `,
+    });
+
+    const checkbox = page.body.querySelector('ion-checkbox')!;
+    const nativeInput = checkbox.shadowRoot?.querySelector('input[type=checkbox]')!;
+
+    expect(nativeInput.hasAttribute('required')).toBeFalsy();
+  });
+});

packages/vue/src/proxies.ts

@@ -243,10 +243,6 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
   'ionChange',
   'ionFocus',
   'ionBlur'
-], [
-  'ionChange',
-  'ionFocus',
-  'ionBlur'
 ],
 'checked', 'ion-change');