elastic / eui

Elastic UI Framework 🙌
https://eui.elastic.co/
Other
6.07k stars 826 forks source link

[EuiFormErrorText][SCREEN READER]: `aria-live="polite"` should be changed to `role="alert"` for improved awareness #5319

Open 1Copenut opened 2 years ago

1Copenut commented 2 years ago

Description

The EuiFormErrorText component has an aria-live="polite" attribute applied on line 25. This live region doesn't always announce to screen readers if the container is not added to the page on first render. Screen reader users might miss important context when consumers use this without a callout.

Suggested Change

I'm suggesting we switch the aria-live="polite" for role="alert"


! src/components/form/form_error_text/form_error_text.tsx#L25

return (
- <div className={classes} aria-live="polite" {...rest}>
+ <div className={classes} role="alert" {...rest}>
    {children}
  </div>
);

## Helpful Links
* https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role
* https://www.w3.org/WAI/WCAG21/Understanding/error-identification.html
github-actions[bot] commented 2 years ago

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

1Copenut commented 2 years ago

Please keep this issue open.

cchaos commented 2 years ago

@1Copenut I'd suggest going ahead and adding the skip-stale-issue label on these types of issues you don't want auto-closed.

cee-chen commented 1 year ago

My 2c from grooming: there's a lot of room for potential abuse/annoyance from consuming devs incorrectly flagging errors too quickly (e.g. clicking into an empty input and it yells about it being required before you even start typing).

To account for that, we should make the option to set role="alert" vs aria-live="polite" as a developer prop instead of as a default.

github-actions[bot] commented 10 months ago

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.

cee-chen commented 9 months ago

@1Copenut would this be something you'd be willing to grab this week (or next) as it seems like a pretty quick change?

1Copenut commented 9 months ago

Moving this to On hold for a minute. @cee-chen and I started a broader discussion about the way screen readers handle errors when consumers use EuiForm with the error callout (with or without individual errors) vs. when they just use individual EuiFormRow errors. There's nuance in what roles and focus states should be set to maximize usability for screen readers. I'm going to start with a simple spec doc and we can plan out work from there.

github-actions[bot] commented 3 months ago

👋 Hi there - this issue hasn't had any activity in 6 months. If the EUI team has not explicitly expressed that this is something on our roadmap, it's unlikely that we'll pick this issue up. We would sincerely appreciate a PR/community contribution if this is something that matters to you! If not, and there is no further activity on this issue for another 6 months (i.e. it's stale for over a year), the issue will be auto-closed.