Merge branch 'ROU-11112-toggle' into ROU-11112

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

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

packages/vue/src/proxies.ts

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