Skip to content
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

Jump to bottom

bug(matInput): Screen Readers do not announce that an empty matInput[required] is invalid #22777

Closed
ByzantineFailure opened this issue May 24, 2021 · 1 comment · Fixed by #22802
Closed

bug(matInput): Screen Readers do not announce that an empty matInput[required] is invalid #22777

ByzantineFailure opened this issue May 24, 2021 · 1 comment · Fixed by #22802
Labels
Accessibility This issue is related to accessibility (a11y) area: material/input P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@ByzantineFailure
Copy link
Contributor

ByzantineFailure commented May 24, 2021 •
edited

Reproduction

StackBlitz: https://components-issue-pcy3uq.stackblitz.io

Steps to reproduce:

  1. Turn on a screen reader
  2. Focus the input
  3. Move focus away from the input
  4. Return focus to the input

Expected Behavior

Screen reader announces to the user that the form field is invalid.

Actual Behavior

Screen reader does not announce to the user that the form field is invalid.

Note that while the value in mat-error is announced to the user when the field is focused there is no indication that the field itself is invalid (unless the error message itself contains that).

Environment

  • Angular:^12.0.1
  • CDK/Material: ^12.0.1
  • Browser(s): Any
  • Operating System (e.g. Windows, macOS, Ubuntu): Any

Details

This issue is rooted in the fact that matInput sets aria-invalid="false" for empty inputs. This causes screen readers not to announce that a required input is invalid despite being empty.

We should update matInput to not apply aria-invalid on instances that do not have any value within the input. This may be accomplished via changing this line within the matInput directive from:

'[attr.aria-invalid]': 'errorState && !empty'

to:

'[attr.aria-invalid]': 'empty ? null : errorState'

Doing this will allow us to comply with the ARIA spec for aria-invalid (since aria-invalid isn't applied to the element until the user has entered some data) while also providing the correct announcements (since aria-required/input[required] is indicating to the screen reader that the empty field is invalid).

Testing methodology

I used this HTML document for testing ARIA attribute behavior with VoiceOver on Chrome and JAWS on Chrome:

<html>
  <body>
    <form>
      <input required/>
      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Testing with adding/removing various aria attributes on the input element showed the following behavior:

ARIA attributes value JAWS+Chrome VoiceOver+Chrome
aria-required not present, aria-invalid not present no value "Edit Required invalid entry" "required, invalid data, edit text"
aria-required not present, aria-invalid not present "value" "Edit Required, value" "value, required, edit text"
aria-required="true", aria-invalid not present no value "Edit Required, invalid entry" "required, invalid data, edit text"
aria-required="true", aria-invalid not present "value" "Edit required, value" "value, required, edit text"
aria-required="true", aria-invalid="true" no value "Edit required, invalid entry" "required, invalid data, edit text"
aria-required="true", aria-invalid="true" "value" "Edit required, invalid entry" "value, required, invalid data, edit text"
aria-required="true", aria-invalid="false" no value "Edit required, type in text" "required, edit text"
aria-required="true", aria-invalid="false" "value" "Edit required, type in text" "value, required, edit text"

While I did not test with NVDA/ChromeVox or on FF/IE/etc. I'm reasonably confident that these results will replicate across these use cases as well.
@ByzantineFailure ByzantineFailure added the needs triage This issue needs to be triaged by the team label May 24, 2021
ByzantineFailure added a commit to ByzantineFailure/components that referenced this issue May 24, 2021
@ByzantineFailure
fix(material/input): Do not set aria-invalid on empty matInputs
eef0353 
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
@ByzantineFailure ByzantineFailure mentioned this issue May 24, 2021
Closed
ByzantineFailure added a commit to ByzantineFailure/components that referenced this issue May 24, 2021
@ByzantineFailure
fix(material/input): Do not set aria-invalid on empty matInputs
0028b74 
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 added a commit to ByzantineFailure/components that referenced this issue May 24, 2021
@ByzantineFailure
fix(material/input): Do not set aria-invalid on empty matInputs
6218534 
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
ByzantineFailure added a commit to ByzantineFailure/components that referenced this issue May 26, 2021
@ByzantineFailure
fix(material/input): Do not set aria-invalid on required empty `mat…
13da794 
…Input`s

Updates the logic for setting `aria-invalid` on `matInput` to not set
the attribute at all if the input is `required` and 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
@ByzantineFailure ByzantineFailure mentioned this issue May 26, 2021
Merged
@jelbourn jelbourn added Accessibility This issue is related to accessibility (a11y) area: material/input P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels May 27, 2021
@crisbeto crisbeto added the has pr label Jun 1, 2021
ByzantineFailure added a commit to ByzantineFailure/components that referenced this issue Jun 2, 2021
@ByzantineFailure
fix(material/input): Do not set aria-invalid on required empty `mat…
9f0afd3 
…Input`s

Updates the logic for setting `aria-invalid` on `matInput` to not set
the attribute at all if the input is `required` and 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
andrewseguin pushed a commit that referenced this issue Jun 7, 2021
@ByzantineFailure
fix(material/input): Do not set aria-invalid on required empty `mat…
d185294 
…Input`s (#22802)

Updates the logic for setting `aria-invalid` on `matInput` to not set
the attribute at all if the input is `required` and 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 #22777
andrewseguin pushed a commit that referenced this issue Jun 7, 2021
@ByzantineFailure @andrewseguin
fix(material/input): Do not set aria-invalid on required empty `mat…
0bba6ea 
…Input`s (#22802)

Updates the logic for setting `aria-invalid` on `matInput` to not set
the attribute at all if the input is `required` and 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 #22777

(cherry picked from commit d185294)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 8, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Accessibility This issue is related to accessibility (a11y) area: material/input P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
3 participants
@jelbourn @crisbeto @ByzantineFailure