diff --git a/src/components/accessibility/_index.scss b/src/components/accessibility/_index.scss deleted file mode 100644 index 0e3753cf935..00000000000 --- a/src/components/accessibility/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'screen_reader_only/screen_reader_only'; diff --git a/src/components/accessibility/screen_reader_live/__snapshots__/screen_reader_live.test.tsx.snap b/src/components/accessibility/screen_reader_live/__snapshots__/screen_reader_live.test.tsx.snap index 41dd2c3fbcd..f69ffba8254 100644 --- a/src/components/accessibility/screen_reader_live/__snapshots__/screen_reader_live.test.tsx.snap +++ b/src/components/accessibility/screen_reader_live/__snapshots__/screen_reader_live.test.tsx.snap @@ -2,7 +2,7 @@ exports[`EuiScreenReaderLive with a static configuration accepts \`aria-live\` 1`] = `
- Number of active options: - 0 -
-+ Number of active options: 0 +
+This paragraph is not visibile to sighted users but will be read by screenreaders.
@@ -18,7 +18,7 @@ exports[`EuiScreenReaderOnly adds an accessibility class to a child element when exports[`EuiScreenReaderOnly will show on focus 1`] = ` Link diff --git a/src/components/accessibility/screen_reader_only/_screen_reader_only.scss b/src/components/accessibility/screen_reader_only/_screen_reader_only.scss deleted file mode 100644 index 92fe2a7d8f8..00000000000 --- a/src/components/accessibility/screen_reader_only/_screen_reader_only.scss +++ /dev/null @@ -1,5 +0,0 @@ -// The `:active` selector is necessary for Safari which removes `:focus` when a button is pressed -.euiScreenReaderOnly, -.euiScreenReaderOnly--showOnFocus:not(:focus):not(:active) { - @include euiScreenReaderOnly; -} diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts index 59668a92479..11fd550445b 100644 --- a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts +++ b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts @@ -6,6 +6,8 @@ * Side Public License, v 1. */ +import { css } from '@emotion/react'; + /* * Mixin that hides elements offscreen to only be read by screen reader * See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info @@ -28,3 +30,17 @@ export const euiScreenReaderOnly = () => ` // Chrome requires the negative margin to not cause overflows of parent containers margin: -1px; `; + +/* + * Styles + */ +export const euiScreenReaderOnlyStyles = (showOnFocus?: boolean) => ({ + euiScreenReaderOnly: showOnFocus + ? css` + // The :active selector is necessary for Safari which removes :focus when a button is pressed + &:not(:focus):not(:active) { + ${euiScreenReaderOnly()} + } + ` + : css(euiScreenReaderOnly()), +}); diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx index 9f9df8f62fa..2893915e6d3 100644 --- a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx +++ b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx @@ -6,37 +6,39 @@ * Side Public License, v 1. */ -import { cloneElement, ReactElement, FunctionComponent } from 'react'; +import { ReactElement, FunctionComponent } from 'react'; import classNames from 'classnames'; +import { cloneElementWithCss } from '../../../services/theme/clone_element'; +import { euiScreenReaderOnlyStyles } from './screen_reader_only.styles'; + export interface EuiScreenReaderOnlyProps { /** * ReactElement to render as this component's content */ - children: ReactElement
+
+
+
+
+
-
-
-
-
-
-
-
- |
+ + + + Name + + + description + + + | +||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
+
+
-
-
-
-
+
-
+
|
+ |||||||||||
+
+
+
+
+
+
+ |
+
+
+ Name
+
+
+
+ name3
+
+
+ |
+
-
-
-
-
-
-
- |
-
- |
-
---|---|
-
-
-
-
-
-
- |
-
-
- Name
-
-
-
- name1
-
-
- |
-
-
-
-
-
-
-
- |
-
-
- Name
-
-
-
- name2
-
-
- |
-
-
-
-
-
-
-
- |
-
-
- Name
-
-
-
- name3
-
-
- |
-
There is a new region landmark with page level controls at the end of the document.
, @@ -32,14 +32,14 @@ Array [ style="left:0;right:0;bottom:0" >There is a new region landmark with page level controls at the end of the document.
, @@ -53,7 +53,7 @@ exports[`EuiBottomBar props bodyClassName is rendered 1`] = ` style="left: 0px; right: 0px; bottom: 0px;" >There is a new region landmark called This should have been label with page level controls at the end of the document.
, @@ -90,14 +90,14 @@ Array [ style="left:0;right:0;bottom:0" >There is a new region landmark with page level controls at the end of the document.
, @@ -112,14 +112,14 @@ Array [ style="left:0;right:0;bottom:0" >There is a new region landmark with page level controls at the end of the document.
, @@ -134,14 +134,14 @@ Array [ style="left:0;right:0;bottom:0" >There is a new region landmark with page level controls at the end of the document.
, @@ -156,14 +156,14 @@ Array [ style="left:0;right:0;bottom:0" >There is a new region landmark with page level controls at the end of the document.
, @@ -178,14 +178,14 @@ Array [ style="left:0;right:0;bottom:0" >There is a new region landmark with page level controls at the end of the document.
, @@ -200,14 +200,14 @@ Array [ style="left:30px;right:30px;bottom:30px;top:30px" >There is a new region landmark with page level controls at the end of the document.
, @@ -222,14 +222,14 @@ Array [ style="left:0;right:0;bottom:0" >There is a new region landmark with page level controls at the end of the document.
, @@ -244,14 +244,14 @@ Array [ style="left:0;right:0;bottom:0" >There is a new region landmark with page level controls at the end of the document.
, @@ -266,14 +266,14 @@ Array [ style="left:12px;right:0;bottom:0" >There is a new region landmark with page level controls at the end of the document.
, @@ -288,14 +288,14 @@ Array [ style="left:0;right:0;bottom:0" >There is a new region landmark with page level controls at the end of the document.
, 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 1efba751f7e..4544cf7a5cb 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 @@ -5,7 +5,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for multi class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text" > @@ -89,7 +89,7 @@ exports[`EuiButtonGroup button props buttonSize compressed is rendered for singl class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text" > @@ -182,7 +182,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text" > @@ -266,7 +266,7 @@ exports[`EuiButtonGroup button props buttonSize m is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--medium euiButtonGroup--text" > @@ -359,7 +359,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > @@ -443,7 +443,7 @@ exports[`EuiButtonGroup button props buttonSize s is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > @@ -536,7 +536,7 @@ exports[`EuiButtonGroup button props color accent is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--accent" > @@ -620,7 +620,7 @@ exports[`EuiButtonGroup button props color accent is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--accent" > @@ -713,7 +713,7 @@ exports[`EuiButtonGroup button props color danger is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger" > @@ -797,7 +797,7 @@ exports[`EuiButtonGroup button props color danger is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--danger" > @@ -890,7 +890,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost" > @@ -974,7 +974,7 @@ exports[`EuiButtonGroup button props color ghost is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--ghost" > @@ -1067,7 +1067,7 @@ exports[`EuiButtonGroup button props color primary is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary" > @@ -1151,7 +1151,7 @@ exports[`EuiButtonGroup button props color primary is rendered for single 1`] = class="euiButtonGroup euiButtonGroup--small euiButtonGroup--primary" > @@ -1244,7 +1244,7 @@ exports[`EuiButtonGroup button props color success is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--success" > @@ -1328,7 +1328,7 @@ exports[`EuiButtonGroup button props color success is rendered for single 1`] = class="euiButtonGroup euiButtonGroup--small euiButtonGroup--success" > @@ -1421,7 +1421,7 @@ exports[`EuiButtonGroup button props color text is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > @@ -1505,7 +1505,7 @@ exports[`EuiButtonGroup button props color text is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > @@ -1598,7 +1598,7 @@ exports[`EuiButtonGroup button props color warning is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning" > @@ -1682,7 +1682,7 @@ exports[`EuiButtonGroup button props color warning is rendered for single 1`] = class="euiButtonGroup euiButtonGroup--small euiButtonGroup--warning" > @@ -1776,7 +1776,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for multi 1`] = ` disabled="" > @@ -1863,7 +1863,7 @@ exports[`EuiButtonGroup button props isDisabled is rendered for single 1`] = ` disabled="" > @@ -1949,7 +1949,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth" > @@ -2033,7 +2033,7 @@ exports[`EuiButtonGroup button props isFullWidth is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text euiButtonGroup--fullWidth" > @@ -2126,7 +2126,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for multi 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > @@ -2210,7 +2210,7 @@ exports[`EuiButtonGroup button props isIconOnly is rendered for single 1`] = ` class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > @@ -2303,7 +2303,7 @@ exports[`EuiButtonGroup button props selection idSelected is rendered for single class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > @@ -2397,7 +2397,7 @@ exports[`EuiButtonGroup button props selection idToSelectedMap is rendered for m class="euiButtonGroup euiButtonGroup--small euiButtonGroup--text" > @@ -2483,7 +2483,7 @@ exports[`EuiButtonGroup type multi is rendered 1`] = ` data-test-subj="test subject string" > @@ -2569,7 +2569,7 @@ exports[`EuiButtonGroup type single is rendered 1`] = ` data-test-subj="test subject string" > diff --git a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap index 7ee550b7c40..111239c80f3 100644 --- a/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap +++ b/src/components/color_picker/__snapshots__/color_picker.test.tsx.snap @@ -645,14 +645,14 @@ exports[`renders inline EuiColorPicker 1`] = `#ffeedd
diff --git a/src/components/color_picker/__snapshots__/hue.test.tsx.snap b/src/components/color_picker/__snapshots__/hue.test.tsx.snap index d9dd5448bdf..3f8302aeb0d 100644 --- a/src/components/color_picker/__snapshots__/hue.test.tsx.snap +++ b/src/components/color_picker/__snapshots__/hue.test.tsx.snap @@ -3,14 +3,14 @@ exports[`EuiHue accepts a hex value 1`] = ` Array [ ,#00FFFF
, @@ -35,14 +35,14 @@ Array [ exports[`EuiHue accepts a hue value 1`] = ` Array [ , ,Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
@@ -119,7 +119,7 @@ exports[`renders compressed EuiColorStops 1`] = ` >Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
@@ -230,7 +230,7 @@ exports[`renders disabled EuiColorStops 1`] = ` >Test: Disabled. Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
@@ -344,7 +344,7 @@ exports[`renders empty EuiColorStops 1`] = ` >Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
@@ -380,7 +380,7 @@ exports[`renders fixed stop EuiColorStops 1`] = ` >Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
@@ -491,7 +491,7 @@ exports[`renders free-range EuiColorStops 1`] = ` >Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
@@ -527,7 +527,7 @@ exports[`renders fullWidth EuiColorStops 1`] = ` >Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
@@ -638,7 +638,7 @@ exports[`renders max-only EuiColorStops 1`] = ` >Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
@@ -674,7 +674,7 @@ exports[`renders min-only EuiColorStops 1`] = ` >Test: Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
@@ -710,7 +710,7 @@ exports[`renders readOnly EuiColorStops 1`] = ` >Test: Read-only. Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap index c05dbff3287..1b7552dd1aa 100644 --- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap +++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap @@ -1,14 +1,382 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`EuiControlBar is rendered 1`] = ` +Array [ ++ There is a new region landmark with page level controls at the end of the document. +
, +] +`; + +exports[`EuiControlBar props leftOffset is rendered 1`] = ` +Array [ ++ There is a new region landmark with page level controls at the end of the document. +
, +] +`; + +exports[`EuiControlBar props maxHeight is rendered 1`] = ` +Array [ ++ There is a new region landmark with page level controls at the end of the document. +
, +] +`; + +exports[`EuiControlBar props mobile is rendered 1`] = ` +Array [ ++ There is a new region landmark with page level controls at the end of the document. +
, +] +`; + +exports[`EuiControlBar props position is rendered 1`] = `- There is a new region landmark with page level controls at the end of the document. -
-
-
- There is a new region landmark with page level controls at the end of the document. -
-
-
- There is a new region landmark with page level controls at the end of the document. -
-
-
+ There is a new region landmark with page level controls at the end of the document. +
, +] `; -exports[`EuiControlBar props position is rendered 1`] = ` -- There is a new region landmark with page level controls at the end of the document. -
-
-
- There is a new region landmark with page level controls at the end of the document. -
-
-
+ There is a new region landmark with page level controls at the end of the document. +
, +] `; exports[`EuiControlBar props size is rendered 1`] = ` -- There is a new region landmark with page level controls at the end of the document. -
- - } +Array [ ++ src + + +
+ There is a new region landmark with page level controls at the end of the document. +
, +] `; diff --git a/src/components/control_bar/control_bar.test.tsx b/src/components/control_bar/control_bar.test.tsx index 59d00c7e0de..c8080ec26d0 100644 --- a/src/components/control_bar/control_bar.test.tsx +++ b/src/components/control_bar/control_bar.test.tsx @@ -6,12 +6,16 @@ * Side Public License, v 1. */ -import React from 'react'; -import { mount } from 'enzyme'; -import { requiredProps, takeMountedSnapshot } from '../../test'; +import React, { ReactNode } from 'react'; +import { render } from 'enzyme'; +import { requiredProps } from '../../test'; import { EuiControlBar, Control } from './control_bar'; +jest.mock('../portal', () => ({ + EuiPortal: ({ children }: { children: ReactNode }) => children, +})); + const handleClick = () => { console.log('You clicked'); }; @@ -65,16 +69,15 @@ const controls: Control[] = [ describe('EuiControlBar', () => { test('is rendered', () => { - const component = takeMountedSnapshot( - mount(Row: 1; Column: 1
@@ -1189,7 +1189,7 @@ Array [ 0, BRow: 1; Column: 2
@@ -1220,7 +1220,7 @@ Array [ 1, ARow: 2; Column: 1
@@ -1251,7 +1251,7 @@ Array [ 1, BRow: 2; Column: 2
@@ -1282,7 +1282,7 @@ Array [ 2, ARow: 3; Column: 1
@@ -1313,7 +1313,7 @@ Array [ 2, BRow: 3; Column: 2
@@ -1629,7 +1629,7 @@ Array [ 0Row: 1; Column: 1
@@ -1666,7 +1666,7 @@ Array [ 0, ARow: 1; Column: 2
@@ -1697,7 +1697,7 @@ Array [ 0, BRow: 1; Column: 3
@@ -1741,7 +1741,7 @@ Array [ 0Row: 1; Column: 4
@@ -1791,7 +1791,7 @@ Array [ 1Row: 2; Column: 1
@@ -1828,7 +1828,7 @@ Array [ 1, ARow: 2; Column: 2
@@ -1859,7 +1859,7 @@ Array [ 1, BRow: 2; Column: 3
@@ -1903,7 +1903,7 @@ Array [ 1Row: 2; Column: 4
@@ -1953,7 +1953,7 @@ Array [ 2Row: 3; Column: 1
@@ -1990,7 +1990,7 @@ Array [ 2, ARow: 3; Column: 2
@@ -2021,7 +2021,7 @@ Array [ 2, BRow: 3; Column: 3
@@ -2065,7 +2065,7 @@ Array [ 2Row: 3; Column: 4
@@ -2335,7 +2335,7 @@ Array [ 0, ARow: 1; Column: 1
@@ -2366,7 +2366,7 @@ Array [ 0, BRow: 1; Column: 2
@@ -2397,7 +2397,7 @@ Array [ 1, ARow: 2; Column: 1
@@ -2428,7 +2428,7 @@ Array [ 1, BRow: 2; Column: 2
@@ -2459,7 +2459,7 @@ Array [ 2, ARow: 3; Column: 1
@@ -2490,7 +2490,7 @@ Array [ 2, BRow: 3; Column: 2
@@ -2752,7 +2752,7 @@ Array [ 0, ARow: 1; Column: 1
@@ -2783,7 +2783,7 @@ Array [ 0, BRow: 1; Column: 2
@@ -2814,7 +2814,7 @@ Array [ 1, ARow: 2; Column: 1
@@ -2845,7 +2845,7 @@ Array [ 1, BRow: 2; Column: 2
@@ -2876,7 +2876,7 @@ Array [ 2, ARow: 3; Column: 1
@@ -2907,7 +2907,7 @@ Array [ 2, BRow: 3; Column: 2
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap index a080a115d1c..216a98d3640 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_body.test.tsx.snap @@ -126,7 +126,7 @@ exports[`EuiDataGridBody renders 1`] = `Row: 1; Column: 1
@@ -159,7 +159,7 @@ exports[`EuiDataGridBody renders 1`] = `Row: 1; Column: 2
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap index da349c1dc3f..2dd1c510819 100644 --- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap +++ b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap @@ -37,169 +37,46 @@ Array [ `; exports[`EuiDataGridCell renders 1`] = ` -You are in a dialog. To close this dialog, hit escape. diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap index 1e88f1a3b1c..79bbd78887f 100644 --- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap +++ b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap @@ -49,7 +49,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover style="left: 10px; top: 0px;" />
You are in a dialog. To close this dialog, hit escape. @@ -82,7 +82,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover class="euiDataGridColumnSorting__item false euiDraggable__item" >
Column A is sorting this data grid
@@ -136,7 +136,7 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover class="euiButtonGroup euiButtonGroup--compressed euiButtonGroup--text euiButtonGroup--fullWidth euiDataGridColumnSorting__order" > diff --git a/src/components/datagrid/utils/ref.spec.tsx b/src/components/datagrid/utils/ref.spec.tsx index a9e6fc22123..af33ad4a9d0 100644 --- a/src/components/datagrid/utils/ref.spec.tsx +++ b/src/components/datagrid/utils/ref.spec.tsx @@ -99,7 +99,7 @@ describe('useImperativeGridRef', () => { it('should paginate to cells that are not on the current page', () => { ref.current.setFocusedCell({ rowIndex: 50, colIndex: 0 }); - cy.get('.euiPagination .euiScreenReaderOnly').should( + cy.get('.euiPagination [class*="euiScreenReaderOnly"]').should( 'have.text', 'Page 3 of 4' ); @@ -148,7 +148,7 @@ describe('useImperativeGridRef', () => { it('should paginate to cells that are not on the current page', () => { ref.current.openCellPopover({ rowIndex: 99, colIndex: 5 }); - cy.get('.euiPagination .euiScreenReaderOnly').should( + cy.get('.euiPagination [class*="euiScreenReaderOnly"]').should( 'have.text', 'Page 4 of 4' ); diff --git a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap index dfd1c41262d..20a54a7fd88 100644 --- a/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap +++ b/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap @@ -189,7 +189,7 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = ` tabindex="0" >
You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close.
@@ -283,7 +283,7 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
Select an option: , is selected
@@ -339,7 +339,7 @@ exports[`EuiSuperSelect props is rendered with a prepend and append 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
Select an option: , is selected
@@ -395,7 +395,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
Select an option: Option #1, is selected
@@ -465,7 +465,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
>
You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close.
@@ -562,7 +562,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
Select an option: , is selected
@@ -630,7 +630,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
>
You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close.
@@ -724,7 +724,7 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
class="euiFormControlLayout__childrenWrapper"
>
Select an option: Option #2, is selected
@@ -794,7 +794,7 @@ exports[`EuiSuperSelect props renders popoverProps on the underlying EuiPopover
>
You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close.
@@ -889,7 +889,7 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
Select an option: , is selected
@@ -938,7 +938,7 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
class="euiFormControlLayout__childrenWrapper"
>
Select an option: Option #2, is selected
diff --git a/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap b/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
index 21b7c51977e..d5875a3c5a8 100644
--- a/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
+++ b/src/components/form/super_select/__snapshots__/super_select_control.test.tsx.snap
@@ -13,7 +13,7 @@ Array [
class="euiFormControlLayout__childrenWrapper"
>
Select an option: , is selected
@@ -55,7 +55,7 @@ Array [
class="euiFormControlLayout__childrenWrapper"
>
Select an option: , is selected
@@ -95,7 +95,7 @@ Array [
class="euiFormControlLayout__childrenWrapper"
>
Select an option: , is selected
@@ -135,7 +135,7 @@ Array [
class="euiFormControlLayout__childrenWrapper"
>
Select an option: , is selected
@@ -175,7 +175,7 @@ Array [
class="euiFormControlLayout__childrenWrapper"
>
Select an option: , is selected
@@ -215,7 +215,7 @@ Array [
class="euiFormControlLayout__childrenWrapper"
>
Select an option: , is selected
@@ -259,7 +259,7 @@ Array [
class="euiFormControlLayout__childrenWrapper"
>
Select an option: , is selected
@@ -304,7 +304,7 @@ Array [
class="euiFormControlLayout__childrenWrapper"
>
Select an option: Option #1, is selected
diff --git a/src/components/index.scss b/src/components/index.scss
index 25e3f18f19c..dfe65f6ef54 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -1,6 +1,5 @@
// Components
-@import 'accessibility/index';
@import 'accordion/index';
@import 'badge/index';
@import 'basic_table/index';
diff --git a/src/components/link/__snapshots__/link.test.tsx.snap b/src/components/link/__snapshots__/link.test.tsx.snap
index f40a17fc34c..b7ed8974482 100644
--- a/src/components/link/__snapshots__/link.test.tsx.snap
+++ b/src/components/link/__snapshots__/link.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`EuiLink allows for target and external to be controlled independently 1
target="_blank"
>
(opens in a new tab or window)
@@ -153,7 +153,7 @@ exports[`EuiLink supports target 1`] = `
External link
(opens in a new tab or window)
diff --git a/src/components/page/__snapshots__/page_template.test.tsx.snap b/src/components/page/__snapshots__/page_template.test.tsx.snap
index fa82701f1f3..160a6431107 100644
--- a/src/components/page/__snapshots__/page_template.test.tsx.snap
+++ b/src/components/page/__snapshots__/page_template.test.tsx.snap
@@ -1101,7 +1101,7 @@ exports[`EuiPageTemplate with bottomBar is rendered 1`] = `
style="left:0;right:0;bottom:0"
>
There is a new region landmark with page level controls at the end of the document.
You are in a dialog. To close this dialog, hit escape.
@@ -178,7 +178,7 @@ exports[`EuiPopover props buffer 1`] = `
style="left: 10px; top: 0px;"
/>
You are in a dialog. To close this dialog, hit escape.
@@ -235,7 +235,7 @@ exports[`EuiPopover props buffer for all sides 1`] = `
style="left: 10px; top: 0px;"
/>
You are in a dialog. To close this dialog, hit escape.
@@ -305,7 +305,7 @@ exports[`EuiPopover props focusTrapProps is rendered 1`] = `
style="left: 10px; top: 0px;"
/>
You are in a dialog. To close this dialog, hit escape.
@@ -375,7 +375,7 @@ exports[`EuiPopover props isOpen renders true 1`] = `
style="left: 10px; top: 0px;"
/>
You are in a dialog. To close this dialog, hit escape.
@@ -433,7 +433,7 @@ exports[`EuiPopover props offset with arrow 1`] = `
style="left: 10px; top: 0px;"
/>
You are in a dialog. To close this dialog, hit escape.
@@ -490,7 +490,7 @@ exports[`EuiPopover props offset without arrow 1`] = `
class="euiPopover__panelArrow euiPopover__panelArrow--bottom"
/>
You are in a dialog. To close this dialog, hit escape.
@@ -547,7 +547,7 @@ exports[`EuiPopover props ownFocus defaults to true 1`] = `
style="left: 10px; top: 0px;"
/>
You are in a dialog. To close this dialog, hit escape.
@@ -652,7 +652,7 @@ exports[`EuiPopover props panelClassName is rendered 1`] = `
style="left: 10px; top: 0px;"
/>
You are in a dialog. To close this dialog, hit escape.
@@ -709,7 +709,7 @@ exports[`EuiPopover props panelPaddingSize is rendered 1`] = `
style="left: 10px; top: 0px;"
/>
You are in a dialog. To close this dialog, hit escape.
@@ -767,7 +767,7 @@ exports[`EuiPopover props panelProps is rendered 1`] = `
style="left: 10px; top: 0px;"
/>
You are in a dialog. To close this dialog, hit escape.
diff --git a/src/components/selectable/__snapshots__/selectable.test.tsx.snap b/src/components/selectable/__snapshots__/selectable.test.tsx.snap
index fd0688ca723..1ecede0d768 100644
--- a/src/components/selectable/__snapshots__/selectable.test.tsx.snap
+++ b/src/components/selectable/__snapshots__/selectable.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`EuiSelectable custom options with data 1`] = `
class="euiSelectable"
>
Filter options
@@ -120,7 +120,7 @@ exports[`EuiSelectable errorMessage prop can render an element as the message 1`
class="euiSelectable"
>
Filter options
@@ -142,7 +142,7 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
class="euiSelectable"
>
Filter options
@@ -258,7 +258,7 @@ exports[`EuiSelectable errorMessage prop does renders the message when defined 1
class="euiSelectable"
>
Filter options
@@ -336,7 +336,7 @@ exports[`EuiSelectable search value supports inheriting initialSearchValue from
class="euiSelectable"
>
Filter options
diff --git a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
index 5e1e1f80551..aa5d1072f4a 100644
--- a/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
+++ b/src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap
@@ -441,7 +441,7 @@ exports[`EuiSelectableListItem props allowExclusions 1`] = `
Titan
description title
description title
description title
description title
description title
description title
description title
description title
Statistic is loading
description title
description title
description title
description title
description title
description title
title description
description title
description title
description title
State: unchanged.
@@ -111,7 +111,7 @@ Array [
Page level controls
@@ -1113,7 +1113,7 @@ exports[`EuiPageTemplate with bottomBar is rendered 1`] = `
Tab 1
@@ -638,7 +638,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
class="euiFlexItem"
>
Tab 1
diff --git a/src/components/pagination/__snapshots__/pagination.test.tsx.snap b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
index 372be00f559..a940e7bb39a 100644
--- a/src/components/pagination/__snapshots__/pagination.test.tsx.snap
+++ b/src/components/pagination/__snapshots__/pagination.test.tsx.snap
@@ -9,7 +9,7 @@ exports[`EuiPagination is rendered 1`] = `
Page 1 of 1
@@ -79,7 +79,7 @@ exports[`EuiPagination props activePage can be -1 1`] = `
Last Page of collection
@@ -150,7 +150,7 @@ exports[`EuiPagination props activePage is rendered 1`] = `
Page 6 of 10
@@ -365,7 +365,7 @@ exports[`EuiPagination props aria-controls is rendered 1`] = `
Page 1 of 1
@@ -435,7 +435,7 @@ exports[`EuiPagination props compressed is rendered 1`] = `
Page 1 of 1
@@ -517,7 +517,7 @@ exports[`EuiPagination props pageCount can be 0 1`] = `
Page 1 of collection
@@ -588,7 +588,7 @@ exports[`EuiPagination props pageCount is rendered 1`] = `
Page 1 of 10
@@ -763,7 +763,7 @@ exports[`EuiPagination props responsive can be customized 1`] = `
Page 1 of 1
@@ -832,7 +832,7 @@ exports[`EuiPagination props responsive can be false 1`] = `
Page 1 of 1
diff --git a/src/components/popover/__snapshots__/popover.test.tsx.snap b/src/components/popover/__snapshots__/popover.test.tsx.snap
index 1764a37d354..916f744d92d 100644
--- a/src/components/popover/__snapshots__/popover.test.tsx.snap
+++ b/src/components/popover/__snapshots__/popover.test.tsx.snap
@@ -121,7 +121,7 @@ exports[`EuiPopover props arrowChildren is rendered 1`] = `
Side Nav Heading
diff --git a/src/components/stat/__snapshots__/stat.test.tsx.snap b/src/components/stat/__snapshots__/stat.test.tsx.snap
index 3f1b5359eac..4961e3ab391 100644
--- a/src/components/stat/__snapshots__/stat.test.tsx.snap
+++ b/src/components/stat/__snapshots__/stat.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`EuiStat is rendered 1`] = `
title
State: unchanged.
@@ -120,666 +120,117 @@ Array [
`;
exports[`EuiSuggest props isVirtualized 1`] = `
-
- State: unchanged. -
-+ State: unchanged. +
, +] `; exports[`EuiSuggest props maxHeight 1`] = ` -- State: unchanged. -
-+ State: unchanged. +
, +] `; exports[`EuiSuggest props options common 1`] = ` @@ -831,7 +282,7 @@ Array [ ,State: unchanged. @@ -888,7 +339,7 @@ Array [ ,
State: unchanged. @@ -967,7 +418,7 @@ Array [ ,
State: unchanged. @@ -1033,7 +484,7 @@ Array [ ,
State: loading. @@ -1099,7 +550,7 @@ Array [ ,
State: saved. @@ -1156,7 +607,7 @@ Array [ ,
State: unchanged. @@ -1222,7 +673,7 @@ Array [ ,
State: unsaved. @@ -1288,7 +739,7 @@ Array [ ,
State: loading. @@ -1354,7 +805,7 @@ Array [ ,
State: saved. @@ -1411,7 +862,7 @@ Array [ ,
State: unchanged. @@ -1477,7 +928,7 @@ Array [ ,
State: unsaved.
diff --git a/src/components/suggest/suggest.test.tsx b/src/components/suggest/suggest.test.tsx
index 79185c42195..f9f0e81a1e9 100644
--- a/src/components/suggest/suggest.test.tsx
+++ b/src/components/suggest/suggest.test.tsx
@@ -7,7 +7,7 @@
*/
import React from 'react';
-import { render, mount, shallow } from 'enzyme';
+import { render, shallow } from 'enzyme';
import { requiredProps } from '../../test/required_props';
import { EuiSelectable } from '../selectable';
@@ -83,7 +83,7 @@ describe('EuiSuggest', () => {
});
test('isVirtualized', () => {
- const component = mount(
+ const component = render(
A new notification appears
A new notification appears
A new notification appears
A new notification appears
+ A new notification appears
+
-
+ A new notification appears
+
-
+ A new notification appears
+
-
+ A new notification appears
+
-
+ A new notification appears
+
-
+ A new notification appears
+
-
A new notification appears
You can quickly navigate this list using arrow keys.
diff --git a/src/global_styling/utility/utility.tsx b/src/global_styling/utility/utility.tsx
index 9c590485f66..72d7bf31a7d 100644
--- a/src/global_styling/utility/utility.tsx
+++ b/src/global_styling/utility/utility.tsx
@@ -9,4 +9,11 @@
import React from 'react';
import { Global, css } from '@emotion/react';
-export const EuiUtilityClasses = () =>