WIP: [Accessibility] Make toast global list is an aria live region #1958

PhilippBaranovskiy · 2019-05-23T13:59:09Z

Closes #1947

Summary

This PR aims to implement correctly live regions as a toast global list in Eui and Kibana app.
Toasts are stored as <p> nodes in an aria live region.
Every next toast replace a previous one with short "clearing-delay" which tells ScreenReader that there is a change that needs to be announced.

⚠️ Before

Every toast has aria-live attribute, there is no live region at all.

It does work: VoiceOver
It doesn't work: NVDA, JAWS.

✅ Now

A live region role="region" initializes at the component mounting,
next to globalToastList, — it is a div that is going to contains all upcoming notifications as a <p> nodes.
Thus the Screen Reader understands where it should wait for updates.

Have a look at #1947 issue's description, there are a couple of links to standard explanations.

It does work: VoiceOver, NVDA, JAWS
It doesn't work: n/a

Expected behaviour

Once a toast notification is rendered, it is getting be announced.
At the moment of the next toast coming, Screen Reader stops saying and is starting announce the coming one.

Tasks to do in this PR

Implemented a persistent stack of toasts in a very thin stick low memory usage way.
Tested with NVDA / JAWS / Narrator (Win)
Tested with VoiceOver (Mariya, Bhavya)
Tested memory usage while

Checking against ScreenReaders

✅ VoiceOver + Safari
✅ NVDA + Firefox
✅ NVDA + IE11
✅ Narrator + Edge
✅ NVDA + Chrome

Checklist

This was checked in dark mode
~~- [ ] This was checked in mobile~~
~~- [ ] Any props added have proper autodocs~~
This was checked in IE11
~~- [ ] Documentation examples were added~~
A changelog entry exists and is marked appropriately
~~- [ ] This was checked for breaking changes and labeled appropriately~~
Jest tests were updated or added to match the most common scenarios
This was checked against keyboard-only and screenreader scenarios
~~- [ ] This required updates to Framer X components~~

snide

Small change. You need a changelog.

src/components/toast/global_toast_list.js

…ment as a part of title; make it working in NVDA

src/components/toast/global_toast_list.js

alexwizp

Looks good but please review my comments above.

bhavyarm · 2019-06-03T11:24:32Z

@rockfield I tried to test this on Friday and you are correct. I am not sure whats happening with this on voiceover. Buzzing a developer today and then will update my review. Thanks!

PhilippBaranovskiy · 2019-06-03T13:12:31Z

@bhavyarm, I've updated the algorithm with the following technique: after the 57 sec of idle, it clears the stack of toast notifications.
The assumption is that the live region overflow (that screen reader watches) may somehow impact the work of VoiceOver.
So, I'm testing this today and leaving feedback here.

…Render> and Aria live region

PhilippBaranovskiy · 2019-06-05T09:07:57Z

@maryia-lapata could you confirm that we checked with VoiceOver and it works perfectly?

PhilippBaranovskiy · 2019-06-05T09:09:42Z

@bhavyarm I've re-implemented the algorithm of updating sound announcing, now as I see it works perfectly with VoiceOver as well as with NVDA and Jaws.
Could you have a look?

maryia-lapata · 2019-06-05T10:51:49Z

@maryia-lapata could you confirm that we checked with VoiceOver and it works perfectly?

yes, we checked with VoiceOver (Mac 10.14.5). It works as expected (see "Expected behaviour" section on the description.)

alexwizp · 2019-06-05T12:58:45Z

src/components/toast/global_toast_list.js

+    // where one of them has number ID while the other -- string
+    // Also, documentation example uses numberic IDs
+    const toastIDS = toasts
+      .filter(({ id }) => typeof id === 'number')


@cjcenizal @snide @thompsongl @cchaos @rockfield
I think it makes sense to discuss this solution. This solution works only for numeric id's. I see some risk here

@cjcenizal @snide @thompsongl @cchaos
The main question and issue here are how could I catch the last came toast?

Just so I'm sure I understand correctly: is the goal of lines 194-198 to determine the newest toast in the toasts array? If so, then does toasts[toasts.length - 1] give us that information?

I agree with @alexwizp that depending upon numeric IDs is risky. AFAIK, there's nothing enforcing numeric IDs, or even a meaningful relationship between IDs that are numeric (e.g. that higher numbers mean the toast is newer or anything else). I think relying on a convention will be very easy to break and difficult for consumers to debug if they stray from it.

We discussed this over a zoom call and have a plan to move forward with a more nuanced approach.

bkimmel · 2019-06-11T03:30:21Z

src/components/toast/global_toast_list.js

+        id: toast.id,
+        reactElement: (
+          <Fragment key={toast.id}>
+            <p>


❔ For accessibility, would it make sense to give this an aria-title pointing to the thing below that has the toast.title ditto for aria-describedby and the toast text?

…t re-announcing that from screen reader

PhilippBaranovskiy · 2019-06-18T20:04:55Z

This became too huge, complex and outdated.
I'm closing this in order to provide another tiny small update instead trying to cover all functional needs.

Please, have a look at that a few lines PR: #2055

PhilippBaranovskiy added 2 commits May 16, 2019 12:59

toasts live region

dabd580

Merge branch 'master' into 1947

d69cc46

PhilippBaranovskiy self-assigned this May 23, 2019

update snapshost

ba2bed2

snide suggested changes May 23, 2019

View reviewed changes

src/components/toast/global_toast_list.js Outdated Show resolved Hide resolved

PhilippBaranovskiy added 3 commits May 28, 2019 08:48

WIP: new notification logger; excludes 'dismiss toast' voice announce…

663b4fb

…ment as a part of title; make it working in NVDA

WIP: new notification logger; excludes 'dismiss toast' voice announce…

0c0e96e

…ment as a part of title; make it working in NVDA

update snapshots

f27f8af

PhilippBaranovskiy requested a review from maryia-lapata May 28, 2019 05:55

PhilippBaranovskiy added accessibility accessibility - WCAG A Level A WCAG Accessibility Criteria labels May 28, 2019

PhilippBaranovskiy requested review from alexwizp and sulemanof May 28, 2019 08:02

PhilippBaranovskiy marked this pull request as ready for review May 28, 2019 11:51

PhilippBaranovskiy changed the title ~~WIP [Accessibility] Make toast global list is an aria live region~~ [Accessibility] Make toast global list is an aria live region May 28, 2019

PhilippBaranovskiy requested a review from bhavyarm May 28, 2019 13:59

PhilippBaranovskiy added 5 commits May 29, 2019 13:06

WIP: clearing notification stack after an idle time

13eb817

Merge branch 'master' into 1947

2de11ef

Merge branch 'master' into 1947

daff943

updated CHANGEDLOG

5c3381a

adjusted time period

852c54a

PhilippBaranovskiy requested a review from snide May 30, 2019 08:11

alexwizp reviewed May 31, 2019

View reviewed changes

src/components/toast/global_toast_list.js Outdated Show resolved Hide resolved

alexwizp reviewed May 31, 2019

View reviewed changes

src/components/toast/global_toast_list.js Outdated Show resolved Hide resolved

alexwizp reviewed May 31, 2019

View reviewed changes

src/components/toast/global_toast_list.js Outdated Show resolved Hide resolved

alexwizp reviewed May 31, 2019

View reviewed changes

PhilippBaranovskiy added 2 commits May 31, 2019 20:04

review comments

dfa834c

Merge branch 'master' into 1947

23a3342

Merge branch 'master' into 1947

aa07a5c

PhilippBaranovskiy changed the title ~~[Accessibility] Make toast global list is an aria live region~~ WIP: [Accessibility] Make toast global list is an aria live region Jun 3, 2019

PhilippBaranovskiy changed the title ~~WIP: [Accessibility] Make toast global list is an aria live region~~ [Accessibility] Make toast global list is an aria live region Jun 3, 2019

Merge branch 'master' into 1947

990732d

PhilippBaranovskiy changed the title ~~[Accessibility] Make toast global list is an aria live region~~ WIP: [Accessibility] Make toast global list is an aria live region Jun 4, 2019

PhilippBaranovskiy added 3 commits June 4, 2019 23:47

Merge branch '1947' of https://github.com/rockfield/eui into 1947

2547260

Annoncing only the last toast notification with the help of <EuiDelay…

2595b38

…Render> and Aria live region

Merge branch 'master' into 1947

6f24324

PhilippBaranovskiy changed the title ~~WIP: [Accessibility] Make toast global list is an aria live region~~ [Accessibility] Make toast global list is an aria live region Jun 4, 2019

PhilippBaranovskiy added 2 commits June 5, 2019 13:37

Add screenReaderOnly way to announce a toast but not show it

257afef

fix eslint review

6277412

PhilippBaranovskiy requested a review from alexwizp June 5, 2019 10:55

alexwizp reviewed Jun 5, 2019

View reviewed changes

PhilippBaranovskiy requested review from cchaos, thompsongl and cjcenizal June 5, 2019 13:04

PhilippBaranovskiy changed the title ~~[Accessibility] Make toast global list is an aria live region~~ WIP: [Accessibility] Make toast global list is an aria live region Jun 6, 2019

bkimmel reviewed Jun 11, 2019

View reviewed changes

WIP: need to figure out how to re-render a toast in the logger withou…

6adbf30

…t re-announcing that from screen reader

PhilippBaranovskiy closed this Jun 18, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: [Accessibility] Make toast global list is an aria live region #1958

WIP: [Accessibility] Make toast global list is an aria live region #1958

PhilippBaranovskiy commented May 23, 2019 •

edited

Loading

snide left a comment

alexwizp left a comment

bhavyarm commented Jun 3, 2019

PhilippBaranovskiy commented Jun 3, 2019

PhilippBaranovskiy commented Jun 5, 2019

PhilippBaranovskiy commented Jun 5, 2019

maryia-lapata commented Jun 5, 2019

alexwizp Jun 5, 2019

PhilippBaranovskiy Jun 5, 2019

cjcenizal Jun 5, 2019 •

edited

Loading

chandlerprall Jun 5, 2019

bkimmel Jun 11, 2019

PhilippBaranovskiy commented Jun 18, 2019

WIP: [Accessibility] Make toast global list is an aria live region #1958

WIP: [Accessibility] Make toast global list is an aria live region #1958

Conversation

PhilippBaranovskiy commented May 23, 2019 • edited Loading

Summary

⚠️ Before

✅ Now

Expected behaviour

Tasks to do in this PR

Checking against ScreenReaders

Checklist

snide left a comment

Choose a reason for hiding this comment

alexwizp left a comment

Choose a reason for hiding this comment

bhavyarm commented Jun 3, 2019

PhilippBaranovskiy commented Jun 3, 2019

PhilippBaranovskiy commented Jun 5, 2019

PhilippBaranovskiy commented Jun 5, 2019

maryia-lapata commented Jun 5, 2019

alexwizp Jun 5, 2019

Choose a reason for hiding this comment

PhilippBaranovskiy Jun 5, 2019

Choose a reason for hiding this comment

cjcenizal Jun 5, 2019 • edited Loading

Choose a reason for hiding this comment

chandlerprall Jun 5, 2019

Choose a reason for hiding this comment

bkimmel Jun 11, 2019

Choose a reason for hiding this comment

PhilippBaranovskiy commented Jun 18, 2019

PhilippBaranovskiy commented May 23, 2019 •

edited

Loading

cjcenizal Jun 5, 2019 •

edited

Loading