-
Notifications
You must be signed in to change notification settings - Fork 13.5k
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
feat(toggle): add helperText and errorText properties #30161
base: feature-8.5
Are you sure you want to change the base?
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The supporting text being read twice is the main issue.
The rest are just questions that were asked over in the checkbox PR that can be applied here.
@@ -337,6 +396,7 @@ export class Toggle implements ComponentInterface { | |||
part="label" | |||
> | |||
<slot></slot> | |||
{this.renderHintText()} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The text (helper or error) is being read twice by VoiceOver on Safari, Firefox, and Chrome. After some quick debugging, it seems that this happening because the text is inside of label. ion-input has it after the which mimics how the native input states it.
Screen.Recording.2025-01-30.at.4.30.15.PM.mov
configs({ modes: ['ios', 'md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { | ||
test.describe(title('toggle: helper text rendering'), () => { | ||
// Check the default label placement, end, and stacked | ||
[undefined, 'end', 'stacked'].forEach((labelPlacement) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What was the reasoning for not checking fixed
?
}); | ||
}); | ||
|
||
test.describe(title('toggle: error text rendering'), () => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why does error text not get a check for the end or fixed placement?
Issue number: N/A
What is the current behavior?
Toggle does not support helper and error text.
What is the new behavior?
Adds support for helper and error text, similar to input and textarea.
Does this introduce a breaking change?
Other information