diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index 9cb1270b13..346a7adac8 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/core/src/components/checkbox/checkbox.tsx @@ -283,12 +283,10 @@ export class Checkbox implements ComponentInterface { private renderLegacyCheckbox() { if (!this.hasLoggedDeprecationWarning) { 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. + `ion-checkbox now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute. + Example: Label - -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". +Example with aria-label: Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el diff --git a/core/src/components/input/input.tsx b/core/src/components/input/input.tsx index a33246def8..14321d23c0 100644 --- a/core/src/components/input/input.tsx +++ b/core/src/components/input/input.tsx @@ -719,13 +719,14 @@ export class Input implements ComponentInterface { private renderLegacyInput() { if (!this.hasLoggedDeprecationWarning) { printIonWarning( - `Using ion-input with an ion-label has been deprecated. To migrate, remove the ion-label and use the "label" property on ion-input instead. + `ion-input now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute. Example: +Example with aria-label: -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". -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".`, +Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el ); diff --git a/core/src/components/radio/radio.tsx b/core/src/components/radio/radio.tsx index a8c1878ee5..3de5f61891 100644 --- a/core/src/components/radio/radio.tsx +++ b/core/src/components/radio/radio.tsx @@ -263,12 +263,12 @@ export class Radio implements ComponentInterface { private renderLegacyRadio() { if (!this.hasLoggedDeprecationWarning) { 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: Option Label: + `ion-radio now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute. -For radios that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the radio. +Example: Option Label +Example with aria-label: -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".`, +Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el ); diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index bb58625fac..b141ddfbd8 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -553,13 +553,12 @@ export class Range implements ComponentInterface { private renderLegacyRange() { if (!this.hasLoggedDeprecationWarning) { printIonWarning( - `Using ion-range with an ion-label has been deprecated. To migrate, remove the ion-label and pass your label directly into ion-range instead. + `ion-range now requires providing a label with either the label slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute. -Example:
Volume:
+Example:
Volume
+Example with aria-label: -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".`, +Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el ); diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 7e2056ad25..ce1af021f9 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -779,13 +779,12 @@ export class Select implements ComponentInterface { private renderLegacySelect() { if (!this.hasLoggedDeprecationWarning) { printIonWarning( - `Using ion-select with an ion-label has been deprecated. To migrate, remove the ion-label and use the "label" property on ion-select instead. + `ion-select now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute. Example: ... +Example with aria-label: ... -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".`, +Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el ); diff --git a/core/src/components/textarea/textarea.tsx b/core/src/components/textarea/textarea.tsx index 178b8f92d3..725968cf29 100644 --- a/core/src/components/textarea/textarea.tsx +++ b/core/src/components/textarea/textarea.tsx @@ -465,8 +465,14 @@ export class Textarea implements ComponentInterface { private renderLegacyTextarea() { if (!this.hasLoggedDeprecationWarning) { printIonWarning( - `Using ion-textarea with an ion-label has been deprecated. To migrate, remove the ion-label and use the "label" property on ion-textarea instead. -For textareas that do not have a visible label, developers should use "aria-label" so screen readers can announce the purpose of the textarea.`, + `ion-textarea now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute. + +Example: +Example with aria-label: + +For textareas 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 textarea by using "aria-labelledby". + +Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el ); this.hasLoggedDeprecationWarning = true; diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index 09950d3cd6..d1bdfa25e8 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -350,13 +350,12 @@ export class Toggle implements ComponentInterface { private renderLegacyToggle() { if (!this.hasLoggedDeprecationWarning) { printIonWarning( - `Using ion-toggle with an ion-label has been deprecated. To migrate, remove the ion-label and pass your label directly into ion-toggle instead. + `ion-toggle now requires providing a label with either the default slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute. -Example: Email: +Example: Email +Example with aria-label: -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".`, +Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, this.el );