Temporal Content Switches in Table Search and Filter

[aphelionz]

Steps to reproduce (assumes ChromeVox or similar)

Long story short: All of these items need to trigger screen reader events when they change the content of the table they are connected to with, at the very least, the number of rows returned as a result of user action.

1. Open https://elastic.github.io/eui/#/display/tables in a new tab.
2. Tab to the inputs under the "In-Memory Table - Selection" heading.
3. Tab to the "Load Users" Button
4. Press enter

Actual Result

silence

Expected Result

"Search|Filter complete. 8 rows returned"

Category: #688: Elastic UI Tables Accessibility
Relevant WCAG Criteria: 3.2.2 Predictable: On Input

[cjcenizal]

This would address elastic/kibana#20200.

[PhilippBaranovskiy]

As I can see now, ScreenReader just says at the moment of focusing on search input that the future results will be filtered as the user types.
No announcement of how they have been filtered at the particular moment once the user finished typing.

I'm going to follow-up this issue as the filter button (see the screen below) needs to announce itself as well as changed results once the user toggled it.

I guess it also relates to #1184.
Initially, I started working on elastic/kibana#28385.

I would suggest that we/I should implement the on-live trigger for all that kind of cases where it needs to notify the user that something is changing on a page right now at the moment of they are typing.

Such case already exists:
Search on advanced settings: screenreader announces that results are getting filtered

@cjcenizal @snide @aphelionz @cchaos,
could you please share your thoughts, ideas, or suggestions what would be the best way to improve that accessibility occurrence?

[cjcenizal]

@rockfield At first glance, the AdvancedSettingsVoiceAnnouncement component you shared looks fairly generic. It seems like you would be able to use this to address the accessibility problems you mentioned. What do you think? If so, then I suggest migrating it to EUI.

My only concern is that built-in delay within the component. It seems potentially very helpful, because then consumers won't need to worry about manually providing a delay each time they use the component. On the other hand, it's possible there may be scenarios where it's necessary to customize the delay, e.g. by reducing it to 0 or by increasing it. If you migrate this component to EUI, I'd suggest thinking about that aspect some more. If it seems like the built-in delay is the way to go, I would suggest at least exposing some ability for consumers to override it.

Thanks for tackling this stuff!

[PhilippBaranovskiy]

@cjcenizal, thanks for the response! and sorry for the delay from my side :)

What you typed seems very useful.
To continue your suggestion, I would propose the following functional separation:

1. make a component-like API that is supposed to provide updated info (how many results are there now, filtered)
2. by what it has been filtered ("search typing", "button-filters", "complex filter", and a react-referenced trigger whatever it is).
3. presentational view, which is supposed only to render live-region and let screen reader announce the fact of changing

The 3rd option is what has been done for AdvancedSettingsVoiceAnnouncement .
The 1st option is needed to let, for instance, toggle buttons and search input at the same time trigger one unified point (component?) with updates. After that, this api component triggers presentative view to render live region.

The 2nd option is just I think maybe useful, might be skipped.

Looking at written above, I'm thinking that it seems as expanding search bar component's functionality by adding an additional tiny functional layer.

How does it sound for you?

[PhilippBaranovskiy]

To close this issue I need to update Table caption update with using component, which now is in Eui framework.

[PhilippBaranovskiy]

UPDATED: #1876 updates the table caption in file
src\components\basic_table\basic_table.js:464 so that now Screen Reader announce updates correctly by reading the whole line Below is a table of {itemCount} items., not only the updated number.