diff --git a/packages/eui/changelogs/upcoming/9282.md b/packages/eui/changelogs/upcoming/9282.md new file mode 100644 index 00000000000..4e42e8c3ad1 --- /dev/null +++ b/packages/eui/changelogs/upcoming/9282.md @@ -0,0 +1,4 @@ +**Accessibility** + +- Improved the accessibility of `EuiDataGrid`s column selector drag handle buttons by ensuring distinctive labels + diff --git a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap index bc3d63f1d94..fa23b57319d 100644 --- a/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap +++ b/packages/eui/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap @@ -147,7 +147,7 @@ exports[`useDataGridColumnSelector columnSelector renders a toolbar button/popov
{ ); fireEvent.click(getByTestSubject('dataGridColumnSelectorButton')); waitForEuiPopoverOpen(); - const getDragHandles = () => getAllByLabelText('Drag handle'); + const getDragHandles = () => getAllByLabelText(/drag handle/); const columnA = getDragHandles()[0]!; expect(columnA).toHaveAttribute( diff --git a/packages/eui/src/components/datagrid/controls/column_selector.tsx b/packages/eui/src/components/datagrid/controls/column_selector.tsx index 51a59de176f..c50c473a495 100644 --- a/packages/eui/src/components/datagrid/controls/column_selector.tsx +++ b/packages/eui/src/components/datagrid/controls/column_selector.tsx @@ -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( @@ -235,84 +235,91 @@ export const useDataGridColumnSelector = ( css={styles.euiDataGridColumnSelector} > <> - {filteredColumns.map((id, index) => ( - - {(provided, state) => ( -
- - {allowColumnHiding && ( - - { - 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}`} - /> - + {filteredColumns.map((id, index) => { + const label = displayValues[id] || id; + + return ( + + {(provided, state) => ( +
+ - - {displayValues[id] || id} - - - {isDragEnabled && ( + {allowColumnHiding && ( + + { + 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}`} + /> + + )} - + + {label} + - )} - -
- )} -
- ))} + {isDragEnabled && ( + + + + )} +
+
+ )} +
+ ); + })}