[EuiMark] Fix screen-reader only CSS causing scroll issues in Chrome

src-docs/src/views/accessibility/screen_reader_styles.tsx

@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
 import React from 'react';
 
-import { EuiText, euiScreenReaderOnlyStyles } from '../../../../src';
+import { EuiText, euiScreenReaderOnly } from '../../../../src';
 
 export default () => (
   <EuiText>
     <p>This is the first paragraph. It is visible to all.</p>
-    <p css={css(euiScreenReaderOnlyStyles())}>
+    <p css={css(euiScreenReaderOnly())}>
       This is the second paragraph. It is hidden for sighted users but visible
       to screen readers.
     </p>

src-docs/src/views/accessibility/styles_helpers.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import {
   EuiCode,
-  euiScreenReaderOnlyStyles,
+  euiScreenReaderOnly,
   EuiText,
   useEuiFocusRing,
 } from '../../../../src';
@@ -17,6 +17,7 @@ export default () => {
     <>
       <ThemeExample
         title={<code>.euiScreenReaderOnly</code>}
+        type="className"
         description={
           <p>
             This utility class allows you to apply the screen reader only CSS
@@ -34,7 +35,8 @@ export default () => {
         snippet={'<p className="euiScreenReaderOnly" />'}
       />
       <ThemeExample
-        title={<code>euiScreenReaderOnlyStyles()</code>}
+        title={<code>euiScreenReaderOnly()</code>}
+        type="function"
         description={
           <p>
             This function allows you to apply the screen reader only CSS styles
@@ -44,15 +46,21 @@ export default () => {
         example={
           <EuiText size="s">
             <p>The next paragraph is hidden except for screen readers.</p>
-            <p css={css(euiScreenReaderOnlyStyles())}>
+            <p
+              css={css`
+                ${euiScreenReaderOnly()}
+              `}
+            >
               I am hidden except for screen readers
             </p>
           </EuiText>
         }
-        snippet={'<p css={css(euiScreenReaderOnlyStyles())} />'}
+        snippetLanguage="emotion"
+        snippet={'${euiScreenReaderOnly()}'}
       />
       <ThemeExample
         title={<code>useEuiFocusRing(offset?, color?)</code>}
+        type="hook"
         description={
           <p>
             By default, all interactable elements will inherit the{' '}

src/components/accessibility/index.ts

@@ -8,10 +8,7 @@
 
 export { EuiScreenReaderLive } from './screen_reader_live';
 export type { EuiScreenReaderLiveProps } from './screen_reader_live';
-export {
-  EuiScreenReaderOnly,
-  euiScreenReaderOnlyStyles,
-} from './screen_reader_only';
+export { EuiScreenReaderOnly, euiScreenReaderOnly } from './screen_reader_only';
 export type { EuiScreenReaderOnlyProps } from './screen_reader_only';
 export { EuiSkipLink } from './skip_link';
 export type { EuiSkipLinkProps } from './skip_link';

src/components/accessibility/screen_reader_only/index.ts

@@ -8,4 +8,4 @@
 
 export type { EuiScreenReaderOnlyProps } from './screen_reader_only';
 export { EuiScreenReaderOnly } from './screen_reader_only';
-export { euiScreenReaderOnlyStyles } from './screen_reader_only.styles';
+export { euiScreenReaderOnly } from './screen_reader_only.styles';

src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts

@@ -6,15 +6,25 @@
  * Side Public License, v 1.
  */
 
-import { css } from '@emotion/react';
-
-export const euiScreenReaderOnlyStyles = () => {
-  return css`
-    position: absolute;
-    left: -10000px;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-  `;
-};
+/*
+ * 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
+ */
+export const euiScreenReaderOnly = () => `
+  // Take the element out of the layout
+  position: absolute;
+  // Keep it vertically inline
+  top: auto;
+  // Chrome requires a left value, and Selenium (used by Kibana's FTR) requires an off-screen position for its .getVisibleText() to not register SR-only text
+  left: -10000px;
+  // The element must have a size (for some screen readers)
+  width: 1px;
+  height: 1px;
+  // But reduce the visible size to nothing
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  // And ensure no overflows occur
+  overflow: hidden;
+  // Chrome requires the negative margin to not cause overflows of parent containers
+  margin: -1px;
+`;

src/components/highlight/__snapshots__/highlight.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`EuiHighlight behavior loose matching matches strings with different cas
 <span>
   different 
   <mark
-    class="euiMark css-b9vly9-euiMarkStyles-EuiMark"
+    class="euiMark css-f21o5u-euiMarkStyles-EuiMark"
   >
     case
   </mark>
@@ -15,19 +15,19 @@ exports[`EuiHighlight behavior loose matching matches strings with different cas
 exports[`EuiHighlight behavior matching applies to all matches 1`] = `
 <span>
   <mark
-    class="euiMark css-b9vly9-euiMarkStyles-EuiMark"
+    class="euiMark css-f21o5u-euiMarkStyles-EuiMark"
   >
     match
   </mark>
 
   <mark
-    class="euiMark css-b9vly9-euiMarkStyles-EuiMark"
+    class="euiMark css-f21o5u-euiMarkStyles-EuiMark"
   >
     match
   </mark>
 
   <mark
-    class="euiMark css-b9vly9-euiMarkStyles-EuiMark"
+    class="euiMark css-f21o5u-euiMarkStyles-EuiMark"
   >
     match
   </mark>
@@ -59,7 +59,7 @@ exports[`EuiHighlight behavior matching hasScreenReaderHelpText can be false 1`]
 exports[`EuiHighlight behavior matching only applies to first match 1`] = `
 <span>
   <mark
-    class="euiMark css-b9vly9-euiMarkStyles-EuiMark"
+    class="euiMark css-f21o5u-euiMarkStyles-EuiMark"
   >
     match
   </mark>

src/components/mark/__snapshots__/mark.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`EuiMark is rendered 1`] = `
 <mark
   aria-label="aria-label"
-  class="euiMark testClass1 testClass2 css-b9vly9-euiMarkStyles-EuiMark"
+  class="euiMark testClass1 testClass2 css-f21o5u-euiMarkStyles-EuiMark"
   data-test-subj="test subject string"
 >
   Marked

src/components/mark/mark.styles.ts

@@ -8,6 +8,7 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme, transparentize } from '../../services';
+import { euiScreenReaderOnly } from '../accessibility';
 
 export const euiMarkStyles = (
   { euiTheme, colorMode }: UseEuiTheme,
@@ -39,13 +40,7 @@ export const euiMarkStyles = (
     `
       &:before,
       &:after {
-        clip-path: inset(100%);
-        clip: rect(1px, 1px, 1px, 1px);
-        height: 1px;
-        overflow: hidden;
-        position: absolute;
-        white-space: nowrap;
-        width: 1px;
+        ${euiScreenReaderOnly()}
       }
 
       &:before {

src/components/selectable/selectable_list/__snapshots__/selectable_list.test.tsx.snap

@@ -2222,7 +2222,7 @@ exports[`EuiSelectableListItem props searchValue 1`] = `
             >
               <span>
                 <mark
-                  class="euiMark css-b9vly9-euiMarkStyles-EuiMark"
+                  class="euiMark css-f21o5u-euiMarkStyles-EuiMark"
                 >
                   Mi
                 </mark>
@@ -2417,7 +2417,7 @@ exports[`EuiSelectableListItem props searchValue 2`] = `
             >
               <span>
                 <mark
-                  class="euiMark css-b9vly9-euiMarkStyles-EuiMark"
+                  class="euiMark css-f21o5u-euiMarkStyles-EuiMark"
                 >
                   Mi
                 </mark>

upcoming_changelogs/5921.md

@@ -0,0 +1,7 @@
+**Bug fixes**
+
+- Fixed `EuiMark`'s screen reader helpers causing scroll issues in Chrome
+
+**CSS-in-JS conversions**
+
+- Renamed `euiScreenReaderOnlyStyles()` mixin to `euiScreenReaderOnly()`