[CSS-in-JS] Convert EuiScreenReaderOnly

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

@@ -3,7 +3,7 @@ import React from 'react';
 
 import {
   EuiCode,
-  euiScreenReaderOnlyStyles,
+  euiScreenReaderOnly,
   EuiText,
   useEuiFocusRing,
 } from '../../../../src';
@@ -34,7 +34,7 @@ export default () => {
         snippet={'<p className="euiScreenReaderOnly" />'}
       />
       <ThemeExample
-        title={<code>euiScreenReaderOnlyStyles()</code>}
+        title={<code>euiScreenReaderOnly()</code>}
         description={
           <p>
             This function allows you to apply the screen reader only CSS styles
@@ -44,12 +44,12 @@ 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())} />'}
+        snippet={'<p css={css(euiScreenReaderOnly())} />'}
       />
       <ThemeExample
         title={<code>useEuiFocusRing(offset?, color?)</code>}

src/components/accessibility/index.ts

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

src/components/accessibility/screen_reader_only/index.ts

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

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

@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 
-const euiScreenReaderOnly = `
+const euiScreenReaderOnlyStatic = `
     position: absolute;
     left: -10000px;
     top: auto;
@@ -17,14 +17,22 @@ const euiScreenReaderOnly = `
     overflow: hidden;
   `;
 
+/*
+ * Mixin
+ */
+export const euiScreenReaderOnly = () => euiScreenReaderOnlyStatic;
+
+/*
+ * Styles
+ */
 export const euiScreenReaderOnlyStyles = (showOnFocus?: boolean) => {
   if (showOnFocus) {
     return css`
       // The :active selector is necessary for Safari which removes :focus when a button is pressed
       &:not(:focus):not(:active) {
-        ${euiScreenReaderOnly}
+        ${euiScreenReaderOnlyStatic}
       }
     `;
   }
-  return css(euiScreenReaderOnly);
+  return css(euiScreenReaderOnlyStatic);
 };