eui
eui copied to clipboard
[EuiBasicTable][A11y] Add empty state to table caption
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 #
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
itemswill add an additional "(empty)" text after thetableCaption
General checklist
- Browser QA
- [ ] Checked in both light and dark modes
- [ ] Checked in both MacOS and Windows high contrast modes
- (emulate forced colors if you do not have access to a Windows machine.)
- [ ] Checked in mobile
- [x] Checked in Chrome, Safari, Edge, and Firefox
- [x] Checked for accessibility including keyboard-only and screenreader modes
- Docs site QA
- [ ] Added documentation
- [ ] Props have proper autodocs (using
@defaultif default values are missing) and playground toggles - [ ] Checked Code Sandbox works for any docs examples
- Code quality checklist
- [ ] Added or updated jest and cypress tests
- [ ] Updated visual regression tests
- 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)
:green_heart: Build Succeeded
- Buildkite Build
- Commit: 8912c7764652d4ec832b2a4278366d73e8a0322b
- Documentation website
- Storybook
cc @mgadewoll
:green_heart: Build Succeeded
- Buildkite Build
- Commit: 8912c7764652d4ec832b2a4278366d73e8a0322b
cc @mgadewoll