Skip to content

feat(toggle): add helperText and errorText properties #30161

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.

Sign up for GitHub

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

Merged
merged 15 commits into from
Mar 10, 2025
Merged

feat(toggle): add helperText and errorText properties #30161

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
d1260b2
feat(toggle): add helper and error text properties and design
brandyscarney Jan 28, 2025
bc8eb22
test(toggle): add e2e tests for bottom content
brandyscarney Jan 28, 2025
78c7e6c
chore(): add updated snapshots
brandyscarney Jan 28, 2025
a1b6e8c
test(toggle): add e2e test and screenshots for end placement
brandyscarney Jan 28, 2025
4242757
style: typo
brandyscarney Jan 28, 2025
5eb665e
docs: helper and error text description
brandyscarney Jan 29, 2025
fa65cfb
fix(toggle): reduce padding to match md guidelines
brandyscarney Jan 29, 2025
a3a8f2c
Merge branch 'feature-8.5' into ROU-11552
brandyscarney Jan 29, 2025
db0c7c0
Merge branch 'feature-8.5' into ROU-11552
brandyscarney Feb 19, 2025
ed79f9e
fix(toggle): do not announce helper text twice
brandyscarney Feb 21, 2025
b24090b
Merge branch 'feature-8.5' into ROU-11552
brandyscarney Mar 5, 2025
2200f27
fix(angular): add missing props
brandyscarney Mar 5, 2025
89d7fc2
Merge branch 'feature-8.5' into ROU-11552
thetaPC Mar 10, 2025
b601059
Merge branch 'feature-8.5' into ROU-11552
brandyscarney Mar 10, 2025
826084f
Merge branch 'feature-8.5' into ROU-11552
brandyscarney Mar 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix(toggle): do not announce helper text twice
  • Loading branch information
@brandyscarney
brandyscarney committed Feb 21, 2025
commit ed79f9eb490b9de253ec13c16e3d1b41d75269dd
32 changes: 17 additions & 15 deletions core/src/components/toggle/test/bottom-content/toggle.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,13 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await expect(helperText).toHaveText('Helper text');
await expect(errorText).toBeHidden();
});
test('input should have an aria-describedby attribute when helper text is present', async ({ page }) => {
test('toggle should have an aria-describedby attribute when helper text is present', async ({ page }) => {
await page.setContent(`<ion-toggle helper-text="Helper text" error-text="Error text">Label</ion-toggle>`, config);

const input = page.locator('ion-toggle input[type=checkbox]');
const toggle = page.locator('ion-toggle');
const helperText = page.locator('ion-toggle .helper-text');
const helperTextId = await helperText.getAttribute('id');
const ariaDescribedBy = await input.getAttribute('aria-describedby');
const ariaDescribedBy = await toggle.getAttribute('aria-describedby');

expect(ariaDescribedBy).toBe(helperTextId);
});
Expand All @@ -44,42 +44,44 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
await expect(errorText).toHaveText('Error text');
});

test('input should have an aria-describedby attribute when error text is present', async ({ page }) => {
test('toggle should have an aria-describedby attribute when error text is present', async ({ page }) => {
await page.setContent(
`<ion-toggle class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-toggle>`,
config
);

const input = page.locator('ion-toggle input[type=checkbox]');
const toggle = page.locator('ion-toggle');
const errorText = page.locator('ion-toggle .error-text');
const errorTextId = await errorText.getAttribute('id');
const ariaDescribedBy = await input.getAttribute('aria-describedby');
const ariaDescribedBy = await toggle.getAttribute('aria-describedby');

expect(ariaDescribedBy).toBe(errorTextId);
});
test('input should have aria-invalid attribute when toggle is invalid', async ({ page }) => {
test('toggle should have aria-invalid attribute when toggle is invalid', async ({ page }) => {
await page.setContent(
`<ion-toggle class="ion-invalid ion-touched" helper-text="Helper text" error-text="Error text">Label</ion-toggle>`,
config
);

const input = page.locator('ion-toggle input[type=checkbox]');
const toggle = page.locator('ion-toggle');

await expect(input).toHaveAttribute('aria-invalid');
await expect(toggle).toHaveAttribute('aria-invalid');
});
test('input should not have aria-invalid attribute when toggle is valid', async ({ page }) => {
test('toggle should not have aria-invalid attribute when toggle is valid', async ({ page }) => {
await page.setContent(`<ion-toggle helper-text="Helper text" error-text="Error text">Label</ion-toggle>`, config);

const input = page.locator('ion-toggle input[type=checkbox]');
const toggle = page.locator('ion-toggle');

await expect(input).not.toHaveAttribute('aria-invalid');
await expect(toggle).not.toHaveAttribute('aria-invalid');
});
test('input should not have aria-describedby attribute when no hint or error text is present', async ({ page }) => {
test('toggle should not have aria-describedby attribute when no hint or error text is present', async ({
page,
}) => {
await page.setContent(`<ion-toggle>Label</ion-toggle>`, config);

const input = page.locator('ion-toggle input[type=checkbox]');
const toggle = page.locator('ion-toggle');

await expect(input).not.toHaveAttribute('aria-describedby');
await expect(toggle).not.toHaveAttribute('aria-describedby');
});
});
});
Expand Down
4 changes: 2 additions & 2 deletions core/src/components/toggle/toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,6 +364,8 @@ export class Toggle implements ComponentInterface {

return (
<Host
aria-describedby={this.getHintTextID()}
aria-invalid={this.getHintTextID() === this.errorTextId}
onClick={this.onClick}
class={createColorClasses(color, {
[mode]: true,
Expand Down Expand Up @@ -392,8 +394,6 @@ export class Toggle implements ComponentInterface {
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
ref={(focusEl) => (this.focusEl = focusEl)}
aria-describedby={this.getHintTextID()}
aria-invalid={this.getHintTextID() === this.errorTextId}
required={required}
{...this.inheritedAttributes}
/>
Expand Down
Loading