Merge branch 'main' into dependabot/npm_and_yarn/babel/traverse-7.23.2

src/app/content/components/ContentWarning.spec.tsx

@@ -35,13 +35,14 @@ describe('ContentWarning', () => {
     renderToDom(<TestContainer><ContentWarning book={dummyBook} /></TestContainer>);
 
     expect(services.osWebLoader.getBookFromId).toBeCalledWith(dummyBook.id);
-
     await act(() => new Promise((resolve) => setTimeout(resolve, 1)));
 
     const root = document?.body;
     const b = root?.querySelector('button');
 
     expect(b).toBeTruthy();
+    // Exercises the when-focus-is-already-in-the-modal branch
+    b!.focus();
     act(() => ReactTestUtils.Simulate.click(b!));
     expect(root?.querySelector('button')).toBeFalsy();
   });

src/app/content/components/ContentWarning.tsx

@@ -9,6 +9,7 @@ import Modal from './Modal';
 import theme from '../../theme';
 import Cookies from 'js-cookie';
 import { useTrapTabNavigation } from '../../reactUtils';
+import { assertDocument } from '../../utils';
 
 // tslint:disable-next-line
 const WarningDiv = styled.div`
@@ -37,7 +38,23 @@ function WarningDivWithTrap({
 }) {
   const ref = React.useRef<HTMLDivElement>(null);
 
-  React.useEffect(() => ref.current?.focus(), []);
+  // Demand focus
+  React.useEffect(
+    () => {
+      const document = assertDocument();
+      const grabFocus = () => {
+        if (!ref.current?.contains(document.activeElement)) {
+          ref.current?.focus();
+        }
+      };
+
+      grabFocus();
+      document.body.addEventListener('focusin', grabFocus);
+
+      return () => document.body.removeEventListener('focusin', grabFocus);
+    },
+    []
+  );
 
   useTrapTabNavigation(ref);
 

src/app/reactUtils.ts

@@ -99,11 +99,10 @@ export function createTrapTab(...elements: HTMLElement[]) {
           return;
         }
         const trapTab = createTrapTab(el);
-        const document = assertDocument();
 
-        document.body.addEventListener('keydown', trapTab, true);
+        el.addEventListener('keydown', trapTab, true);
 
-        return () => document.body.removeEventListener('keydown', trapTab, true);
+        return () => el.removeEventListener('keydown', trapTab, true);
       },
       [ref, otherDep]
     );