fix(material/input): Do not set aria-invalid on empty matInputs
#22779
Conversation
google-cla
bot
added
the
cla: yes
mmalerba
added
G
|
It looks like there's a lint failure because we need to add the same logic/test for the MDC-based input |
src/material/input/input.ts
Outdated
| @@ -83,7 +83,7 @@ const _MatInputBase = mixinErrorState(class { | |||
| '[attr.readonly]': 'readonly && !_isNativeSelect || null', | |||
| // Only mark the input as invalid for assistive technology if it has a value since the | |||
| // state usually overlaps with `aria-required` when the input is empty and can be redundant. | |||
| '[attr.aria-invalid]': 'errorState && !empty', | |||
| '[attr.aria-invalid]': 'empty ? null : errorState', | |||
There was a problem hiding this comment.
While we're here, is it slightly more correct to change this to '(empty && required) ? null : errorState'? I'm thinking of an edge case where an input is empty, but not required, but still in an error state (maybe because there's validation that looks for duplicates and there's already an empty input). If so, we'd want to update the comment above as well.
There was a problem hiding this comment.
This behavior is intentional, see #21609. There's also a linked issue.
There was a problem hiding this comment.
Yep! The reason #21609 was requested was because without it aria-invalid was being applied to aria-required inputs with no value. This violates the ARIA spec (see here : https://www.w3.org/TR/wai-aria/#aria-invalid ) and caused #18140 to be filed.
Unfortunately, setting aria-invalid="false" on these inputs suppresses any native indication to a screen reader user that the input is in an invalid state. The only information they receive is the error message itself. If worded correctly the error message can be enough (e.g. if it includes "Invalid" in the text) but this requires component users to be aware of this fact and actively account for it.
Without a well-worded error message, this results in a different experience for SR users than visual users -- the input is flagged as invalid and displayed prominently to visual users as invalid, but screen reader users get no native notification at all when they focus the input.
I think @zelliott might have a good point here that we may wish to do (empty && required) rather than simply empty for our null state.
src/material/input/input.ts
Outdated
| @@ -83,7 +83,7 @@ const _MatInputBase = mixinErrorState(class { | |||
| '[attr.readonly]': 'readonly && !_isNativeSelect || null', | |||
| // Only mark the input as invalid for assistive technology if it has a value since the | |||
| // state usually overlaps with `aria-required` when the input is empty and can be redundant. | |||
| '[attr.aria-invalid]': 'errorState && !empty', | |||
| '[attr.aria-invalid]': 'empty ? null : errorState', | |||
There was a problem hiding this comment.
This behavior is intentional, see #21609. There's also a linked issue.
Updates the logic for setting `aria-invalid` on `matInput` to not set the value at all if the input has no value. Prior to this PR `matInput` sets `aria-invalid="false"` for any empty `matInput`, including `required` ones. This suppresses screen readers' announcement to users that such inputs are in an invalid state. Fixes angular#22777 Add MDC implementation. Whoops.
ByzantineFailure
force-pushed
the
byzantinefailure/matInput-aria-required
branch
from
f72ebd5 to
6218534
Compare
Remove some superfluous diffs in input spec files Additional diff cleanup Resolve linter errors
ByzantineFailure
force-pushed
the
byzantinefailure/matInput-aria-required
branch
from
db3d8db to
0cdf884
Compare
|
All right, it has been a minute since I've properly used git and I accidentally closed this branch when rebasing it to squash it down to one commit. I'll... be right with you. |
|
I'mma just close and re-open this with the correctly-named branch. Apologies, folks. |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Updates the logic for setting
aria-invalidonmatInputto not setthe value at all if the input has no value.
Prior to this PR
matInputsetsaria-invalid="false"for any emptymatInput, includingrequiredones. This suppresses screen readers'announcement to users that such inputs are in an invalid state.
Fixes #22777