[Observability:Streams] Improve Streams table accessibility by rStelmach · Pull Request #225659 · elastic/kibana

rStelmach · 2025-06-27T14:46:17Z

Summary 📚

Documents and Retention columns on the Streams home page were not focusable, so keyboard users couldn’t reach the data and screen-reader users heard nothing.

This PR adds:

tabIndex and descriptive aria-labels to the Documents and Retention cells, their loading states, and relevant icons/badges.
Focusable, labelled wrapper around the Documents histogram and a matching ariaLabel on the chart canvas.
Properly labelled ILM policy badge/link, DSL text, ∞ icon, and error badge in the Retention column.
Accessible column headers and a table caption.
Removal of redundant roles that triggered axe-core

How to test 🧪

Open Observability → Streams with populated data.
Navigate the table using a keyboard
Turn on VoiceOver and navigate through the table elements.

…over for streams table

elasticmachine · 2025-06-27T14:46:22Z

Pinging @elastic/obs-ux-logs-team (Team:obs-ux-logs)

elasticmachine · 2025-06-27T14:46:22Z

Pinging @elastic/kibana-accessibility (Project:Accessibility)

…tention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

awahab07

Great to see this implementation.

Is it possible to extract the i18n texts out into a separate file to keep the component definition clean?

I checked the page with VoiceOver on and observed a few things:

Focusing Documents column

Navigating via Tab also focuses the "Documents" column. It should not as there's no actionable element in that column.

However, navigating via control+option+▶️ / ◀️, it should focus the "Documents" column, but the column as a whole while announcing the number of documents. Currently it first focuses the number and then the chart. The chart should stay hidden for VoiceOver.

As an example, see APM -> Hosts table (notice from 00:32):

APM.Hosts.Table.-.Voice.Over.mov

VoiceOver over announces a few bits:

It announces the stream name twice when focused, once for link and once for the stream name (notice at 00:18)
Whenever "Documents" column is focused, it re-introduces the table (notice at 00:24 and 00:44)
After describing the ∞, it calls it 'image' (see at 00:33). I believe such icons should be aria-hidden. Though it should describe it's purpose only.

Streams-home-page-A11y.mov

…tention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

awahab07

Thanks for the refactor, it's more readable now.

I tested the VoiceOver again and looks better now.

There's still a point where it re-introduces the table every time the streams link gets in focus as a result of Tab stepping (See 00:16 and 0035). It doesn't occur when it's navigated via control+option (see 00:55).

Check if it's because inside the Retention Column, both the EuiBadge and EuiLink have aria-labels and when focus goes inside onto EuiLink, it's considered outside of table. (see 00:27 where the focus steps inside). See if it's possible to make only one element Tab focusable (and the link is still navigable via keyboard).

Streams-re-introduction-of-table-stream-links.mov

…tention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

…-observabilitystreams-documents-and-retention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

awahab07

Thanks for the changes, it LGTM now.

I pushed a few tweaks. Please do have a look in case I missed something. Here's a preview of how it behaves now:

streams-a11y-after-tweaks.mov

awahab07 · 2025-08-04T02:25:53Z

.../platform/plugins/shared/streams_app/public/components/stream_list_view/documents_column.tsx

    <EuiIcon type="visLine" size="m" />
  );

-  const chartDescription = React.useMemo(() => {


Removed the chart aria labels as it's now aria-hidden="true".

awahab07 · 2025-08-04T02:38:08Z

.../platform/plugins/shared/streams_app/public/components/stream_list_view/retention_column.tsx


    return (
      <span
-        tabIndex={0}


Removed the Tab key focus from the infinity icon as it's not actionable. Without it, it captures the Tab focus (see at 00:06 below)

Streams-a11y-infinite-retention-focusable.mov

rStelmach · 2025-08-04T08:49:09Z

@awahab07
Thank you, looks great!

flash1293 · 2025-08-06T09:34:43Z

@rStelmach what's missing to get this merged?

rStelmach · 2025-08-06T09:37:25Z

@flash1293 I need extra review from someone from streams

tonyghiani

Codewise LGTM, there are some conflicts to fix, then should be good to go

…tention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

elasticmachine · 2025-08-06T16:48:06Z

💚 Build Succeeded

Buildkite Build
Commit: 26d2f72

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`streamsApp`	535	536	+1

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`streamsApp`	618.9KB	621.3KB	+2.4KB

History

💔 Build #326949 failed 0e00290
💚 Build #325818 succeeded 0d67bd5
💛 Build #325116 was flaky b5eb711
💔 Build #325076 failed fb5c07f
💔 Build #324995 failed ccf0f42

kibanamachine · 2025-08-07T09:51:41Z

Starting backport for target branches: 8.19, 9.1

https://github.com/elastic/kibana/actions/runs/16801120467

kibanamachine · 2025-08-07T09:59:39Z

💔 All backports failed

Status	Branch	Result
❌	8.19	Backport failed because of merge conflicts
❌	9.1	Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 225659

Questions ?

Please refer to the Backport tool documentation

…225659) closes: elastic#224738 ## Summary 📚 Documents and Retention columns on the Streams home page were not focusable, so keyboard users couldn’t reach the data and screen-reader users heard nothing. This PR adds: - `tabIndex` and descriptive `aria-labels` to the Documents and Retention cells, their loading states, and relevant icons/badges. - Focusable, labelled wrapper around the Documents histogram and a matching `ariaLabel` on the chart canvas. - Properly labelled ILM policy badge/link, DSL text, ∞ icon, and error badge in the Retention column. - Accessible column headers and a table caption. - Removal of redundant roles that triggered axe-core ## How to test 🧪 - Open Observability → Streams with populated data. - Navigate the table using a keyboard - Turn on VoiceOver and navigate through the table elements. --------- Co-authored-by: Joe Reuter <johannes.reuter@elastic.co> Co-authored-by: Abdul Zahid <awahab07@yahoo.com>

kibanamachine · 2025-08-08T10:49:16Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 225659 locally
cc: @rStelmach

kibanamachine · 2025-08-11T11:49:39Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 225659 locally
cc: @rStelmach

kibanamachine · 2025-08-12T12:49:00Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 225659 locally
cc: @rStelmach

kibanamachine · 2025-08-13T13:49:44Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create automatically backports add a backport:* label or prevent reminders by adding the backport:skip label.
You can also create backports manually by running node scripts/backport --pr 225659 locally
cc: @rStelmach

gbamparop · 2025-08-14T07:43:02Z

Friendly reminder: Looks like this PR hasn’t been backported yet.

@rStelmach should this be skipped?

rStelmach · 2025-08-14T08:04:11Z

@gbamparop
I overlooked it. I will create those backports in a sec

EDIT: I would skip backports for this PR

…225659) closes: elastic#224738 ## Summary 📚 Documents and Retention columns on the Streams home page were not focusable, so keyboard users couldn’t reach the data and screen-reader users heard nothing. This PR adds: - `tabIndex` and descriptive `aria-labels` to the Documents and Retention cells, their loading states, and relevant icons/badges. - Focusable, labelled wrapper around the Documents histogram and a matching `ariaLabel` on the chart canvas. - Properly labelled ILM policy badge/link, DSL text, ∞ icon, and error badge in the Retention column. - Accessible column headers and a table caption. - Removal of redundant roles that triggered axe-core ## How to test 🧪 - Open Observability → Streams with populated data. - Navigate the table using a keyboard - Turn on VoiceOver and navigate through the table elements. --------- Co-authored-by: Joe Reuter <johannes.reuter@elastic.co> Co-authored-by: Abdul Zahid <awahab07@yahoo.com>

make Documents & Retention columns keyboard accessible. Improve voice…

df2264f

…over for streams table

rStelmach added the release_note:fix label Jun 27, 2025

rStelmach requested a review from a team as a code owner June 27, 2025 14:46

rStelmach added Project:Accessibility Team:obs-onboarding Observability Onboarding Team backport:version Backport to applied version labels Feature:Streams This is the label for the Streams Project v9.1.0 v8.19.0 labels Jun 27, 2025

rStelmach and others added 4 commits June 30, 2025 09:18

Merge branch 'main' into 224738-observabilitystreams-documents-and-re…

ed04438

…tention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

remove unnecessary aria label

dcf48aa

Merge branch 'main' into 224738-observabilitystreams-documents-and-re…

f83c587

…tention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

Merge branch 'main' into 224738-observabilitystreams-documents-and-re…

1521ca6

…tention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

awahab07 reviewed Jul 17, 2025

View reviewed changes

rStelmach and others added 2 commits July 22, 2025 13:29

Merge branch 'main' into 224738-observabilitystreams-documents-and-re…

2dfed4d

…tention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

extract translations to different file, clean up voiceover reptitions

418b443

awahab07 reviewed Jul 25, 2025

View reviewed changes

rStelmach and others added 7 commits July 31, 2025 10:32

Merge branch 'main' into 224738-observabilitystreams-documents-and-re…

ccf0f42

…tention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

fix double Tab for retention column, fix a11y issues

fb5c07f

Merge branch 'main' into 224738-observabilitystreams-documents-and-re…

b5eb711

…tention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

Remove aria-labelling chart.

05abfe6

Remove actionable focus (Tab key) from infinite retention icon.

66e4b0d

Tweak aria-labels.

3eb1cf4

Merge remote-tracking branch 'origin/main' into fork/rStelmach/224738…

0d67bd5

…-observabilitystreams-documents-and-retention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

awahab07 approved these changes Aug 4, 2025

View reviewed changes

tonyghiani approved these changes Aug 6, 2025

View reviewed changes

rStelmach added 2 commits August 6, 2025 14:16

Merge branch 'main' into 224738-observabilitystreams-documents-and-re…

0e00290

…tention-columns-on-streams-homepage-are-not-keyboard-accessible-and-dont-have-focus

fix translation

26d2f72

rStelmach merged commit d1ffef1 into elastic:main Aug 7, 2025
12 checks passed

kibanamachine added the v9.2.0 label Aug 7, 2025

kibanamachine mentioned this pull request Aug 7, 2025

[Docs] Add defaultSolution setting to config reference #229650

Merged

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Aug 8, 2025

rStelmach added backport:skip This PR does not require backporting and removed backport:version Backport to applied version labels labels Aug 14, 2025

kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Aug 14, 2025

kibanamachine mentioned this pull request Dec 10, 2025

[Streams] Search styling bug #245769

Merged

Conversation

rStelmach commented Jun 27, 2025 • edited by kibanamachine Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary 📚

How to test 🧪

Uh oh!

elasticmachine commented Jun 27, 2025

Uh oh!

elasticmachine commented Jun 27, 2025

Uh oh!

awahab07 left a comment

Choose a reason for hiding this comment

Focusing Documents column

VoiceOver over announces a few bits:

Uh oh!

awahab07 left a comment

Choose a reason for hiding this comment

Uh oh!

awahab07 left a comment

Choose a reason for hiding this comment

Uh oh!

awahab07 Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

awahab07 Aug 4, 2025

Choose a reason for hiding this comment

Uh oh!

rStelmach commented Aug 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

flash1293 commented Aug 6, 2025

Uh oh!

rStelmach commented Aug 6, 2025

Uh oh!

tonyghiani left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Aug 6, 2025

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

History

Uh oh!

Uh oh!

kibanamachine commented Aug 7, 2025

Uh oh!

kibanamachine commented Aug 7, 2025

💔 All backports failed

Manual backport

Questions ?

Uh oh!

kibanamachine commented Aug 8, 2025

Uh oh!

kibanamachine commented Aug 11, 2025

Uh oh!

kibanamachine commented Aug 12, 2025

Uh oh!

kibanamachine commented Aug 13, 2025

Uh oh!

gbamparop commented Aug 14, 2025

Uh oh!

rStelmach commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

rStelmach commented Jun 27, 2025 •

edited by kibanamachine

Loading

rStelmach commented Aug 4, 2025 •

edited

Loading

rStelmach commented Aug 14, 2025 •

edited

Loading