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 (
{ { id: 'no_interactive_expandable', display: '0 interactive', - actions: false, }, { id: 'one_interactive', display: '1 interactive', isExpandable: false, - actions: false, }, { id: 'one_interactive_expandable', display: '1 interactive', - actions: false, }, { id: 'two_interactives', display: '2 interactives', isExpandable: false, - actions: false, }, { id: 'two_interactives_expandable', display: '2 interactives', - actions: false, }, ]; const columnVisibility = { @@ -436,6 +431,28 @@ describe('EuiDataGrid', () => { .should('have.attr', 'data-gridcell-column-index', '5') .should('have.attr', 'data-gridcell-row-index', '0'); }); + + it('column header cells', () => { + cy.realMount(); + cy.repeatRealPress('Tab', 5); + cy.realPress('{rightarrow}'); + cy.focused() + .parent() + .should('have.attr', 'data-gridcell-column-index', '1') + .should('have.attr', 'data-gridcell-row-index', '-1'); + + cy.realPress('Enter'); + cy.get( + '[data-test-subj="dataGridHeaderCellActionGroup-no_interactive_expandable"]' + ).should('be.visible'); + + cy.realPress('Tab'); + cy.focused().should('have.text', 'Hide column'); + cy.realPress('Tab'); + cy.focused().should('have.text', 'Move left'); + cy.realPress('Tab'); + cy.focused().should('have.text', 'Move right'); + }); }); });