Skip to content

[EuiDataGrid] Remove aria-hidden from column actions button #9166

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

Merged
mgadewoll merged 8 commits into from
Nov 5, 2025
Merged

[EuiDataGrid] Remove aria-hidden from column actions button #9166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
358e9db
refactor: use aria-labelledby to link cell content for screen readers
mgadewoll Nov 1, 2025
50194a2
refactor: collapse action buttons with transform and negative margin …
mgadewoll Nov 1, 2025
4019874
test: update cypress test
mgadewoll Nov 1, 2025
11976c8
test: update snapshots
mgadewoll Nov 1, 2025
3fa91fe
chore: add changelog
mgadewoll Nov 1, 2025
7c755d4
refactor: rename classes, add shared style helper
mgadewoll Nov 4, 2025
458e6cc
test: update snapshots
mgadewoll Nov 4, 2025
e69ac90
style: update comment
mgadewoll Nov 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/eui/changelogs/upcoming/9166.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
**Accessibility**

- Removed `aria-hidden` on `EuiDataGrid`s column header actions button to prevent accessibility warnings

31 changes: 23 additions & 8 deletions packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -617,7 +617,9 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="A"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-A"
title="A"
>
A
Expand All @@ -627,7 +629,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-A"
tabindex="-1"
Expand Down Expand Up @@ -666,7 +668,9 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="B"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-B"
title="B"
>
B
Expand All @@ -676,7 +680,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-B"
tabindex="-1"
Expand Down Expand Up @@ -1072,7 +1076,9 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="A"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-A"
title="A"
>
A
Expand All @@ -1082,7 +1088,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-A"
tabindex="-1"
Expand Down Expand Up @@ -1121,7 +1127,9 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="B"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-B"
title="B"
>
B
Expand All @@ -1131,7 +1139,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-B"
tabindex="-1"
Expand Down Expand Up @@ -1680,7 +1688,9 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="Column A"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-A"
title="A"
>
Column A
Expand All @@ -1690,7 +1700,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-A"
tabindex="-1"
Expand Down Expand Up @@ -1730,6 +1740,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
/>
<div
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-B"
title="B"
>
<div>
Expand All @@ -1741,7 +1752,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-B"
tabindex="-1"
Expand Down Expand Up @@ -2112,7 +2123,9 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="A"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-A"
title="A"
>
A
Expand All @@ -2122,7 +2135,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-A"
tabindex="-1"
Expand Down Expand Up @@ -2161,7 +2174,9 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="B"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-B"
title="B"
>
B
Expand All @@ -2171,7 +2186,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-B"
tabindex="-1"
Expand Down
8 changes: 6 additions & 2 deletions packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,9 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="columnA"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-columnA"
title="columnA"
>
columnA
Expand All @@ -36,7 +38,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-columnA"
tabindex="-1"
Expand Down Expand Up @@ -75,7 +77,9 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="columnB"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-columnB"
title="columnB"
>
columnB
Expand All @@ -85,7 +89,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-columnB"
tabindex="-1"
Expand Down
8 changes: 6 additions & 2 deletions ...s/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="columnA"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-columnA"
title="columnA"
>
columnA
Expand All @@ -40,7 +42,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-columnA"
tabindex="-1"
Expand Down Expand Up @@ -79,7 +81,9 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="columnB"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content"
id="dataGridHeaderCellContent-columnB"
title="columnB"
>
columnB
Expand All @@ -89,7 +93,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-columnB"
tabindex="-1"
Expand Down
4 changes: 3 additions & 1 deletion packages/eui/src/components/datagrid/body/cell/data_grid_cell.styles.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,9 @@ describe('Cell outline styles', () => {
});

cy.realMount(<EuiDataGrid {...baseProps} />);
getActionsWidth().then((width) => expect(width).to.eq(0));
/* Uses <1 instead of =0 since we scale to 0.01.
Nonzero size keeps the element on the accessibility tree. */
getActionsWidth().then((width) => expect(width).to.be.lessThan(1));

// Hovering over the header cell should slide in the actions from the right
getHeaderCell().realHover();
Expand Down
3 changes: 1 addition & 2 deletions packages/eui/src/components/datagrid/body/header/__snapshots__/column_actions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,8 @@ exports[`ColumnActions renders 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-test-subj="dataGridHeaderCellActionButton-someColumn"
tabindex="0"
type="button"
>
<span
Expand Down
4 changes: 3 additions & 1 deletion ...eui/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
data-test-subj="dataGridColumnResizer"
/>
<div
aria-label="someColumn"
class="euiDataGridHeaderCell__content emotion-euiDataGridHeaderCell__content-right"
id="dataGridHeaderCellContent-someColumn"
title="someColumn"
>
someColumn
Expand All @@ -28,7 +30,7 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
>
<button
aria-label="Press the Enter key to view this column's actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-euiDataGridHeaderCell__actions"
class="euiButtonIcon euiDataGridHeaderCell__button emotion-euiButtonIcon-xs-empty-text-action-end-ColumnActions"
data-euigrid-tab-managed="true"
data-test-subj="dataGridHeaderCellActionButton-someColumn"
tabindex="-1"
Expand Down
17 changes: 4 additions & 13 deletions packages/eui/src/components/datagrid/body/header/column_actions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,10 +113,6 @@ export const ColumnActions: FunctionComponent<
setIsPopoverOpen(false);
}, []);

const [isActionsButtonFocused, setIsActionsButtonFocused] = useState(false);
const onFocus = useCallback(() => setIsActionsButtonFocused(true), []);
const onBlur = useCallback(() => setIsActionsButtonFocused(false), []);

const actionsButtonAriaLabel = useEuiI18n(
'euiDataGridHeaderCell.actionsButtonAriaLabel',
'{title}. Click to view column header actions.',
Expand Down Expand Up @@ -204,23 +200,18 @@ export const ColumnActions: FunctionComponent<
iconType="boxesVertical"
iconSize="s"
color="text"
css={styles.euiDataGridHeaderCell__actions}
className="euiDataGridHeaderCell__button"
onClick={togglePopover}
buttonRef={actionsButtonRef}
onFocus={onFocus}
onBlur={onBlur}
tabIndex={0} // Override EuiButtonIcon's conditional tabindex based on aria-hidden
aria-hidden={
hasFocusTrap && !isActionsButtonFocused
? 'true' // prevent the actions button from being read on cell focus
: undefined
}
aria-label={
hasFocusTrap
? actionsButtonAriaLabel
: actionsEnterKeyInstructions
}
css={[
styles.euiDataGridHeaderCell__actions.action,
styles.euiDataGridHeaderCell__actions.end,
]}
data-test-subj={`dataGridHeaderCellActionButton-${id}`}
/>
}
Expand Down
53 changes: 35 additions & 18 deletions packages/eui/src/components/datagrid/body/header/data_grid_header_cell.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
logicalTextAlignCSS,
} from '../../../../global_styling';
import { euiDataGridCellOutlineSelectors } from '../cell/data_grid_cell.styles';
import { CSSProperties } from '@emotion/serialize';

/**
* Styles only applied to data header cell content, not control header cells
Expand All @@ -24,6 +25,18 @@ export const euiDataGridHeaderCellStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
const { header } = euiDataGridCellOutlineSelectors('.euiDataGridHeaderCell');

const hideAnimation = (
margin: CSSProperties['margin'],
translateX: string
) => `
${header.hideActions} & {
${logicalCSS('margin-left', margin)}
transform: translateX(${translateX}) scale(0.01);
opacity: 0;
pointer-events: none;
}
`;

return {
euiDataGridHeaderCell__content: css`
flex-grow: 1; /* ensures content stretches and allows for manual layout styles to apply */
Expand All @@ -40,23 +53,27 @@ export const euiDataGridHeaderCellStyles = (euiThemeContext: UseEuiTheme) => {
/* Remove inline struts from EuiButtonIcon */
line-height: 0;
`,
euiDataGridHeaderCell__actions: css`
overflow: hidden;
display: flex;

${header.hideActions} & {
${logicalCSS('width', 0)}
Copy link
Contributor Author

@mgadewoll mgadewoll Nov 1, 2025

Choose a reason for hiding this comment

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

The transition to width=0 would result in screen readers not being able to detect the element, even after the transition back to full width. Likely the CSS transition doesn't trigger an update on the a11y tree, meaning the element is initially not present and stays that way.

The proposed workaround uses transform instead and uses negative margins to ensure the element collapses within the flex container to ensure parity with the existing show/hide behavior for header cells.

Copy link
Contributor

@weronikaolejniczak weronikaolejniczak Nov 3, 2025

Choose a reason for hiding this comment

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

Cool idea! 👍🏻

opacity: 0;
}

${euiCanAnimate} {
transition: inline-size ${euiTheme.animation.fast} ease-in,
opacity ${euiTheme.animation.slow} ease-in;

/* Unset EuiButtonIcon animations */
transform: none !important; /* stylelint-disable-line declaration-no-important */
animation: none !important; /* stylelint-disable-line declaration-no-important */
}
`,
euiDataGridHeaderCell__actions: {
action: css`
overflow: hidden;
display: flex;
max-inline-size: 24px;

${euiCanAnimate} {
transition: transform ${euiTheme.animation.fast} ease-in,
opacity ${euiTheme.animation.slow} ease-in,
margin-left ${euiTheme.animation.fast} ease-in;

/* Unset EuiButtonIcon animations */
animation: none !important; /* stylelint-disable-line declaration-no-important */
}
`,
start: css`
${hideAnimation(`-${euiTheme.size.m}`, '0%')}
`,
end: css`
${hideAnimation(`-${euiTheme.size.l}`, '50%')}
`,
},
};
};
Loading