-
Notifications
You must be signed in to change notification settings - Fork 13.5k
bug: shadow dom form controls opt-in to modern syntax with aria-labelledby #26829
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Comments
I am also seeing this occur for |
Thanks for the report. This is the intended behavior. Components such as <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-item>
<ion-toggle>Toggle Label</ion-toggle>
</ion-item> However, some components may not have visible text. In this case, developers need to use <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 |
Ah thank you. I misread the warning. I got confused by the part about General rewording:
|
Additionally, it appears that |
No, because |
Understood. Thank you! |
I added a PR in #26834 to clarify the deprecation messages. |
Thanks, Liam. I've tried using a few of these options, but ' Is this expected or am I just completely confused?
Repro: Essentially, unless I'm confused, the current state means that custom |
I'll update our internal logic to not opt-in to the modern syntax in this scenario, but you'll still want to remove the |
Can you describe what is broken here? |
Yeah, in the second 'broken' example, the |
Ah thanks. We updated the min-heights of
You can account for this by modifying |
Good to know, thanks. But why should applying the |
Using So providing a label (either by visible text or an aria-label) will opt you into the new syntax. We provided an escape hatch using https://ionicframework.com/docs/v7/api/input#migrating-from-legacy-input-syntax has more information on this. |
Hmm. I have to assume using Thanks for the info. I think I still consider it to be a bug or usability hazard at best -- styles changing when specifying an attribute that is supposed to only impact IMO. Overriding / extending the I'd expect using either of the I'll work on compensating for this in our CSS I guess :) |
Okay, so following that and we don't use If the Now, this becomes problematic because once we do specify an |
That's correct. It is a temporary escape hatch for when a) you are not ready to migrate to the modern syntax and b) our heuristic incorrectly opts you in to the new syntax. edit: We will also add a console warning to let developers know that
This is why the
We removed the We realize that the heuristic isn't going to get it right 100% of the time, but the alternative is to have devs manually opt in to the new syntax with |
I totally agree. I haven't found an incantation that works quite yet, but I think I'm getting closer. Thanks for listening, for your patience & time. |
Oh another thing to note is the https://ionicframework.com/docs/v7/api/select#label-placement Justify replaces using an |
Out of curiosity, (and this might help provide some context) do you have a recommended pattern / example for using complex labels like this without using "Legacy" mode? Or is this something that's not really "intended"? Since |
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 |
Though for |
Very interesting. Thank you. This really is a big change. I presume the same would work for It looks like I'll create a feature request for |
Yes, the same works for checkbox. Checkbox, Radio, and Select have a default slot to pass in the label. Range only has a named slot (the |
Why not send the Also, I didn't think Shadow DOM was required for slotting? I have plenty of components that don't use Shadow DOM that supports this via |
We could, but it increase the boilerplate for certain components. So instead of Though we have discussed allowing for the Web Component slots is a Shadow DOM-only feature. Stencil lets you use slots in scoped components, but it's a bit buggy. |
RE: Web component slots/shadow dom. Gotcha. For the rest, I may have been vague. Sorry. I was trying to ask why not send all nested content to the label slot by default, since that seems to be what happens for components that don't use the Shadow DOM?:
Where all of that gets put into the E.g. Why isn't this how |
Oh, I guess with So I guess this could work for |
Opened an issue to support |
Yeah it's a bit tricky with the slot naming. I think we'd do Thanks for filing an issue! I'll take a look at that. |
Yeah, this is where I ended up as well. I also think all You're welcome! Let me know if I can do anything else to assist. Excited for V7. It solves a lot of problems we've been having with |
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Uh oh!
There was an error while loading. Please reload this page.
Prerequisites
Ionic Framework Version
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
The text was updated successfully, but these errors were encountered: