feat: new TrackFocus component with active status

RedTurtle · Mar 5, 2024 · 83e7296 · 83e7296
1 parent 02df644
commit 83e7296
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 10 deletions.
diff --git a/src/components/ItaliaTheme/AppExtras/TrackFocus.jsx b/src/components/ItaliaTheme/AppExtras/TrackFocus.jsx
@@ -6,10 +6,11 @@ const CLASS_NAME_MOUSE_ACTIVE = 'active';
 
 const TrackFocus = () => {
   const [usingMouse, setUsingMouse] = useState(false);
+  const [activeElement, setActiveElement] = useState(null);
 
   useEffect(() => {
     const handleEvent = (e) => {
-      setUsingMouse(e.type === 'mousedown' ? true : false);
+      setUsingMouse(e.type === 'mousedown');
     };
 
     document.addEventListener('keydown', handleEvent);
@@ -24,23 +25,30 @@ const TrackFocus = () => {
   useEffect(() => {
     const handleFocusChange = (e) => {
       if (e.target) {
+        const isLinkOrButton =
+          e.target.tagName === 'A' || e.target.tagName === 'BUTTON';
+
         if (usingMouse) {
           e.target.classList.add(CLASS_NAME_MOUSE_FOCUS);
-          e.target.classList.add(CLASS_NAME_MOUSE_ACTIVE);
+          if (isLinkOrButton) {
+            if (activeElement && activeElement !== e.target) {
+              activeElement.classList.remove(CLASS_NAME_MOUSE_ACTIVE);
+            }
+            e.target.classList.add(CLASS_NAME_MOUSE_ACTIVE);
+            setActiveElement(e.target);
+          }
           e.target.setAttribute(DATA_FOCUS_MOUSE, true);
         } else {
           e.target.classList.remove(CLASS_NAME_MOUSE_FOCUS);
-          e.target.classList.remove(CLASS_NAME_MOUSE_ACTIVE);
-          e.target.setAttribute(DATA_FOCUS_MOUSE, false);
+          e.target.removeAttribute(DATA_FOCUS_MOUSE);
         }
       }
     };
 
     const handleFocusOut = (e) => {
       if (e.target) {
         e.target.classList.remove(CLASS_NAME_MOUSE_FOCUS);
-        e.target.classList.remove(CLASS_NAME_MOUSE_ACTIVE);
-        e.target.setAttribute(DATA_FOCUS_MOUSE, false);
+        e.target.removeAttribute(DATA_FOCUS_MOUSE);
       }
     };
 
@@ -51,7 +59,7 @@ const TrackFocus = () => {
       document.removeEventListener('focusin', handleFocusChange);
       document.removeEventListener('focusout', handleFocusOut);
     };
-  }, [usingMouse]);
+  }, [usingMouse, activeElement]);
 
   return null;
 };

diff --git a/src/components/ItaliaTheme/MegaMenu/MegaMenu.jsx b/src/components/ItaliaTheme/MegaMenu/MegaMenu.jsx
@@ -117,7 +117,6 @@ const MegaMenu = ({ item, pathname }) => {
           href={item.linkUrl === '' ? '/' : null}
           item={item.linkUrl[0]?.['@id'] ? item.linkUrl[0] : '#'}
           tag={UniversalLink}
-          active={isItemActive}
           data-element={item.id_lighthouse}
           role="menuitem"
         >
@@ -239,7 +238,7 @@ const MegaMenu = ({ item, pathname }) => {
     }
 
     return (
-      <NavItem tag="li" className="megamenu" active={isItemActive} role="none">
+      <NavItem tag="li" className="megamenu" role="none">
         <UncontrolledDropdown
           nav
           inNavbar

diff --git a/src/components/ItaliaTheme/MenuSecondary/MenuSecondary.jsx b/src/components/ItaliaTheme/MenuSecondary/MenuSecondary.jsx
@@ -53,7 +53,6 @@ const MenuSecondary = ({ pathname }) => {
               <NavLink
                 href={url === '' ? '/' : flattenToAppURL(url)}
                 tag={UniversalLink}
-                active={isMenuActive(url)}
                 data-element={item.id_lighthouse}
                 role="menuitem"
               >

diff --git a/src/theme/ItaliaTheme/Components/_navigation.scss b/src/theme/ItaliaTheme/Components/_navigation.scss
@@ -0,0 +1,15 @@
+.public-ui {
+  .navbar {
+    .navbar-collapsable {
+      .navbar-nav {
+        li {
+          a.nav-link {
+            &.focus--mouse {
+              border-color: unset !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/theme/site.scss b/src/theme/site.scss
@@ -42,6 +42,7 @@
 @import 'ItaliaTheme/Components/sideMenu';
 @import 'ItaliaTheme/Components/loginAgid';
 @import 'ItaliaTheme/Components/pager';
+@import 'ItaliaTheme/Components/navigation';
 @import 'ItaliaTheme/Blocks/subblocks-edit';
 @import 'ItaliaTheme/Blocks/listing';
 @import 'ItaliaTheme/Blocks/tableOfContents';