[CSS-in-JS] Convert EuiScreenReaderOnly (#5846)

* convert euiscreenreaderonly to css-in-js styling * update snapshots * CL * mixin; exports * use the mixin * utility class * remove unused classname * refactor utility classes * update generated className and snapshots * remove styles export * snapshots * remove base className; snapshots * update cypress selector * prevent empty string className
elastic · Jun 23, 2022 · 3501341 · 3501341
1 parent bde12be
commit 3501341
Show file tree

Hide file tree

Showing 57 changed files with 1,460 additions and 4,724 deletions.
diff --git a/src/components/accessibility/_index.scss b/src/components/accessibility/_index.scss
diff --git a/...omponents/accessibility/screen_reader_live/__snapshots__/screen_reader_live.test.tsx.snap b/...omponents/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`] = `
 <div
-  class="euiScreenReaderOnly"
+  class="emotion-euiScreenReaderOnly"
 >
   <div
     aria-atomic="true"
@@ -23,7 +23,7 @@ exports[`EuiScreenReaderLive with a static configuration accepts \`aria-live\` 1
 
 exports[`EuiScreenReaderLive with a static configuration accepts \`role\` 1`] = `
 <div
-  class="euiScreenReaderOnly"
+  class="emotion-euiScreenReaderOnly"
 >
   <div
     aria-atomic="true"
@@ -44,7 +44,7 @@ exports[`EuiScreenReaderLive with a static configuration accepts \`role\` 1`] =
 
 exports[`EuiScreenReaderLive with a static configuration does not render screen reader content when inactive 1`] = `
 <div
-  class="euiScreenReaderOnly"
+  class="emotion-euiScreenReaderOnly"
 >
   <div
     aria-atomic="true"
@@ -61,7 +61,7 @@ exports[`EuiScreenReaderLive with a static configuration does not render screen
 
 exports[`EuiScreenReaderLive with a static configuration renders screen reader content when active 1`] = `
 <div
-  class="euiScreenReaderOnly"
+  class="emotion-euiScreenReaderOnly"
 >
   <div
     aria-atomic="true"
@@ -81,73 +81,57 @@ exports[`EuiScreenReaderLive with a static configuration renders screen reader c
 `;
 
 exports[`EuiScreenReaderLive with dynamic properties alternates rendering screen reader content into the second live region when changed/toggled 1`] = `
-<Component>
-  <div>
-    <button
-      data-test-subj="increment"
-      onClick={[Function]}
+<div>
+  <button
+    data-test-subj="increment"
+  >
+    Increment
+  </button>
+  <div
+    class="emotion-euiScreenReaderOnly"
+  >
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      role="status"
+    />
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      role="status"
     >
-      Increment
-    </button>
-    <EuiScreenReaderLive>
-      <EuiScreenReaderOnly>
-        <div
-          className="euiScreenReaderOnly"
-        >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
-          />
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
-          >
-            <p>
-              Number of active options: 
-              1
-            </p>
-          </div>
-        </div>
-      </EuiScreenReaderOnly>
-    </EuiScreenReaderLive>
+      <p>
+        Number of active options: 1
+      </p>
+    </div>
   </div>
-</Component>
+</div>
 `;
 
 exports[`EuiScreenReaderLive with dynamic properties initially renders screen reader content in the first live region 1`] = `
-<Component>
-  <div>
-    <button
-      data-test-subj="increment"
-      onClick={[Function]}
+<div>
+  <button
+    data-test-subj="increment"
+  >
+    Increment
+  </button>
+  <div
+    class="emotion-euiScreenReaderOnly"
+  >
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      role="status"
+    />
+    <div
+      aria-atomic="true"
+      aria-live="polite"
+      role="status"
     >
-      Increment
-    </button>
-    <EuiScreenReaderLive>
-      <EuiScreenReaderOnly>
-        <div
-          className="euiScreenReaderOnly"
-        >
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
-          >
-            <p>
-              Number of active options: 
-              0
-            </p>
-          </div>
-          <div
-            aria-atomic="true"
-            aria-live="polite"
-            role="status"
-          />
-        </div>
-      </EuiScreenReaderOnly>
-    </EuiScreenReaderLive>
+      <p>
+        Number of active options: 0
+      </p>
+    </div>
   </div>
-</Component>
+</div>
 `;
diff --git a/src/components/accessibility/screen_reader_live/screen_reader_live.test.tsx b/src/components/accessibility/screen_reader_live/screen_reader_live.test.tsx
@@ -77,7 +77,7 @@ describe('EuiScreenReaderLive', () => {
     };
 
     it('initially renders screen reader content in the first live region', () => {
-      const component = mount(<Component />);
+      const component = render(<Component />);
 
       expect(component).toMatchSnapshot();
     });
@@ -87,7 +87,7 @@ describe('EuiScreenReaderLive', () => {
 
       findTestSubject(component, 'increment').simulate('click');
 
-      expect(component).toMatchSnapshot();
+      expect(component.render()).toMatchSnapshot();
     });
   });
 });
diff --git a/...omponents/accessibility/screen_reader_only/__snapshots__/screen_reader_only.test.tsx.snap b/...omponents/accessibility/screen_reader_only/__snapshots__/screen_reader_only.test.tsx.snap
@@ -2,23 +2,23 @@
 
 exports[`EuiScreenReaderOnly adds an accessibility class to a child element and combines other classNames (foo, bar) given as props on the child 1`] = `
 <p
-  class="euiScreenReaderOnly foo bar"
+  class="foo bar emotion-euiScreenReaderOnly"
 >
   This paragraph is not visibile to sighted users but will be read by screenreaders.
 </p>
 `;
 
 exports[`EuiScreenReaderOnly adds an accessibility class to a child element when used with no props 1`] = `
 <p
-  class="euiScreenReaderOnly"
+  class="emotion-euiScreenReaderOnly"
 >
   This paragraph is not visibile to sighted users but will be read by screenreaders.
 </p>
 `;
 
 exports[`EuiScreenReaderOnly will show on focus 1`] = `
 <a
-  class="euiScreenReaderOnly--showOnFocus"
+  class="emotion-euiScreenReaderOnly"
   href="#"
 >
   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
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
@@ -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
@@ -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<any>;
+  children: ReactElement;
 
   /**
    * For keyboard navigation, force content to display visually upon focus.
    */
   showOnFocus?: boolean;
+  className?: string;
 }
 
 export const EuiScreenReaderOnly: FunctionComponent<EuiScreenReaderOnlyProps> = ({
   children,
+  className,
   showOnFocus,
 }) => {
-  const classes = classNames(
-    {
-      euiScreenReaderOnly: !showOnFocus,
-      'euiScreenReaderOnly--showOnFocus': showOnFocus,
-    },
-    children.props.className
-  );
+  const classes = classNames(className, children.props.className);
+
+  const styles = euiScreenReaderOnlyStyles(showOnFocus);
+  const cssStyles = [styles.euiScreenReaderOnly];
 
   const props = {
-    ...children.props,
-    className: classes,
+    className: classes.length ? classes : undefined,
+    css: cssStyles,
   };
 
-  return cloneElement(children, props);
+  return cloneElementWithCss(children, props);
 };
diff --git a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiSkipLink is rendered 1`] = `
 <a
   aria-label="aria-label"
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink testClass1 testClass2 emotion-euiSkipLink"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink testClass1 testClass2 emotion-euiSkipLink-euiScreenReaderOnly"
   data-test-subj="test subject string"
   href="#somewhere"
   rel="noreferrer"
@@ -22,7 +22,7 @@ exports[`EuiSkipLink is rendered 1`] = `
 
 exports[`EuiSkipLink props onClick is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink emotion-euiSkipLink"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink emotion-euiSkipLink-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -38,7 +38,7 @@ exports[`EuiSkipLink props onClick is rendered 1`] = `
 
 exports[`EuiSkipLink props position absolute is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink emotion-euiSkipLink-absolute"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink emotion-euiSkipLink-absolute-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -54,7 +54,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `
 
 exports[`EuiSkipLink props position fixed is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink emotion-euiSkipLink-fixed"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink emotion-euiSkipLink-fixed-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
   tabindex="0"
@@ -71,7 +71,7 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `
 
 exports[`EuiSkipLink props position static is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink emotion-euiSkipLink"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink emotion-euiSkipLink-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -87,7 +87,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = `
 
 exports[`EuiSkipLink props tabIndex is rendered 1`] = `
 <a
-  class="euiButton euiButton--primary euiButton--small euiButton--fill euiScreenReaderOnly--showOnFocus euiSkipLink emotion-euiSkipLink"
+  class="euiButton euiButton--primary euiButton--small euiButton--fill euiSkipLink emotion-euiSkipLink-euiScreenReaderOnly"
   href="#somewhere"
   rel="noreferrer"
   tabindex="-1"