diff --git a/src/components/datagrid/body/header/data_grid_header_cell_wrapper.test.tsx b/src/components/datagrid/body/header/data_grid_header_cell_wrapper.test.tsx index 3d4fd903bbea..a1ed1e2a62f1 100644 --- a/src/components/datagrid/body/header/data_grid_header_cell_wrapper.test.tsx +++ b/src/components/datagrid/body/header/data_grid_header_cell_wrapper.test.tsx @@ -52,6 +52,7 @@ describe('EuiDataGridHeaderCellWrapper', () => { data-gridcell-row-index="-1" data-gridcell-visible-row-index="-1" data-test-subj="dataGridHeaderCell-someColumn" + onFocus={[Function]} role="columnheader" style={Object {}} tabIndex={0} @@ -100,6 +101,7 @@ describe('EuiDataGridHeaderCellWrapper', () => { data-gridcell-row-index="-1" data-gridcell-visible-row-index="-1" data-test-subj="dataGridHeaderCell-someColumn" + onFocus={[Function]} role="columnheader" style={ Object { diff --git a/src/components/datagrid/body/header/data_grid_header_cell_wrapper.tsx b/src/components/datagrid/body/header/data_grid_header_cell_wrapper.tsx index fc969865f615..fde48ab06201 100644 --- a/src/components/datagrid/body/header/data_grid_header_cell_wrapper.tsx +++ b/src/components/datagrid/body/header/data_grid_header_cell_wrapper.tsx @@ -9,6 +9,7 @@ import classnames from 'classnames'; import React, { FunctionComponent, + FocusEventHandler, useContext, useEffect, useRef, @@ -64,12 +65,23 @@ export const EuiDataGridHeaderCellWrapper: FunctionComponent< } }, [isFocused]); + // For cell headers with actions, auto-focus into the button instead of the cell wrapper div + // The button text is significantly more useful to screen readers (e.g. contains sort order & hints) + const onFocus: FocusEventHandler = useCallback( + (e) => { + if (hasActionsPopover && e.target === headerRef.current) { + focusActionsButton?.(); + } + }, + [hasActionsPopover, focusActionsButton] + ); + return (