Merge pull request #9442 from CitizenLabDotCo/TAN-3078/fix-focus-full…

…screenmodal-instances Fix keyboard focus for FullscreenModal instances
CitizenLabDotCo · Nov 20, 2024 · 3edd72b · 3edd72b
2 parents f7e4594 + a9b8149
commit 3edd72b
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 34 deletions.
diff --git a/front/app/components/UI/FullscreenModal/index.tsx b/front/app/components/UI/FullscreenModal/index.tsx
@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 
 import { Color, colors, media } from '@citizenlab/cl2-component-library';
-import { compact } from 'lodash-es';
 import { createPortal } from 'react-dom';
 import { FocusOn } from 'react-focus-on';
 import CSSTransition from 'react-transition-group/CSSTransition';
@@ -84,7 +83,6 @@ interface InputProps {
   close: () => void;
   topBar?: JSX.Element | null;
   bottomBar?: JSX.Element | null;
-  mobileNavbarRef?: HTMLElement | null;
   children: JSX.Element | null | undefined;
   contentBgColor?: Color;
 }
@@ -124,16 +122,8 @@ class FullscreenModal extends PureComponent<Props, State> {
 
   render() {
     const { windowHeight } = this.state;
-    const {
-      children,
-      opened,
-      topBar,
-      bottomBar,
-      mobileNavbarRef,
-      className,
-      contentBgColor,
-    } = this.props;
-    const shards = compact([mobileNavbarRef]);
+    const { children, opened, topBar, bottomBar, className, contentBgColor } =
+      this.props;
 
     return createPortal(
       <CSSTransition
@@ -154,7 +144,7 @@ class FullscreenModal extends PureComponent<Props, State> {
           windowHeight={windowHeight}
           contentBgColor={contentBgColor}
         >
-          <StyledFocusOn autoFocus={false} shards={shards}>
+          <StyledFocusOn autoFocus>
             {topBar}
             <Content className="fullscreenmodal-scrollcontainer">
               {children}

diff --git a/.../containers/MainHeader/Components/NavbarContent/MobileNavbarContent/FullMobileNavMenu.tsx b/.../containers/MainHeader/Components/NavbarContent/MobileNavbarContent/FullMobileNavMenu.tsx
@@ -89,14 +89,9 @@ const StyledFullscreenModal = styled(FullscreenModal)`
 interface Props {
   onClose: () => void;
   isFullMenuOpened: boolean;
-  mobileNavbarRef: HTMLElement;
 }
 
-const FullMobileNavMenu = ({
-  mobileNavbarRef,
-  onClose,
-  isFullMenuOpened,
-}: Props) => {
+const FullMobileNavMenu = ({ onClose, isFullMenuOpened }: Props) => {
   const { data: navbarItems } = useNavbarItems();
   const localize = useLocalize();
   const { formatMessage } = useIntl();
@@ -118,11 +113,7 @@ const FullMobileNavMenu = ({
   };
 
   return (
-    <StyledFullscreenModal
-      opened={isFullMenuOpened}
-      close={onClose}
-      mobileNavbarRef={mobileNavbarRef}
-    >
+    <StyledFullscreenModal opened={isFullMenuOpened} close={onClose}>
       <Container>
         <ContentContainer
           // Screen reader will add "navigation", so this will become

diff --git a/front/app/containers/MainHeader/Components/NavbarContent/MobileNavbarContent/index.tsx b/front/app/containers/MainHeader/Components/NavbarContent/MobileNavbarContent/index.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense, useRef, useState } from 'react';
+import React, { Suspense, useState } from 'react';
 
 import { Box, Button, media, isRtl } from '@citizenlab/cl2-component-library';
 import styled from 'styled-components';
@@ -84,7 +84,6 @@ const MobileNavbarContent = () => {
   const isEmailSettingsPage = isPage('email-settings', location.pathname);
 
   const [isFullMenuOpened, setIsFullMenuOpened] = useState(false);
-  const containerRef = useRef<HTMLElement>(null);
 
   const signIn = () => {
     triggerAuthenticationFlow({}, 'signin');
@@ -104,7 +103,7 @@ const MobileNavbarContent = () => {
   };
 
   return (
-    <nav ref={containerRef}>
+    <nav>
       <RightContainer>
         {!isEmailSettingsPage && (
           <>
@@ -140,13 +139,10 @@ const MobileNavbarContent = () => {
         )}
       </RightContainer>
       <Suspense fallback={null}>
-        {containerRef.current && (
-          <FullMobileNavMenu
-            isFullMenuOpened={isFullMenuOpened}
-            onClose={onCloseFullMenu}
-            mobileNavbarRef={containerRef.current}
-          />
-        )}
+        <FullMobileNavMenu
+          isFullMenuOpened={isFullMenuOpened}
+          onClose={onCloseFullMenu}
+        />
       </Suspense>
     </nav>
   );