fix(eui): remove hasColumnActions from sorting helper text in EuiDataGrid #8598

weronikaolejniczak · 2025-04-16T14:41:28Z

Summary

This PR updates the conditions of applying aria-sort to the sorting header cell or rendering sorting helper text in case aria-sort cannot be used (multi-column sorting). Now, there is no duplicated screen reader output and sorting status is announced as expected.

First, the PR removes !hasColumnActions from this condition:

eui/packages/eui/src/components/datagrid/body/header/column_sorting.tsx

Line 75 in cb22e29

    
           if (!hasColumnActions && hasOnlyOneSort) return null; // in this scenario, the `aria-sort` attribute will be used by screen readers

otherwise aria-sort and helper text are not mutually exclusive. This leads to an overlap and a duplicate screen reader output when the data grid is sorted by one column with actions:

Context

The reason for this condition can be traced back to this PR (test case):

Note - unfortunately this is not the case for column headers with no actions - since describedby does not work for those cells and they're using SR only text, the extra text comes along for the ride

Apparently, aria-describedby attribute didn't work at the time for sorting header cells with actions. It's extensively supported now.

To assure aria-sort and sortingScreenReaderText are mutually exclusive, the condition is extracted to a variable and reused for both.

QA

Testing notes

NVDA / Chrome

Sorted by one column with actions:

Chrome.NVDA.one.column.actions.mp4

Sorted by two columns with actions:

Chrome.NVDA.two.columns.actions.mp4

Sorted by one column with no actions:

Chrome.NVDA.one.column.no.actions.mp4

Sorted by two columns with no actions:

Chrome.NVDA.two.columns.no.actions.mp4

NVDA / Firefox

Sorted by one column with actions:

Firefox.NVDA.one.column.actions.mp4

Sorted by two columns with no actions:

Firefox.NVDA.two.columns.no.actions.mp4

JAWS / Chrome

Sorted by one column with actions:

Chrome.JAWS.one.column.actions.mp4

Sorted by two columns with actions:

Chrome.JAWS.two.columns.actions.mp4

Sorted by one column with no actions:

Chrome.Jaws.one.column.no.actions.mp4

Sorted by two columns with no actions:

Chrome.JAWS.two.columns.no.actions.mp4

JAWS / Firefox

Sorted by one column with actions:

Firefox.JAWS.one.column.actions.mp4

Sorted by two columns with no actions:

Firefox.JAWS.two.columns.no.actions.mp4

VoiceOver / Chrome

Sorted by one column with actions:

Screen.Recording.2025-04-16.at.16.13.20.mov

Sorted by two columns with actions:

Screen.Recording.2025-04-16.at.14.32.44.mov

Sorted by one column with no actions:

Screen.Recording.2025-04-16.at.16.17.58.mov

Sorted by two columns with no actions:

Screen.Recording.2025-04-16.at.16.20.18.mov

Specific checklist

Test sorting cell headers announcements:
- sorting by multiple columns with actions
- sorting by one column with no actions
- sorting by multiple columns with actions
- sorting by one column with actions

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
- 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~
- 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)~~
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)

…Grid

kibanamachine · 2025-04-17T10:42:25Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_8598/
Storybook: https://eui.elastic.co/pr_8598/storybook
New docs: https://eui.elastic.co/pr_8598/new-docs

packages/eui/changelogs/upcoming/8598.md

packages/eui/src/components/datagrid/body/header/column_sorting.tsx

mgadewoll · 2025-04-22T12:27:48Z

✅ The update results in the expected screen reader output (single sorted announcement).

weronikaolejniczak · 2025-04-22T12:38:17Z

I updated the PR with your suggestions, thanks @mgadewoll 🙌🏻

…n-reader-output-for-sorted-header-cells

elasticmachine · 2025-04-22T14:22:56Z

💚 Build Succeeded

History

💚 Build #102 succeeded 739d25a
💚 Build #81 succeeded 0b33858
💚 Build #80 succeeded f5484dd
💚 Build #78 succeeded 25e146b

cc @weronikaolejniczak

mgadewoll

🚢 Changes looking LGTM, nice work!

elasticmachine · 2025-04-22T14:38:48Z

💚 Build Succeeded

Buildkite Build
Commit: 8692cd5

History

💔 Build #3900 failed 739d25a
💚 Build #3884 succeeded 0b33858
💚 Build #3881 succeeded 25e146b

cc @weronikaolejniczak

`101.4.0` ⏩ `102.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update severity colors 4c852f1 - Types fix regarding `euiTheme.colors` ddc8d2d, ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]>

`101.4.0` ⏩ `102.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update severity colors elastic@4c852f1 - Types fix regarding `euiTheme.colors` elastic@ddc8d2d, elastic@ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([elastic#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([elastic#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([elastic#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([elastic#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([elastic#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]> (cherry picked from commit ec008b0)

`101.4.0` ⏩ `102.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) >[!IMPORTANT] This PR is a direct sibling to this [upgrade PR](#219482) to `main`. The difference is that it adds a standalone EUI package with the previous "Amsterdam" theme. Apart from the theme difference, **there are no further changes added**. ## Changes - ~~Update severity colors 4c852f13f98c33e83484540a1192f4e65a8cce05~~ (not needed in `8.19`) - Types fix regarding `euiTheme.colors` e15b9cd ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14`

`101.4.0` ⏩ `102.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update severity colors 4c852f1 - Types fix regarding `euiTheme.colors` ddc8d2d, ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]>

`101.4.0` ⏩ `102.0.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes - Update severity colors elastic@4c852f1 - Types fix regarding `euiTheme.colors` elastic@ddc8d2d, elastic@ba7ec4f ## Package updates ### `@elastic/eui` #### [`v102.0.0`](https://github.com/elastic/eui/releases/v102.0.0) - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added semantic color variants `neutral` and `risk` for the following components: ([elastic#8601](elastic/eui#8601)) - `EuiButton` - `EuiButtonEmpty` - `EuiButtonIcon` - `EuiBadge` - `EuiIcon` - `EuiPanel` - Aligned `EuiFormControlLayoutIcons` to the top (instead of center) to improve usability in multi-line form controls like `EuiComboBox` with many selected options ([elastic#8610](elastic/eui#8610)) **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Accessibility** - Fixed duplicate screen reader output on `EuiDataGrid` for single sorted header cells with actions ([elastic#8598](elastic/eui#8598)) ### `@elastic/[email protected]` - Added semantic severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` **Dependency updates** - Updated `@elastic/eui-theme-common` from `peer dependencies` to a `dependencies` ([elastic#8606](elastic/eui#8606)) ### `@elastic/[email protected]` - Added `severity` key on `_EuiThemeConstantColors` to support tokens on `colors.severity` ([elastic#8601](elastic/eui#8601)) - Added type for semantic severity color tokens ([elastic#8601](elastic/eui#8601)) - `colors.severity.unknown` - `colors.severity.neutral` - `colors.severity.success` - `colors.severity.warning` - `colors.severity.risk` - `colors.severity.danger` - Added types for semantic color tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `colors.textNeutral` - `colors.textRisk` - `colors.backgroundBaseNeutral` - `colors.backgroundBaseRisk` - `colors.backgroundLightNeutral` - `colors.backgroundLightRisk` - `colors.backgroundFilledNeutral` - `colors.backgroundFilledRisk` - `colors.borderBaseNeutral` - `colors.borderBaseRisk` - `colors.borderStrongNeutral` - `colors.borderStrongRisk` - Added types for button component tokens for variants `neutral` and `risk`: ([elastic#8601](elastic/eui#8601)) - `components.buttons.backgroundNeutral` - `components.buttons.backgroundRisk` - `components.buttons.backgroundFilledNeutral` - `components.buttons.backgroundFilledRisk` - `components.buttons.backgroundEmptyNeutralHover` - `components.buttons.backgroundEmptyRiskHover` - `components.buttons.textColorNeutral` - `components.buttons.textColorRisk` - `components.buttons.textColorFilledNeutral` - `components.buttons.textColorFilledRisk` **Breaking changes** - Removed types for numbered severity color tokens: ([elastic#8601](elastic/eui#8601)) - `colors.vis.euiColorSeverity0` - `colors.vis.euiColorSeverity1` - `colors.vis.euiColorSeverity2` - `colors.vis.euiColorSeverity3` - `colors.vis.euiColorSeverity4` - `colors.vis.euiColorSeverity5` - `colors.vis.euiColorSeverity6` - `colors.vis.euiColorSeverity7` - `colors.vis.euiColorSeverity8` - `colors.vis.euiColorSeverity9` - `colors.vis.euiColorSeverity10` - `colors.vis.euiColorSeverity11` - `colors.vis.euiColorSeverity12` - `colors.vis.euiColorSeverity13` - `colors.vis.euiColorSeverity14` --------- Co-authored-by: Lene Gadewoll <[email protected]> Co-authored-by: kibanamachine <[email protected]>

weronikaolejniczak changed the title ~~8522 euidatagrida11y prevent duplicate screen reader output for sorted header cells~~ fix(eui): remove hasColumnActions from sorting helper text in EuiDataGrid Apr 16, 2025

weronikaolejniczak self-assigned this Apr 16, 2025

weronikaolejniczak added 3 commits April 17, 2025 12:12

fix(eui): remove hasColumnActions from sorting helper text in EuiData…

7515ae1

…Grid

chore(eui): update column sorting tests

54376ea

chore(eui): add changelog

0b33858

weronikaolejniczak force-pushed the 8522-euidatagrida11y-prevent-duplicate-screen-reader-output-for-sorted-header-cells branch from f5484dd to 0b33858 Compare April 17, 2025 10:12

weronikaolejniczak marked this pull request as ready for review April 17, 2025 10:31

weronikaolejniczak requested a review from a team as a code owner April 17, 2025 10:31

weronikaolejniczak added the accessibility label Apr 17, 2025

mgadewoll reviewed Apr 22, 2025

View reviewed changes

packages/eui/changelogs/upcoming/8598.md Outdated Show resolved Hide resolved

packages/eui/src/components/datagrid/body/header/column_sorting.tsx Outdated Show resolved Hide resolved

weronikaolejniczak added 2 commits April 22, 2025 14:36

chore(eui): update changelog

63e1ac1

refactor(eui): rename useAriaSortOnly to hasAriaSortOnly

739d25a

weronikaolejniczak requested a review from mgadewoll April 22, 2025 12:38

Merge branch 'main' into 8522-euidatagrida11y-prevent-duplicate-scree…

8692cd5

…n-reader-output-for-sorted-header-cells

mgadewoll approved these changes Apr 22, 2025

View reviewed changes

weronikaolejniczak merged commit f2ce463 into elastic:main Apr 22, 2025
5 checks passed

mgadewoll mentioned this pull request Apr 25, 2025

[Analytics:Discover page]Duplication of elements announcement elastic/kibana#214104

Closed

This was referenced Apr 28, 2025

Upgrade EUI to v102.0.0 elastic/kibana#219421

Closed

Update EUI to v102.0.0 elastic/kibana#219482

Merged

[8.19] Upgrade EUI to v102.0.0 elastic/kibana#219532

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(eui): remove hasColumnActions from sorting helper text in EuiDataGrid #8598

fix(eui): remove hasColumnActions from sorting helper text in EuiDataGrid #8598

Uh oh!

weronikaolejniczak commented Apr 16, 2025 •

edited by mgadewoll

Loading

Uh oh!

kibanamachine commented Apr 17, 2025

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Apr 22, 2025

Uh oh!

weronikaolejniczak commented Apr 22, 2025

Uh oh!

elasticmachine commented Apr 22, 2025

Uh oh!

mgadewoll left a comment

Uh oh!

elasticmachine commented Apr 22, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

fix(eui): remove hasColumnActions from sorting helper text in EuiDataGrid #8598

fix(eui): remove hasColumnActions from sorting helper text in EuiDataGrid #8598

Uh oh!

Conversation

weronikaolejniczak commented Apr 16, 2025 • edited by mgadewoll Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

Testing notes

Specific checklist

General checklist

Uh oh!

kibanamachine commented Apr 17, 2025

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Apr 22, 2025

Uh oh!

weronikaolejniczak commented Apr 22, 2025

Uh oh!

elasticmachine commented Apr 22, 2025

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Apr 22, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

weronikaolejniczak commented Apr 16, 2025 •

edited by mgadewoll

Loading