Skip to content

[EuiDataGrid][A11y] Add contextual aria-label to column selector drag handle #9282

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 2 commits into from
Jan 13, 2026
+87 −76
Merged

[EuiDataGrid][A11y] Add contextual aria-label to column selector drag handle #9282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a8ea0a0
refactor(dataGrid): make column selector drag handle label more acces…
mgadewoll Dec 19, 2025
d9f5845
chore: add changelog
mgadewoll Dec 19, 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/9282.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
**Accessibility**

- Improved the accessibility of `EuiDataGrid`s column selector drag handle buttons by ensuring distinctive labels

4 changes: 2 additions & 2 deletions packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
</div>
<div
aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
aria-label="Drag handle"
aria-label="columnA drag handle"
class="euiFlexItem emotion-euiFlexItem-growZero"
data-rfd-drag-handle-context-id=":r0:"
data-rfd-drag-handle-draggable-id="columnA"
Expand Down Expand Up @@ -220,7 +220,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
</div>
<div
aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
aria-label="Drag handle"
aria-label="columnB drag handle"
class="euiFlexItem emotion-euiFlexItem-growZero"
data-rfd-drag-handle-context-id=":r0:"
data-rfd-drag-handle-draggable-id="columnB"
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/datagrid/controls/column_selector.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ describe('useDataGridColumnSelector', () => {
);
fireEvent.click(getByTestSubject('dataGridColumnSelectorButton'));
waitForEuiPopoverOpen();
const getDragHandles = () => getAllByLabelText('Drag handle');
const getDragHandles = () => getAllByLabelText(/drag handle/);

const columnA = getDragHandles()[0]!;
expect(columnA).toHaveAttribute(
Expand Down
153 changes: 80 additions & 73 deletions packages/eui/src/components/datagrid/controls/column_selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export const useDataGridColumnSelector = (
const isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
const dragHandleAriaLabel = useEuiI18n(
'euiColumnSelector.dragHandleAriaLabel',
'Drag handle'
'drag handle'
);

const orderedVisibleColumns = useMemo(
Expand Down Expand Up @@ -235,84 +235,91 @@ export const useDataGridColumnSelector = (
css={styles.euiDataGridColumnSelector}
>
<>
{filteredColumns.map((id, index) => (
<EuiDraggable
key={id}
draggableId={id}
index={index}
isDragDisabled={!isDragEnabled}
hasInteractiveChildren
customDragHandle
usePortal
>
{(provided, state) => (
<div
css={styles.euiDataGridColumnSelector__item}
className={classNames('euiDataGridColumnSelector__item', {
'euiDataGridColumnSelector__item-isDragging':
state.isDragging,
})}
data-test-subj={`dataGridColumnSelectorColumnItem-${id}`}
>
<EuiFlexGroup
responsive={false}
gutterSize="s"
alignItems="center"
>
{allowColumnHiding && (
<EuiFlexItem grow={false}>
<EuiSwitch
name={id}
label={displayValues[id] || id}
showLabel={false}
checked={visibleColumnIds.has(id)}
mini
onChange={(event) => {
const {
target: { checked },
} = event;
const nextVisibleColumns = sortedColumns.filter(
(columnId) =>
checked
? visibleColumnIds.has(columnId) ||
id === columnId
: visibleColumnIds.has(columnId) &&
id !== columnId
);
setVisibleColumns(nextVisibleColumns);
}}
data-test-subj={`dataGridColumnSelectorToggleColumnVisibility-${id}`}
/>
</EuiFlexItem>
{filteredColumns.map((id, index) => {
const label = displayValues[id] || id;

return (
<EuiDraggable
key={id}
draggableId={id}
index={index}
isDragDisabled={!isDragEnabled}
hasInteractiveChildren
customDragHandle
usePortal
>
{(provided, state) => (
<div
css={styles.euiDataGridColumnSelector__item}
className={classNames(
'euiDataGridColumnSelector__item',
{
'euiDataGridColumnSelector__item-isDragging':
state.isDragging,
}
)}
<EuiFlexItem
// This extra column name flex item affords the column more grabbable real estate
// for mouse users, while hiding repetition for keyboard/screen reader users
{...provided.dragHandleProps}
aria-hidden
tabIndex={-1}
data-test-subj={`dataGridColumnSelectorColumnItem-${id}`}
>
<EuiFlexGroup
responsive={false}
gutterSize="s"
alignItems="center"
>
<EuiText
size="xs"
className="euiDataGridColumnSelector__itemLabel"
>
{displayValues[id] || id}
</EuiText>
</EuiFlexItem>
{isDragEnabled && (
{allowColumnHiding && (
<EuiFlexItem grow={false}>
<EuiSwitch
name={id}
label={label}
showLabel={false}
checked={visibleColumnIds.has(id)}
mini
onChange={(event) => {
const {
target: { checked },
} = event;
const nextVisibleColumns =
sortedColumns.filter((columnId) =>
checked
? visibleColumnIds.has(columnId) ||
id === columnId
: visibleColumnIds.has(columnId) &&
id !== columnId
);
setVisibleColumns(nextVisibleColumns);
}}
data-test-subj={`dataGridColumnSelectorToggleColumnVisibility-${id}`}
/>
</EuiFlexItem>
)}
<EuiFlexItem
grow={false}
// This extra column name flex item affords the column more grabbable real estate
// for mouse users, while hiding repetition for keyboard/screen reader users
{...provided.dragHandleProps}
aria-label={dragHandleAriaLabel}
aria-hidden
tabIndex={-1}
>
<EuiIcon type="grab" color="subdued" />
<EuiText
size="xs"
className="euiDataGridColumnSelector__itemLabel"
>
{label}
</EuiText>
</EuiFlexItem>
)}
</EuiFlexGroup>
</div>
)}
</EuiDraggable>
))}
{isDragEnabled && (
<EuiFlexItem
grow={false}
{...provided.dragHandleProps}
aria-label={`${label} ${dragHandleAriaLabel}`}
>
<EuiIcon type="grab" color="subdued" />
</EuiFlexItem>
)}
</EuiFlexGroup>
</div>
)}
</EuiDraggable>
);
})}
</>
</EuiDroppable>
</EuiDragDropContext>
Expand Down