2842 Adds alert role so error will be announced by screen reader

[davezuckerman]

Adds alert role to _form_messages for screen readers

Related Ticket (JIRA or GitHub Issue)

[ANW-2842][ANW-2843][ANW-2870]

Summary

Fixes issue with error and warning message not being announced to screen readers

Screenshots (if appropriate):

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change, for example API endpoint renaming)
• My change requires a change to the documentation - If so elaborate:

Checklist:

• I have read and agree to the CONTRIBUTING document.
• I have authority to submit this code. - See our licensing
• Have you added tests to cover these changes? If not why:

[awilfox]

r+wc - we need to discuss adding the role to the warning container as well.

I have been looking high and low for any normative reference that I could give for this, since I know it's a common pattern and I know that it's something most do, but I couldn't find any. The only reference I could find to using role="alert" on warning conditions in addition to errors is on the Alert Example in the ARIA Authoring Practices Guide.

[davezuckerman]

Since the changes were very similar I rolled [ANW-2843][ANW-2870] into this merge request

[anarchivist]

@awilfox 💬

I have been looking high and low for any normative reference that I could give for this, since I know it's a common pattern and I know that it's something most do, but I couldn't find any. The only reference I could find to using role="alert" on warning conditions in addition to errors is on the Alert Example in the ARIA Authoring Practices Guide.

as i understand it, things like ARIA patterns you've cited or WCAG techniques (e.g. (Using ARIA role=alert or Live Regions to Identify Errors) are not normative, as it's the success criteria that define the normative behavior (in this case, §3.3.1 and §4.1.3 are normative.)

[anarchivist]

r+.

[awilfox]

r+wc Looks good, except for the note I left in the log in form.

[awilfox]

Would this need that role as well?

And … why does this have a full stop while the other doesn't? Is there a way both could be displayed at the same time?

Is this why the login form looks so weird when I log in?

I don't see anywhere in the tickets where the log in form was noted as failing any accessibility criteria, but the behaviour does feel very surprising. And I don't know how assistive technologies would interpret it.

For an example of what I'm talking about, just log in with an invalid password and then log in with the correct one. You get a red "invalid credentials" and a green "login successful" message.

[davezuckerman]

That would probably just need role='status' correct?

The selector and element source identify the login error message specifically.

I see what you mean about the login but it looks like that's an existing issue. Should opposing be hidden with javascript? Probably another ticket I'm assuming?

[awilfox]

Yeah, reviewing the ARIA guidance again you are right. role="status" is more appropriate for the success <P/>.

Agreed that the invalid/success being shown at the same time should be its own ticket.

[awilfox]

@awilfox 💬

I have been looking high and low for any normative reference that I could give for this, since I know it's a common pattern and I know that it's something most do, but I couldn't find any. The only reference I could find to using role="alert" on warning conditions in addition to errors is on the Alert Example in the ARIA Authoring Practices Guide.

as i understand it, things like ARIA patterns you've cited or WCAG techniques (e.g. (Using ARIA role=alert or Live Regions to Identify Errors) are not normative, as it's the success criteria that define the normative behavior (in this case, §3.3.1 and §4.1.3 are normative.)

And §3.3.1 discusses errors, not warnings. That's why I was hoping to find any direction about warning conditions in the actual standard. And I didn't find any. But since it is called out in the ARIA pattern, I'm just taking that as "official enough" to say that's the intended behaviour / implementation.