Skip to content

[EuiBasicTable][A11y] Add empty state to table caption #9265

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
mgadewoll merged 3 commits into from
Dec 19, 2025
Merged

[EuiBasicTable][A11y] Add empty state to table caption #9265

mgadewoll merged 3 commits into from
Dec 19, 2025

Conversation

@mgadewoll
Copy link
Contributor

@mgadewoll mgadewoll commented Dec 10, 2025 •
edited by tkajtoch
Loading

Summary

This PR updates EuiBasicTable by adding additional context information to the table caption about the empty state of the table. This helps to clarify when a table has no columns, as the semantic information still resolves in available columns (header and empty body row) that have no actual data content.

// before
Data table No users found Page 1 of 2.  table  with 2 rows and 7 columns

// after
Data table (empty), No users found, Page 1 of 2.  table  with 2 rows and 7 columns

Why are we making this change?

:accessibility: Accessibility: Increase informational clarity

Screenshots #

Screenshot 2025-12-10 at 13 40 53

Impact to users

🟢 There are no updates required on consumer side.

QA

  • Review the added story with a screen reader and confirm that tables with no items will add an additional "(empty)" text after the tableCaption

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • Release checklist
    • A changelog entry exists and is marked appropriately
    • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
    • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
  • Designer checklist
    • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

@mgadewoll mgadewoll self-assigned this Dec 10, 2025
@elasticmachine
Copy link
Collaborator

elasticmachine commented Dec 10, 2025

💚 Build Succeeded

cc @mgadewoll

@elasticmachine
Copy link
Collaborator

elasticmachine commented Dec 10, 2025

💚 Build Succeeded

cc @mgadewoll

@mgadewoll mgadewoll marked this pull request as ready for review December 10, 2025 14:35
@mgadewoll mgadewoll requested a review from a team as a code owner December 10, 2025 14:35
@jorgeoliveira117 jorgeoliveira117 mentioned this pull request Dec 10, 2025
Closed
tkajtoch
tkajtoch approved these changes Dec 18, 2025
View reviewed changes
Copy link
Member

@tkajtoch tkajtoch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look and work great! I verified that the (empty) caption is added in DOM tree view, and is correctly read by VoiceOver and JAWS.

@mgadewoll mgadewoll merged commit 59751f5 into elastic:main Dec 19, 2025
8 checks passed
@weronikaolejniczak weronikaolejniczak mentioned this pull request Jan 5, 2026
Merged
@seialkali seialkali mentioned this pull request Jan 5, 2026
Open
weronikaolejniczak added a commit to elastic/kibana that referenced this pull request Jan 14, 2026
@weronikaolejniczak
Update EUI to 111.1.0 (#247843)
d377f8f 
## Dependency updates

- `@elastic/eui`: `v111.0.0` ⏩ `v111.1.0`
- `@elastic/eui-theme-borealis`: `v5.2.0` ⏩ `v5.3.0`

---

## Changes

- Removed `euiBasicTable.tableCaptionWithPagination`,
`euiBasicTable.tableAutoCaptionWithPagination`,
`euiBasicTable.tableSimpleAutoCaptionWithPagination`,
`euiBasicTable.tableAutoCaptionWithoutPagination` i18n tokens
- Added `euiBasicTable.caption.itemCountPart.withTotalItemCount`,
`euiBasicTable.caption.paginationPart.withPageCount`,
`euiBasicTable.caption.tableName`, `euiBasicTable.caption.emptyState`
i18n tokens
- Updated snapshot tests
- Updated a couple of Jest assertions due to [this EUI
change](https://github.com/elastic/eui/pull/9254/changes)), see
127ab80

## Package updates

### `@elastic/eui`
[v111.1.0](https://github.com/elastic/eui/releases/tag/v111.1.0)

- Added `dashedCircle` icon
([#9278](elastic/eui#9278))
- Added `crossProjectSearch` icon
([#9275](elastic/eui#9275))
- Added component token `components.tourStepIndicatorInactiveColor` and
`components.tourStepIndicatorActiveColor`
([#9271](elastic/eui#9271))
- Remapped `EuiBeacon` component `success` variant to use `success`
color token instead of `accentSecondary`
([#9271](elastic/eui#9271))
- Added `EuiSplitButton` and its respective sub-components
`EuiSplitButton.ActionPrimary` and `EuiSplitButton.ActionSecondary`
([#9269](elastic/eui#9269))
- Added `productRobot` icon
([#9259](elastic/eui#9259))
- Added beta `euiContainer()`, `euiContainerCSS()`, and
`euiContainerQuery()` Emotion utilities to help work with CSS Container
Queries ([#9264](elastic/eui#9264))
- Added `useEuiContainerQuery` hook to observe container query changes
in JavaScript ([#9251](elastic/eui#9251))
- Updated EuiFlexGroup's `gutterSize` from `l` to `m`
([#9132](elastic/eui#9132))
- Updated EuiSpacer's `size` from `l` to `m`
([#9132](elastic/eui#9132))
- Updated EuiHorizontalRule's `margin` from `l` to `m`
([#9132](elastic/eui#9132))
- Updated EuiPageHeader's tab `size` from `l` to `m`
([#9132](elastic/eui#9132))
- Updated EuiEmptyPrompt's spacer `size` between title and text from `m`
to `s` ([#9132](elastic/eui#9132))
- Updated EuiSearchBar's `gutterSize` from `m` to `s`
([#9132](elastic/eui#9132))

<img width="2158" height="392" alt="image"
src="https://github.com/user-attachments/assets/e217f5a5-5b4f-48df-830d-a60861939945"
/>
<img width="1692" height="608" alt="image"
src="https://github.com/user-attachments/assets/d1f49e86-ad8c-4d80-9d02-54c73baae616"
/>
<img width="2182" height="302" alt="image"
src="https://github.com/user-attachments/assets/295c768c-a2df-48f5-80cb-1a1ce5b19e00"
/>
<img width="1904" height="1066" alt="image"
src="https://github.com/user-attachments/assets/f96cbde6-0529-4f5b-be5b-b56f28c5d2b7"
/>
<img width="1566" height="128" alt="image"
src="https://github.com/user-attachments/assets/be4df105-9e32-4a9d-89f0-fe973f441495"
/>

**Bug fixes**

- Fixed flyout overlay masks not being visible for `EuiDataGrid`'s
fullscreen mode by reducing the `z-index` of the fullscreen mode overlay
([#9267](elastic/eui#9267))

**Accessibility**

- Added information about the empty state of `EuiBasicTable` in the
table caption ([#9265](elastic/eui#9265))
- Improved `EuiBasicTable` accessibility by ensuring a fallback
`tableCaption` is applied if none is provided
([#9254](elastic/eui#9254))

### `@elastic/eui-theme-borealis` v5.3.0

- Added component token `components.tourStepIndicatorInactiveColor` and
`components.tourStepIndicatorActiveColor`
([#9271](elastic/eui#9271))
smith pushed a commit to smith/kibana that referenced this pull request Jan 16, 2026
@weronikaolejniczak @smith
Update EUI to 111.1.0 (elastic#247843)
67087ff 
## Dependency updates

- `@elastic/eui`: `v111.0.0` ⏩ `v111.1.0`
- `@elastic/eui-theme-borealis`: `v5.2.0` ⏩ `v5.3.0`

---

## Changes

- Removed `euiBasicTable.tableCaptionWithPagination`,
`euiBasicTable.tableAutoCaptionWithPagination`,
`euiBasicTable.tableSimpleAutoCaptionWithPagination`,
`euiBasicTable.tableAutoCaptionWithoutPagination` i18n tokens
- Added `euiBasicTable.caption.itemCountPart.withTotalItemCount`,
`euiBasicTable.caption.paginationPart.withPageCount`,
`euiBasicTable.caption.tableName`, `euiBasicTable.caption.emptyState`
i18n tokens
- Updated snapshot tests
- Updated a couple of Jest assertions due to [this EUI
change](https://github.com/elastic/eui/pull/9254/changes)), see
elastic@127ab80

## Package updates

### `@elastic/eui`
[v111.1.0](https://github.com/elastic/eui/releases/tag/v111.1.0)

- Added `dashedCircle` icon
([elastic#9278](elastic/eui#9278))
- Added `crossProjectSearch` icon
([elastic#9275](elastic/eui#9275))
- Added component token `components.tourStepIndicatorInactiveColor` and
`components.tourStepIndicatorActiveColor`
([elastic#9271](elastic/eui#9271))
- Remapped `EuiBeacon` component `success` variant to use `success`
color token instead of `accentSecondary`
([elastic#9271](elastic/eui#9271))
- Added `EuiSplitButton` and its respective sub-components
`EuiSplitButton.ActionPrimary` and `EuiSplitButton.ActionSecondary`
([elastic#9269](elastic/eui#9269))
- Added `productRobot` icon
([elastic#9259](elastic/eui#9259))
- Added beta `euiContainer()`, `euiContainerCSS()`, and
`euiContainerQuery()` Emotion utilities to help work with CSS Container
Queries ([elastic#9264](elastic/eui#9264))
- Added `useEuiContainerQuery` hook to observe container query changes
in JavaScript ([elastic#9251](elastic/eui#9251))
- Updated EuiFlexGroup's `gutterSize` from `l` to `m`
([elastic#9132](elastic/eui#9132))
- Updated EuiSpacer's `size` from `l` to `m`
([elastic#9132](elastic/eui#9132))
- Updated EuiHorizontalRule's `margin` from `l` to `m`
([elastic#9132](elastic/eui#9132))
- Updated EuiPageHeader's tab `size` from `l` to `m`
([elastic#9132](elastic/eui#9132))
- Updated EuiEmptyPrompt's spacer `size` between title and text from `m`
to `s` ([elastic#9132](elastic/eui#9132))
- Updated EuiSearchBar's `gutterSize` from `m` to `s`
([elastic#9132](elastic/eui#9132))

<img width="2158" height="392" alt="image"
src="https://github.com/user-attachments/assets/e217f5a5-5b4f-48df-830d-a60861939945"
/>
<img width="1692" height="608" alt="image"
src="https://github.com/user-attachments/assets/d1f49e86-ad8c-4d80-9d02-54c73baae616"
/>
<img width="2182" height="302" alt="image"
src="https://github.com/user-attachments/assets/295c768c-a2df-48f5-80cb-1a1ce5b19e00"
/>
<img width="1904" height="1066" alt="image"
src="https://github.com/user-attachments/assets/f96cbde6-0529-4f5b-be5b-b56f28c5d2b7"
/>
<img width="1566" height="128" alt="image"
src="https://github.com/user-attachments/assets/be4df105-9e32-4a9d-89f0-fe973f441495"
/>

**Bug fixes**

- Fixed flyout overlay masks not being visible for `EuiDataGrid`'s
fullscreen mode by reducing the `z-index` of the fullscreen mode overlay
([elastic#9267](elastic/eui#9267))

**Accessibility**

- Added information about the empty state of `EuiBasicTable` in the
table caption ([elastic#9265](elastic/eui#9265))
- Improved `EuiBasicTable` accessibility by ensuring a fallback
`tableCaption` is applied if none is provided
([elastic#9254](elastic/eui#9254))

### `@elastic/eui-theme-borealis` v5.3.0

- Added component token `components.tourStepIndicatorInactiveColor` and
`components.tourStepIndicatorActiveColor`
([elastic#9271](elastic/eui#9271))
weronikaolejniczak pushed a commit to weronikaolejniczak/eui that referenced this pull request Jan 23, 2026
@mgadewoll @weronikaolejniczak
[EuiBasicTable][A11y] Add empty state to table caption (elastic#9265)
e5fdb8f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@tkajtoch tkajtoch tkajtoch approved these changes

Assignees

@mgadewoll mgadewoll

Labels

accessibility

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mgadewoll @elasticmachine @tkajtoch