Skip to content

fix(input): improve error text accessibility #30635

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 19 commits into from
Sep 4, 2025
Merged

fix(input): improve error text accessibility #30635

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
ec83531
fix(input): add aria-live attributes to error text
ShaneK Aug 14, 2025
e358cab
Merge branch 'main' of github.com:ionic-team/ionic-framework into ion…
ShaneK Aug 19, 2025
a7295b4
fix(input): making validation reading work more consistently across b…
ShaneK Aug 19, 2025
fc05815
fix(lint): fixing lint in test files
ShaneK Aug 19, 2025
f1bb778
Merge branch 'main' of github.com:ionic-team/ionic-framework into ion…
ShaneK Aug 21, 2025
9ebada9
App validation tests
ShaneK Aug 21, 2025
1baf39e
fix(input): improve validation state reactivity
ShaneK Aug 21, 2025
5760856
fix(input): fixing input validation accessibility for template-driven…
ShaneK Aug 21, 2025
85b8cbf
fix(input): cleanup on input validation
ShaneK Aug 26, 2025
1d0c191
fix(cleanup): removing file
ShaneK Aug 26, 2025
65dd166
Restoring tests
ShaneK Aug 26, 2025
a9ff301
Merge branch 'main' of github.com:ionic-team/ionic-framework into ion…
ShaneK Sep 2, 2025
65867ce
refactor(input): removing debug code
ShaneK Sep 2, 2025
df8fa7d
refactor(input): removing angular-specific code from core
ShaneK Sep 2, 2025
0180454
fix(lint): fixing lint in core
ShaneK Sep 2, 2025
7fc8cbc
Update packages/angular/test/base/src/app/standalone/validation/input…
ShaneK Sep 3, 2025
2db2b1f
Update core/src/components/input/test/validation/index.html
ShaneK Sep 3, 2025
7926f08
Update core/src/components/textarea/test/validation/index.html
ShaneK Sep 3, 2025
1493bf7
refactor(tests, input): doing cleanup across input and tests
ShaneK Sep 4, 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(input): cleanup on input validation
  • Loading branch information
@ShaneK
ShaneK committed Aug 26, 2025
commit 85b8cbf2f49cc13cf0d2bb18b9f1519c504c3f76
26 changes: 8 additions & 18 deletions core/src/components/input/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -413,11 +413,11 @@ export class Input implements ComponentInterface {
const hasIonInvalid = this.el.classList.contains('ion-invalid');
const hasNgTouched = this.el.classList.contains('ng-touched');
const hasNgInvalid = this.el.classList.contains('ng-invalid');

// Return true if we have both touched and invalid states from either framework
const isTouched = hasIonTouched || hasNgTouched;
const isInvalid = hasIonInvalid || hasNgInvalid;

return isTouched && isInvalid;
}

Expand Down Expand Up @@ -694,22 +694,12 @@ export class Input implements ComponentInterface {
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;

return [
helperText && !isInvalid && (
<div id={helperTextId} class="helper-text" aria-live="polite">
{helperText}
</div>
),
errorText && isInvalid && (
<div
id={errorTextId}
class="error-text"
aria-live="assertive"
aria-atomic="true"
role="alert"
>
{errorText}
</div>
),
<div id={helperTextId} class="helper-text" aria-live="polite">
{!isInvalid ? helperText : null}
</div>,
<div id={errorTextId} class="error-text" role="alert">
{isInvalid ? errorText : null}
</div>,
];
}

Expand Down
26 changes: 8 additions & 18 deletions core/src/components/textarea/textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,11 +345,11 @@ export class Textarea implements ComponentInterface {
const hasIonInvalid = this.el.classList.contains('ion-invalid');
const hasNgTouched = this.el.classList.contains('ng-touched');
const hasNgInvalid = this.el.classList.contains('ng-invalid');

// Return true if we have both touched and invalid states from either framework
const isTouched = hasIonTouched || hasNgTouched;
const isInvalid = hasIonInvalid || hasNgInvalid;

return isTouched && isInvalid;
}

Expand Down Expand Up @@ -697,22 +697,12 @@ export class Textarea implements ComponentInterface {
const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;

return [
helperText && !isInvalid && (
<div id={helperTextId} class="helper-text" aria-live="polite">
{helperText}
</div>
),
errorText && isInvalid && (
<div
id={errorTextId}
class="error-text"
aria-live="assertive"
aria-atomic="true"
role="alert"
>
{errorText}
</div>
),
<div id={helperTextId} class="helper-text" aria-live="polite">
{!isInvalid ? helperText : null}
</div>,
<div id={errorTextId} class="error-text" role="alert">
{isInvalid ? errorText : null}
</div>,
];
}

Expand Down
Loading