diff --git a/src/components/button/button_display/_button_display.test.tsx b/src/components/button/button_display/_button_display.test.tsx index 559982504a1..229b3ac1d96 100644 --- a/src/components/button/button_display/_button_display.test.tsx +++ b/src/components/button/button_display/_button_display.test.tsx @@ -55,7 +55,7 @@ describe('EuiButtonDisplay', () => { }); describe('element', () => { - const elements = ['a', 'button', 'span', 'label'] as const; + const elements = ['a', 'button', 'span'] as const; const getButtonElement = (container: HTMLElement) => container.firstChild!.nodeName.toLowerCase(); @@ -74,7 +74,7 @@ describe('EuiButtonDisplay', () => { it('always renders a `button` element if disabled', () => { const { container } = render( - + Content ); diff --git a/src/components/button/button_display/_button_display.tsx b/src/components/button/button_display/_button_display.tsx index 679bd04d118..8fee8d3b81e 100644 --- a/src/components/button/button_display/_button_display.tsx +++ b/src/components/button/button_display/_button_display.tsx @@ -43,7 +43,7 @@ export type EuiButtonDisplaySizes = (typeof SIZES)[number]; export interface EuiButtonDisplayCommonProps extends EuiButtonDisplayContentProps, CommonProps { - element?: 'a' | 'button' | 'span' | 'label'; + element?: 'a' | 'button' | 'span'; children?: ReactNode; size?: EuiButtonDisplaySizes; /** diff --git a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap index 9ec988b6cbf..3b3e3aab7b6 100644 --- a/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap +++ b/src/components/button/button_group/__snapshots__/button_group.test.tsx.snap @@ -92,8 +92,9 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl
- -
@@ -442,7 +429,8 @@ exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar but
- -
@@ -732,7 +706,8 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but
- -
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap index a9945b92ae2..23050b9a8fa 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap @@ -87,7 +87,8 @@ exports[`EuiDataGridColumnSortingDraggable [React 16] renders an EuiDraggable co
- -
@@ -246,7 +233,8 @@ exports[`EuiDataGridColumnSortingDraggable [React 17] renders an EuiDraggable co
- -
@@ -405,7 +379,8 @@ exports[`EuiDataGridColumnSortingDraggable [React 18] renders an EuiDraggable co
- -
diff --git a/src/components/datagrid/controls/column_sorting_draggable.test.tsx b/src/components/datagrid/controls/column_sorting_draggable.test.tsx index 32bc2378214..0f275b4a79c 100644 --- a/src/components/datagrid/controls/column_sorting_draggable.test.tsx +++ b/src/components/datagrid/controls/column_sorting_draggable.test.tsx @@ -83,7 +83,9 @@ describe('EuiDataGridColumnSortingDraggable', () => { ); - fireEvent.click(getByTestSubject('columnADesc')); + fireEvent.click( + getByTestSubject('euiDataGridColumnSorting-sortColumn-columnA-desc') + ); expect(onSort).toHaveBeenCalledWith([{ id: 'columnA', direction: 'desc' }]); }); diff --git a/src/components/datagrid/controls/display_selector.test.tsx b/src/components/datagrid/controls/display_selector.test.tsx index 3fd034d88bc..6699a50d09b 100644 --- a/src/components/datagrid/controls/display_selector.test.tsx +++ b/src/components/datagrid/controls/display_selector.test.tsx @@ -77,12 +77,11 @@ describe('useDataGridDisplaySelector', () => { const component = mount(); openPopover(component); - // Click density 'buttons' (actually hidden radios) - component.find('[data-test-subj="expanded"]').simulate('change'); + component.find('button[data-test-subj="expanded"]').simulate('click'); expect(getSelection(component)).toEqual('expanded'); - component.find('[data-test-subj="normal"]').simulate('change'); + component.find('button[data-test-subj="normal"]').simulate('click'); expect(getSelection(component)).toEqual('normal'); - component.find('[data-test-subj="compact"]').simulate('change'); + component.find('button[data-test-subj="compact"]').simulate('click'); expect(getSelection(component)).toEqual('compact'); }); @@ -95,7 +94,7 @@ describe('useDataGridDisplaySelector', () => { ); openPopover(component); - component.find('[data-test-subj="expanded"]').simulate('change'); + component.find('button[data-test-subj="expanded"]').simulate('click'); expect(onDensityChange).toHaveBeenCalledWith({ stripes: true, @@ -168,7 +167,7 @@ describe('useDataGridDisplaySelector', () => { openPopover(component); expect(getSelection(component)).toEqual('expanded'); - component.find('[data-test-subj="compact"]').simulate('change'); + component.find('button[data-test-subj="compact"]').simulate('click'); expect(getSelection(component)).toEqual('compact'); component @@ -189,7 +188,7 @@ describe('useDataGridDisplaySelector', () => { openPopover(component); expect(getSelection(component)).toEqual('undefined'); - component.find('[data-test-subj="auto"]').simulate('change'); + component.find('button[data-test-subj="auto"]').simulate('click'); expect(getSelection(component)).toEqual('auto'); }); @@ -202,7 +201,7 @@ describe('useDataGridDisplaySelector', () => { ); openPopover(component); - component.find('[data-test-subj="auto"]').simulate('change'); + component.find('button[data-test-subj="auto"]').simulate('click'); expect(onRowHeightChange).toHaveBeenCalledWith({ rowHeights: {}, @@ -287,7 +286,7 @@ describe('useDataGridDisplaySelector', () => { openPopover(component); expect(getSelection(component)).toEqual('undefined'); - component.find('[data-test-subj="auto"]').simulate('change'); + component.find('button[data-test-subj="auto"]').simulate('click'); expect(getSelection(component)).toEqual('auto'); component @@ -322,7 +321,9 @@ describe('useDataGridDisplaySelector', () => { component.find('[data-test-subj="lineCountNumber"]').exists() ).toBe(false); - component.find('[data-test-subj="lineCount"]').simulate('change'); + component + .find('button[data-test-subj="lineCount"]') + .simulate('click'); expect(getSelection(component)).toEqual('lineCount'); expect( @@ -344,7 +345,9 @@ describe('useDataGridDisplaySelector', () => { it('defaults to a lineCount of 2 when no developer settings have been passed', () => { const component = mount(); openPopover(component); - component.find('[data-test-subj="lineCount"]').simulate('change'); + component + .find('button[data-test-subj="lineCount"]') + .simulate('click'); expect(getLineCountNumber(component)).toEqual(2); }); @@ -408,8 +411,8 @@ describe('useDataGridDisplaySelector', () => { component.find('[data-test-subj="resetDisplaySelector"]').exists() ).toBe(false); - component.find('[data-test-subj="expanded"]').simulate('change'); - component.find('[data-test-subj="auto"]').simulate('change'); + component.find('button[data-test-subj="expanded"]').simulate('click'); + component.find('button[data-test-subj="auto"]').simulate('click'); expect( component.find('[data-test-subj="resetDisplaySelector"]').exists() ).toBe(true); @@ -444,8 +447,8 @@ describe('useDataGridDisplaySelector', () => { component.find('[data-test-subj="resetDisplaySelector"]').exists() ).toBe(false); - component.find('[data-test-subj="expanded"]').simulate('change'); - component.find('[data-test-subj="auto"]').simulate('change'); + component.find('button[data-test-subj="expanded"]').simulate('click'); + component.find('button[data-test-subj="auto"]').simulate('click'); expect( component.find('[data-test-subj="resetDisplaySelector"]').exists() ).toBe(false); diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index c6c48e0fa77..1996aa7edbc 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -188,7 +188,7 @@ function getColumnSortDirection( expect(columnSorter.length).toBe(1); const activeSort = columnSorter.find( - 'label[className*="euiButtonGroupButton-isSelected"]' + 'button[className*="euiButtonGroupButton-isSelected"]' ); const sortDirection = ( @@ -276,10 +276,10 @@ function sortByColumn( if (currentSortDirection !== direction) { const sortButton = columnSorter.find( - `label[data-test-subj="euiDataGridColumnSorting-sortColumn-${columnId}-${direction}"]` + `button[data-test-subj="euiDataGridColumnSorting-sortColumn-${columnId}-${direction}"]` ); expect(sortButton.length).toBe(1); - sortButton.find('input').simulate('change', [undefined, direction]); + sortButton.simulate('click'); } closeColumnSorter(datagrid); diff --git a/src/global_styling/mixins/__snapshots__/_states.test.ts.snap b/src/global_styling/mixins/__snapshots__/_states.test.ts.snap index 80065bc3b6d..cf3a2c12098 100644 --- a/src/global_styling/mixins/__snapshots__/_states.test.ts.snap +++ b/src/global_styling/mixins/__snapshots__/_states.test.ts.snap @@ -34,6 +34,23 @@ exports[`useEuiFocusRing hook returns a string for each offset: 16px 1`] = ` " `; +exports[`useEuiFocusRing hook returns a string for each offset: center 1`] = ` +" + outline: 2px solid currentColor; + outline-offset: -1px; + + // 👀 Chrome respects :focus-visible and allows coloring the \`auto\` style + &:focus-visible { + outline-style: auto; + } + + // 🙅‍♀️ But Chrome also needs to have the outline forcefully removed from regular \`:focus\` state + &:not(:focus-visible) { + outline: none; + } + " +`; + exports[`useEuiFocusRing hook returns a string for each offset: inset 1`] = ` " outline: 2px solid currentColor; diff --git a/src/global_styling/mixins/_states.test.ts b/src/global_styling/mixins/_states.test.ts index c00026ca290..b40b4958cb0 100644 --- a/src/global_styling/mixins/_states.test.ts +++ b/src/global_styling/mixins/_states.test.ts @@ -23,6 +23,12 @@ describe('useEuiFocusRing hook returns a string', () => { ).toMatchSnapshot(); }); + it('center', () => { + expect( + renderHook(() => useEuiFocusRing('center')).result.current + ).toMatchSnapshot(); + }); + it('16px', () => { expect( renderHook(() => useEuiFocusRing('16px')).result.current diff --git a/src/global_styling/mixins/_states.ts b/src/global_styling/mixins/_states.ts index 846a5c1f796..9f70306420d 100644 --- a/src/global_styling/mixins/_states.ts +++ b/src/global_styling/mixins/_states.ts @@ -8,6 +8,7 @@ import { CSSProperties } from 'react'; import { useEuiTheme, UseEuiTheme } from '../../services'; +import { mathWithUnits } from '../functions'; export type _EuiFocusRingOffset = | 'inset' @@ -39,7 +40,7 @@ export const euiOutline = ( } else if (offset === 'outset') { outlineOffset = `${outlineWidth}`; } else if (offset === 'center') { - outlineOffset = `calc(${outlineWidth} / -2);`; + outlineOffset = mathWithUnits(outlineWidth, (x) => x / -2); } // This is a separate function from `euiFocusRing` because some EUI components diff --git a/upcoming_changelogs/7325.md b/upcoming_changelogs/7325.md new file mode 100644 index 00000000000..ec52108950d --- /dev/null +++ b/upcoming_changelogs/7325.md @@ -0,0 +1,7 @@ +**Accessibility** + +- Updated `type="single"` `EuiButtonGroup`s to render standard buttons instead of radio buttons under the hood, per recent a11y recommendations + +**Deprecations** + +- Deprecated `EuiButtonGroup`'s `name` prop. This can safely be removed.