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

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

About this issue

Original URL
State: closed
Created a year ago
Comments: 34 (15 by maintainers)

Commits related to this issue

fix(form): shadow components using aria-labelledby do not use modern syntax (#26836) resolves #26829 — committed to ionic-team/ionic-framework by liamdebeasi a year ago

Most upvoted comments

Something like this should work:

<ion-item>
  <ion-toggle>
    <div>View mode</div>
    <ion-note>Choose how decks are presented visually when viewing or editing.</ion-note>
  </ion-toggle>
</ion-item>

Example: https://codepen.io/liamdebeasi/pen/KKxzdEQ

In this case both the “View mode” label header and the sub text (“Choose how decks…”) are associated with the control and therefore announced by screen readers.

If you have visible text most of the migration should be moving it from ion-label to being passed into the component.

liamdebeasi on Feb 21, 2023

Understood. Thank you!

lincolnthree on Feb 21, 2023

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

liamdebeasi on Feb 21, 2023