fix: added prop to handle moving focus to loader overlay on initial r…

…ender; updated readme (#562)
dequelabs · Mar 25, 2022 · a5dcfee · a5dcfee
1 parent 9730c96
commit a5dcfee
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 37 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,12 @@ See [`CONTRIBUTING.md`](./CONTRIBUTING.md)
 $ yarn
 ```
 
+### build (if first time building dev environment, must be run before yarn dev)
+
+```sh
+$ yarn build
+```
+
 ### dev
 
 (watches/rebuilds react, styles, and docs)
@@ -31,12 +37,6 @@ $ yarn dev
 
 navigate browser to http://localhost:8000
 
-### build
-
-```sh
-$ yarn build
-```
-
 ### run tests
 
 (runs all tests)

diff --git a/docs/patterns/components/LoaderOverlay/index.js b/docs/patterns/components/LoaderOverlay/index.js
@@ -13,7 +13,6 @@ const LOADING_DURATION = 5000;
 
 const LoaderOverlayDemo = () => {
   const mounted = useRef(false);
-  const loaderRef = useRef();
   const buttonRef = useRef();
   const [loading, setLoading] = useState(false);
   const onClick = () => {
@@ -28,11 +27,6 @@ const LoaderOverlayDemo = () => {
       mounted.current = true;
       return;
     }
-
-    if (loading) {
-      return loaderRef.current.focus();
-    }
-
     buttonRef.current.focus();
   }, [loading]);
 
@@ -50,6 +44,14 @@ const LoaderOverlayDemo = () => {
         variant: {
           type: 'string',
           description: 'Loader variant, can be "small" or "large".'
+        },
+        focusOnInitialRender: {
+          type: 'boolean',
+          description: 'whether or not to focus the loader on initial render'
+        },
+        loaderRef: {
+          type: 'function',
+          description: 'optional ref function'
         }
       }}
     >
@@ -59,9 +61,9 @@ const LoaderOverlayDemo = () => {
             <Scrim show />
             <LoaderOverlay
               tabIndex={-1}
-              ref={loaderRef}
               label="Loading..."
               variant="large"
+              focusOnInitialRender
             >
               <p>
                 Explanatory secondary text goes here. Let them know what's
@@ -97,7 +99,7 @@ const LoaderOverlayDemo = () => {
         <Code
           role="region"
           tabIndex={0}
-        >{`<LoaderOverlay tabIndex={-1} ref={loaderRef} label="Loading...">
+        >{`<LoaderOverlay tabIndex={-1} label="Loading..." focusOnInitialRender>
   <p>Explanatory secondary text goes here. Let them know what's happening, alright?</p>
 </LoaderOverlay>`}</Code>
       </div>

diff --git a/packages/react/__tests__/src/components/LoaderOverlay/index.js b/packages/react/__tests__/src/components/LoaderOverlay/index.js
@@ -37,6 +37,49 @@ test('handles variants', () => {
   expect(largeNode.classList.contains('Loader__overlay--large')).toBe(true);
 });
 
+test('handles focus', () => {
+  const loaderOverlay = mount(
+    <LoaderOverlay
+      className="baz"
+      role="alert"
+      label="loading"
+      focusOnInitialRender
+    >
+      Some text
+    </LoaderOverlay>
+  );
+
+  setTimeout(() => {
+    expect(document.activeElement).toBe(loaderOverlay.getDOMNode());
+  });
+});
+
+test('handles not being focused', () => {
+  const loaderOverlay = mount(
+    <LoaderOverlay className="baz" role="alert" label="loading">
+      Some text
+    </LoaderOverlay>
+  );
+
+  setTimeout(() => {
+    expect(document.activeElement).not.toBe(loaderOverlay.getDOMNode());
+  });
+});
+
+test('handles being passed a ref', () => {
+  const loaderRef = React.createRef(null);
+
+  const loaderOverlay = mount(
+    <LoaderOverlay className="baz" role="alert" label="loading" ref={loaderRef}>
+      Some text
+    </LoaderOverlay>
+  );
+
+  setTimeout(() => {
+    expect(document.activeElement).toStrictEqual(loaderOverlay.getDOMNode());
+  });
+});
+
 test('returns no axe violations', async () => {
   const loaderOverlay = shallow(<LoaderOverlay>Hello world</LoaderOverlay>);
 

diff --git a/packages/react/src/components/LoaderOverlay/index.tsx b/packages/react/src/components/LoaderOverlay/index.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { createRef, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Loader from '../Loader';
@@ -7,37 +7,72 @@ import AxeLoader from './axe-loader';
 interface LoaderOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
   variant?: 'large' | 'small';
   label?: string;
+  focusOnInitialRender?: boolean;
+  children?: React.ReactNode;
 }
 
 const LoaderOverlay = React.forwardRef<HTMLDivElement, LoaderOverlayProps>(
-  ({ className, variant, label, ...other }: LoaderOverlayProps, ref) => (
-    <div
-      className={classNames(
-        'Loader__overlay',
-        className,
-        variant === 'large'
-          ? 'Loader__overlay--large'
-          : variant === 'small'
-          ? 'Loader__overlay--small'
-          : ''
-      )}
-      ref={ref}
-      {...other}
-    >
-      <div className="Loader__overlay__loader">
-        <Loader variant={variant} />
-        <AxeLoader />
+  (
+    {
+      className,
+      variant,
+      label,
+      children,
+      focusOnInitialRender,
+      ...other
+    }: LoaderOverlayProps,
+    ref
+  ) => {
+    const overlayRef =
+      typeof ref === 'function' || !ref ? createRef<HTMLDivElement>() : ref;
+
+    useEffect(() => {
+      if (!!focusOnInitialRender && overlayRef.current) {
+        setTimeout(() => {
+          return overlayRef.current?.focus();
+        });
+      }
+      return;
+    }, [overlayRef.current]);
+
+    useEffect(() => {
+      if (typeof ref === 'function') {
+        ref(overlayRef.current);
+      }
+    }, [ref]);
+
+    return (
+      <div
+        className={classNames(
+          'Loader__overlay',
+          className,
+          variant === 'large'
+            ? 'Loader__overlay--large'
+            : variant === 'small'
+            ? 'Loader__overlay--small'
+            : ''
+        )}
+        ref={overlayRef}
+        tabIndex={-1}
+        {...other}
+      >
+        <div className="Loader__overlay__loader">
+          <Loader variant={variant} />
+          <AxeLoader />
+        </div>
+        {label ? <span className="Loader__overlay__label">{label}</span> : null}
+        {children}
       </div>
-      {label ? <span className="Loader__overlay__label">{label}</span> : null}
-      {other.children}
-    </div>
-  )
+    );
+  }
 );
 
 LoaderOverlay.propTypes = {
   className: PropTypes.string,
   variant: PropTypes.oneOf(['large', 'small']),
-  label: PropTypes.string
+  label: PropTypes.string,
+  focusOnInitialRender: PropTypes.bool,
+  children: PropTypes.node
 };
 
 LoaderOverlay.displayName = 'LoaderOverlay';