Merge pull request #416 from brandleadership/fix/tabs/header/enter-open

add: enter event to open submenus, focus on language swithech, esc ev…
brandleadership · Oct 11, 2024 · 180a6c5 · 180a6c5
2 parents a3f0a24 + 3d21f23
commit 180a6c5
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/src/components/elements/LanguageSwitcher.js b/src/components/elements/LanguageSwitcher.js
@@ -46,11 +46,20 @@ const LanguageSwitcher = () => {
             }
         };
 
+        const handleEscapeKey = (event) => {
+            if (event.key === 'Escape') {
+                setIsOpen(false);
+            }
+        };
+
         document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleEscapeKey);
+
         return () => {
             document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleEscapeKey);
         };
-    }, [dropdownRef]);
+    }, []);
 
     const handleKeyDown = (event) => {
         if (event.key === 'Enter' || event.key === ' ') {
@@ -63,10 +72,11 @@ const LanguageSwitcher = () => {
         <div ref={dropdownRef}>
             <button
                 tabIndex="1"
+                aria-expanded={isOpen}
                 type="button"
                 onClick={() => setIsOpen((isOpen) => !isOpen)}
                 onKeyDown={handleKeyDown}
-                className="inline-flex items-center rounded-lg py-2.5 text-base font-medium text-primarySolid-800 hover:bg-greySolid-30 hover:text-primary focus:outline-none  lg:px-5"
+                className="inline-flex items-center rounded-lg py-2.5 text-base font-medium text-primarySolid-800 hover:bg-greySolid-30 hover:text-primary lg:px-5"
             >
                 {currentLocale === 'en' ? 'English' : 'Deutsch'}
                 <svg
@@ -99,7 +109,13 @@ const LanguageSwitcher = () => {
                             tabIndex="1"
                             role="menuitem"
                             onClick={handleChange}
-                            className="block px-4 py-2 text-sm text-greySolid-600 hover:bg-greySolid-100 "
+                            onKeyDown={(e) => {
+                                if (e.key === 'Enter' || e.key === ' ')
+                                    handleChange();
+                            }}
+                            className="block px-4 py-2 text-sm text-greySolid-600 hover:bg-greySolid-100 dark:text-greySolid-400 dark:hover:bg-greySolid-600 dark:hover:text-white"
+
+
                         >
                             <div className="inline-flex items-center">
                                 {currentLocale === 'en' ? 'German' : 'Englisch'}

diff --git a/src/components/sections/HeaderNew.js b/src/components/sections/HeaderNew.js
@@ -53,6 +53,8 @@ const HeaderNew = ({ blok }) => {
         (event) => {
             if (event.key === 'Enter' && activeTab !== null) {
                 setActiveTab(null);
+            } else if (event.key === 'Escape' && activeTab !== null) {
+                setActiveTab(null);
             }
         },
         [activeTab]
@@ -85,6 +87,12 @@ const HeaderNew = ({ blok }) => {
         }, 300);
     }, []);
 
+    const handleKeyDown = (event, item) => {
+        if (event.key === 'Enter') {
+            handleTabClick(item);
+        }
+    };
+
     return (
         <motion.header
             className="py-4 lg:h-40"
@@ -171,14 +179,17 @@ const HeaderNew = ({ blok }) => {
                                     paddingTop: 0,
                                 },
                             }}
-                            className="flex flex-col justify-start font-semibold text-primarySolid-800 [--responsive-height:0px] [--responsive-min-height:0px] [--responsive-opacity:0%] lg:mt-0 lg:flex-row lg:space-y-0 lg:[--responsive-height:80px] lg:[--responsive-min-height:80px] lg:[--responsive-opacity:100%]"
+                            className="flex flex-col justify-start font-semibold text-primarySolid-800 [--responsive-height:0px] [--responsive-opacity:0%] [--responsive-min-height:0px] lg:mt-0 lg:flex-row lg:space-y-0 lg:[--responsive-height:80px] lg:[--responsive-opacity:100%] lg:[--responsive-min-height:80px]"
                         >
                             <ul className="flex flex-col lg:flex-row">
                                 {tabs.map((item) => (
                                     <li key={item}>
                                         <div
                                             tabIndex="1"
                                             onClick={() => handleTabClick(item)}
+                                            onKeyDown={(e) =>
+                                                handleKeyDown(e, item)
+                                            }
                                             className="py-2 hover:cursor-pointer lg:px-2 lg:py-0"
                                         >
                                             {item === 'company'