fix(material/input): only set as aria-invalid if the input isn't empty

[crisbeto]

Only sets aria-invalid on a MatInput if it is invalid and it has a value, otherwise it'll likely overlap with aria-required and cause more noise for users. Furthermore, it may be confusing if the user lands on an input that they haven't interacted with, but it's already invalid.

Fixes #18140.

[jelbourn]

cc @zelliott

[jelbourn]

Just to clarify- will errorState be true when the control is touched (not pristine)?

[crisbeto]

The errorState is set based on the ErrorStateMatcher. The default one will be true if the input is invalid and touched or the form has been submitted.

[zelliott]

From #18140:

An input field that is required should be marked as required in the HTML (which it is), but should not be marked as aria-invalid until the user enters an invalid value.

Sounds alright to me. I took a look at WCAG for any guidance (here's the relevant technique: https://www.w3.org/WAI/WCAG21/Techniques/aria/ARIA21) and stumbled upon two different examples:

• WCAG Example 1: Applies aria-invalid on form submission for required fields. Does not apply aria-required.
• WCAG Example 2: Only applies aria-invalid on form submission if the required fields fail validation in some other way. Does not apply aria-invalid for empty fields that are required. Also does not apply aria-required.

The second example shows that there is WCAG precedent for omitting aria-invalid on required, empty fields, so this LGTM.

[jelbourn]

LGTM

[wagnermaciel]

@crisbeto or @jelbourn We have some internal tests that check this exact behavior. E.g.

    it('displays an error when input is empty', () => {
        setInputValue(input, '');
        expect(input.getAttribute('aria-invalid')).toBe('true');
     });

Is it ok to delete these tests entirely or should we change how they're checking the inputs' error state?

[jelbourn]

@wagnermaciel the test should ideally be updated to reflect the new behavior

[wagnermaciel]

@jelbourn What is the new correct way to check an inputs error state?

[jelbourn]

Probably updating the test to not have aria-invalid and instead checking the error state of the form

[angular-automatic-lock-bot]

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.}