bug: shadow dom form controls opt-in to modern syntax with aria-labelledby

[lincolnthree]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• v7.x
• Nightly

Current Behavior

ion-select appears to be logging warning messages about using ion-label even when there is no such ion-label element in the DOM. In fact, even a completely unconfigured ion-select component will cause the message to be printed:

Expected Behavior

Warning & deprecation messages should only be logged when criteria for those messages are met. (Unless you've decided you want to do this for some reason, in which case I defer to your judgement.)

Steps to Reproduce

<ion-select></ion-select>

Code Reproduction URL

No response

Ionic Info

$ ionic info

Ionic:

Ionic CLI : 6.20.3 (/Users/lincoln/.nvm/versions/node/v16.14.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 7.0.0-dev.11676644846.156e8507
@angular-devkit/build-angular : 15.1.6
@angular-devkit/schematics : 15.1.6
@angular/cli : 15.1.6
@ionic/angular-toolkit : 8.0.0

Capacitor:

Capacitor CLI : 4.6.3
@capacitor/android : 4.6.3
@capacitor/core : 4.6.3
@capacitor/ios : 4.6.3

Utility:

cordova-res : not installed globally
native-run : 1.7.1

System:

NodeJS : v16.14.0 (/Users/lincoln/.nvm/versions/node/v16.14.0/bin/node)
npm : 8.3.1
OS : macOS Monterey

Additional Information

No response

[lincolnthree]

I am also seeing this occur for ion-range and ion-toggle.

[liamdebeasi]

Thanks for the report. This is the intended behavior. Components such as ion-toggle or ion-select must have an associated label for accessibility reasons. For visible text, developers can use ion-label:

<ion-item>
  <ion-label>Toggle Label</ion-label>
  <ion-toggle></ion-toggle>
</ion-item>

The new way to do visible text in Ionic 7 is to pass the text into the component itself, removing the need for ion-label:

<ion-item>
  <ion-toggle>Toggle Label</ion-toggle>
</ion-item>

However, some components may not have visible text. In this case, developers need to use aria-label to provide context to screen readers:

<ion-item>
  <ion-toggle aria-label="Toggle Label without visible text"></ion-toggle>
</ion-item>

Your code sample uses neither visible text nor an aria label, so we cannot safely assume you are using the modern rendering syntax. Providing either visible text in the component or an aria-label should dismiss the warning. Developers who are opted-in to the modern syntax and wish to use the legacy syntax can set legacy="true" on the component.

[lincolnthree]

Ah thank you. I misread the warning. I got confused by the part about ion-label and totally glossed over the case where label is required. Might I propose re-wording this a bit to prevent similar confusion in the future? Or making the warning more specific for the specific deprecation issue that's been encountered?

General rewording:

[Ionic Warning]: ion-select now requires either a set [label] attribute, or a set 'aria-label' attribute for compatibility with screen readers. Use of ion-label has been deprecated and will stop working in Ionic v8. To migrate, remove any attached ion-label component, and ensure the appropriate "label" or "aria-label" property is set on ion-select instead.

Example: <ion-select label="Favorite Color">...</ion-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". 

[lincolnthree]

Additionally, it appears that [interfaceOptions]={ header: 'My header' } does not satisfy this constraint. Should it?

[liamdebeasi]

No, because header is passed to the overlay component (alert, popover) and not set on ion-select itself. I can update the deprecation message.

[lincolnthree]

Understood. Thank you!

[liamdebeasi]

I added a PR in #26834 to clarify the deprecation messages.