fix(many): legacy form control does not warn when using aria-labelledby (#26699)

resolves #26698

core/src/components/checkbox/checkbox.tsx

@@ -280,7 +280,10 @@ export class Checkbox implements ComponentInterface {
       printIonWarning(
         `Using ion-checkbox with an ion-label has been deprecated. To migrate, remove the ion-label and pass your label directly into ion-checkbox instead.
 Example: <ion-checkbox>Label</ion-checkbox>
-For checkboxes that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the checkbox.`,
+
+For checkboxes that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the checkbox.
+
+For checkboxes that do not render the label immediately next to the checkbox, developers may continue to use "ion-label" but must manually associate the label with the checkbox by using "aria-labelledby".`,
         this.el
       );
 

core/src/components/input/input.tsx

@@ -726,7 +726,9 @@ export class Input implements ComponentInterface {
 
 Example: <ion-input label="Email"></ion-input>
 
-For inputs that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the input.`,
+For inputs that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the input.
+
+For inputs that do not render the label immediately next to the input, developers may continue to use "ion-label" but must manually associate the label with the input by using "aria-labelledby".`,
         this.el
       );
 

core/src/components/radio/radio.tsx

@@ -261,7 +261,10 @@ export class Radio implements ComponentInterface {
       printIonWarning(
         `Using ion-radio with an ion-label has been deprecated. To migrate, remove the ion-label and pass your label directly into ion-radio instead.
 Example: <ion-radio>Option Label:</ion-radio>
-For radios that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the radio.`,
+
+For radios that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the radio.
+
+For radios that do not render the label immediately next to the radio, developers may continue to use "ion-label" but must manually associate the label with the radio by using "aria-labelledby".`,
         this.el
       );
 

core/src/components/range/range.tsx

@@ -560,7 +560,9 @@ export class Range implements ComponentInterface {
 
 Example: <ion-range>Volume:</ion-toggle>
 
-For ranges that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the range.`,
+For ranges that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the range.
+
+For ranges that do not render the label immediately next to the range, developers may continue to use "ion-label" but must manually associate the label with the range by using "aria-labelledby".`,
         this.el
       );
 

core/src/components/select/select.tsx

@@ -785,8 +785,9 @@ export class Select implements ComponentInterface {
 
 Example: <ion-select label="Favorite Color">...</ion-select>
 
-For inputs that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the select.
-  `,
+For selects that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the select.
+
+For selects that do not render the label immediately next to the select, developers may continue to use "ion-label" but must manually associate the label with the select by using "aria-labelledby".`,
         this.el
       );
 

core/src/components/toggle/toggle.tsx

@@ -352,7 +352,9 @@ export class Toggle implements ComponentInterface {
 
 Example: <ion-toggle>Email:</ion-toggle>
 
-For toggles that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the toggle.`,
+For toggles that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the toggle.
+
+For toggles that do not render the label immediately next to the toggle, developers may continue to use "ion-label" but must manually associate the label with the toggle by using "aria-labelledby".`,
         this.el
       );
 

core/src/utils/forms/form-controller.ts

@@ -20,7 +20,7 @@ export const createLegacyFormController = (el: HTMLLegacyFormControlElement): Le
    * in the light DOM.
    */
   const hasLabelProp = (controlEl as any).label !== undefined || hasLabelSlot(controlEl);
-  const hasAriaLabelAttribute = controlEl.hasAttribute('aria-label');
+  const hasAriaLabelAttribute = controlEl.hasAttribute('aria-label') || controlEl.hasAttribute('aria-labelledby');
 
   /**
    * Developers can manually opt-out of the modern form markup

core/src/utils/test/aria.spec.ts

@@ -31,7 +31,7 @@ describe('getAriaLabel()', () => {
       components: [Toggle],
       html: `
         <div id="my-label">Hello World</div>
-        <ion-toggle aria-labelledby="my-label"></ion-toggle>
+        <ion-toggle legacy="true" aria-labelledby="my-label"></ion-toggle>
       `,
     });
 
@@ -49,7 +49,7 @@ describe('getAriaLabel()', () => {
       components: [Toggle],
       html: `
         <div id="id.1">Hello World</div>
-        <ion-toggle aria-labelledby="id.1"></ion-toggle>
+        <ion-toggle legacy="true" aria-labelledby="id.1"></ion-toggle>
       `,
     });
 
@@ -66,7 +66,7 @@ describe('getAriaLabel()', () => {
       components: [Toggle],
       html: `
         <label id="my-id" for="id.1">Hello World</label>
-        <ion-toggle id="id.1"></ion-toggle>
+        <ion-toggle legacy="true" id="id.1"></ion-toggle>
       `,
     });
 
@@ -83,7 +83,7 @@ describe('getAriaLabel()', () => {
       components: [Toggle],
       html: `
         <label for="id.1">Hello World</label>
-        <ion-toggle id="id.1"></ion-toggle>
+        <ion-toggle legacy="true" id="id.1"></ion-toggle>
       `,
     });