[EuiTablePagination] Add `aria-current` to rows per page menu #7186

1Copenut · 2023-09-13T20:46:49Z

Summary

This PR adds an aria-current attribute to the current page for EuiTable, EuiDataGrid, and nested EuiContextMenu used for rows per page. PR closes #6649.

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if 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
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)~~
Designer checklist
- ~~Updated the Figma library counterpart~~

…menu.

src/components/table/table_pagination/table_pagination.tsx

src/components/pagination/pagination_button.tsx

upcoming_changelogs/7186.md

Co-authored-by: Cee Chen <[email protected]>

cee-chen · 2023-09-14T16:24:17Z

src/components/table/table_pagination/table_pagination.tsx

@@ -114,8 +114,11 @@ export const EuiTablePagination: FunctionComponent<EuiTablePaginationProps> = (
    () =>
      itemsPerPageOptions.map((itemsPerPageOption) => (
        <EuiContextMenuItem
-          key={itemsPerPageOption}


This key is still needed for .map iteration. You should be see a ton of warnings in the console without it

I think I re-added the icon and aria-current before the key, so the default PR view shows it removed. The key is still in the code on L#121. I can move it back to previous location.

oh whoops, you're right 🤦 yeah let's make the key the first prop as a general rule, it makes it easier to tell it's there since it's a "special" prop

I like that as an EUI house style and sound argument. I'll move it to the first prop declaration and set auto-merge after the tests run.

cee-chen

Approving - key prop move is an optional change request. Thanks Trevor!

kibanamachine · 2023-09-14T17:19:31Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7186/
Storybook: https://eui.elastic.co/pr_7186/storybook

elasticmachine · 2023-09-14T17:35:18Z

💚 Build Succeeded

Buildkite Build
Commit: 0a1e8c6

History

💚 Build #612 succeeded d962054
💔 Build #611 failed 42226b0
💔 Build #608 failed 5afd8d5
💔 Build #607 failed fdf70d9
💔 Build #606 failed aed046a

cc @1Copenut

`v88.3.0`⏩`v88.5.0` closes #151514 --- ## [`88.5.0`](https://github.com/elastic/eui/tree/v88.5.0) - Updated `EuiCallOut` with a new `onDismiss` prop ([#7156](elastic/eui#7156)) - Added a new `renderCustomToolbar` prop to `EuiDataGrid`, which allows custom rendering of the toolbar. ([#7190](elastic/eui#7190)) - Added a new `allowResetButton` prop to `toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows hiding the "Reset to default" button from the display settings popover. ([#7190](elastic/eui#7190)) - Added a new `additionalDisplaySettings` prop to `toolbarVisibility.showDisplaySelector` of `EuiDataGrid`, which allows rendering extra settings inside the display settings popover. ([#7190](elastic/eui#7190)) - Updated `EuiDataGrid`'s toolbar display settings button icon ([#7190](elastic/eui#7190)) - Updated `EuiTextTruncate` with significantly improved iteration performance. Removed `measurementRenderAPI` prop, as `EuiTextTruncation` now only uses more performant canvas render API ([#7210](elastic/eui#7210)) - Updated `EuiPopover` with a new configurable `repositionToCrossAxis` prop ([#7211](elastic/eui#7211)) - Updated `EuiDatePicker` to support `compressed` input styling ([#7218](elastic/eui#7218)) - Added `gradient` and `palette` icon glyphs. ([#7220](elastic/eui#7220)) **Bug fixes** - Fixed `EuiPopover`'s missing animations on popover close ([#7211](elastic/eui#7211)) - Fixed `EuiInputPopover` anchoring to the wrong side and missing shadows on smaller screens ([#7211](elastic/eui#7211)) - Fixed `EuiSuperDatePicker` icon spacing on the quick select button ([#7217](elastic/eui#7217)) - Fixed a missing type in `EuiMarkdownEditor`'s default processing plugins ([#7221](elastic/eui#7221)) ## [`88.4.1`](https://github.com/elastic/eui/tree/v88.4.1) **Bug fixes** - Fixed missing `className`s on `EuiTextTruncate` ([#7212](elastic/eui#7212)) - Fixed `title`s on `EuiComboBox` dropdown options to always be present ([#7212](elastic/eui#7212)) - Fixed `EuiComboBox` truncation issues when search is an empty space ([#7212](elastic/eui#7212)) ## [`88.4.0`](https://github.com/elastic/eui/tree/v88.4.0) - Updated `EuiComboBox` to allow configuring text truncation behavior via `truncationProps`. These props can be set on the entire combobox as well as on on individual dropdown options. ([#7028](elastic/eui#7028)) - Updated `EuiInMemoryTable` with a new `searchFormat` prop (defaults to `eql`). When setting this prop to `text`, the built-in search bar will ignore EQL syntax and allow searching for plain strings with special characters and symbols. ([#7175](elastic/eui#7175)) **Bug fixes** - `EuiComboBox` now always shows the highlighted search text, even on truncated text ([#7028](elastic/eui#7028)) - Fixed missing i18n in `EuiSearchBar`'s default placeholder and aria-label text ([#7175](elastic/eui#7175)) - Fixed the inline compressed styles of `EuiDescriptionListTitle` to use a taller line-height for readability ([#7185](elastic/eui#7185)) - Fixed `EuiComboBox` to correctly truncate selected items when displayed as pills and plain text ([#7193](elastic/eui#7193)) **Accessibility** - Added `aria-current` attribute to `EuiTablePagination` ([#7186](elastic/eui#7186)) **CSS-in-JS conversions** - Converted `EuiDroppable` and `EuiDraggable` to Emotion; Removed `$euiDragAndDropSpacing` Sass variables ([#7187](elastic/eui#7187)) --------- Co-authored-by: Patryk Kopycinski <[email protected]> Co-authored-by: Jan Monschke <[email protected]> Co-authored-by: Thomas Watson <[email protected]>

1Copenut added 3 commits September 11, 2023 10:01

Added checks for aria-current to table pagination button and context …

1bc5129

…menu.

Merge branch 'main' into feature/euiPagination-aria-current

aed046a

Refactoring current item checks into a single function.

f8b416f

1Copenut added accessibility accessibility - screen reader labels Sep 13, 2023

1Copenut changed the title ~~[EuiTablePagination] Add aria-current to current page and rows per page menu~~ [EuiTable] Add aria-current to current pagination button and rows per page menu Sep 13, 2023

1Copenut self-assigned this Sep 13, 2023

1Copenut added 2 commits September 13, 2023 16:31

Updating snapshot and adding CHANGELOG.

52a9c42

Adding setActiveProps to useMemo dep array.

fdf70d9

1Copenut requested a review from cee-chen September 13, 2023 21:37

1Copenut marked this pull request as ready for review September 13, 2023 21:37

Removing itemsPerPage from useMemo dep array.

5afd8d5

cee-chen reviewed Sep 13, 2023

View reviewed changes

src/components/table/table_pagination/table_pagination.tsx Outdated Show resolved Hide resolved

cee-chen changed the title ~~[EuiTable] Add aria-current to current pagination button and rows per page menu~~ [EuiTablePagination] Add aria-current to current pagination button and rows per page menu Sep 13, 2023

cee-chen reviewed Sep 13, 2023

View reviewed changes

src/components/pagination/pagination_button.tsx Outdated Show resolved Hide resolved

cee-chen reviewed Sep 13, 2023

View reviewed changes

upcoming_changelogs/7186.md Outdated Show resolved Hide resolved

1Copenut and others added 2 commits September 14, 2023 08:06

Update upcoming_changelogs/7186.md

42226b0

Co-authored-by: Cee Chen <[email protected]>

Refactoring aria-current and icon to simpler ternary from util func.

d962054

1Copenut requested a review from cee-chen September 14, 2023 14:14

cee-chen reviewed Sep 14, 2023

View reviewed changes

cee-chen changed the title ~~[EuiTablePagination] Add aria-current to current pagination button and rows per page menu~~ [EuiTablePagination] Add aria-current to rows per page menu Sep 14, 2023

cee-chen approved these changes Sep 14, 2023

View reviewed changes

Moving key to first prop declaration for clarity.

0a1e8c6

1Copenut enabled auto-merge (squash) September 14, 2023 16:52

1Copenut merged commit 0f42263 into elastic:main Sep 14, 2023
1 check passed

cee-chen mentioned this pull request Sep 20, 2023

Upgrade EUI to v88.5.0 elastic/kibana#166868

Merged

1Copenut deleted the feature/euiPagination-aria-current branch September 20, 2023 17:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiTablePagination] Add `aria-current` to rows per page menu #7186

[EuiTablePagination] Add `aria-current` to rows per page menu #7186

1Copenut commented Sep 13, 2023 •

edited

Loading

cee-chen Sep 14, 2023 •

edited

Loading

1Copenut Sep 14, 2023

cee-chen Sep 14, 2023

1Copenut Sep 14, 2023

cee-chen left a comment

kibanamachine commented Sep 14, 2023

elasticmachine commented Sep 14, 2023

[EuiTablePagination] Add aria-current to rows per page menu #7186

[EuiTablePagination] Add aria-current to rows per page menu #7186

Conversation

1Copenut commented Sep 13, 2023 • edited Loading

Summary

QA

General checklist

cee-chen Sep 14, 2023 • edited Loading

Choose a reason for hiding this comment

1Copenut Sep 14, 2023

Choose a reason for hiding this comment

cee-chen Sep 14, 2023

Choose a reason for hiding this comment

1Copenut Sep 14, 2023

Choose a reason for hiding this comment

cee-chen left a comment

Choose a reason for hiding this comment

kibanamachine commented Sep 14, 2023

elasticmachine commented Sep 14, 2023

💚 Build Succeeded

History

[EuiTablePagination] Add `aria-current` to rows per page menu #7186

[EuiTablePagination] Add `aria-current` to rows per page menu #7186

1Copenut commented Sep 13, 2023 •

edited

Loading

cee-chen Sep 14, 2023 •

edited

Loading