From 60e13caaba23a09af9183b4897ad96ca6942c161 Mon Sep 17 00:00:00 2001
From: LieutenantRoger <gair_2015@hotmail.com>
Date: Wed, 15 Jan 2020 23:14:36 +0800
Subject: [PATCH 1/2] fix issue 2504

---
 src/components/LoginNav/index.js    | 2 +-
 src/components/TopNav/PrimaryNav.js | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/LoginNav/index.js b/src/components/LoginNav/index.js
index a1e2696..6a1b0b1 100644
--- a/src/components/LoginNav/index.js
+++ b/src/components/LoginNav/index.js
@@ -77,7 +77,7 @@ const LoginNav = ({
   }
 
   return (
-    <div className={styles.loginContainer}>
+    <div tabIndex='0' className={styles.loginContainer}>
       {loggedIn ? renderLoginPanel() : (
         <a
           href='javascript:void(0)'
diff --git a/src/components/TopNav/PrimaryNav.js b/src/components/TopNav/PrimaryNav.js
index cb95a0c..10b81fb 100644
--- a/src/components/TopNav/PrimaryNav.js
+++ b/src/components/TopNav/PrimaryNav.js
@@ -44,6 +44,7 @@ const PrimaryNav = ({
       <div className={cn(styles.primaryNavContainer, showLeftMenu && styles.primaryNavContainerOpen)}>
         <div className={styles.primaryNav} ref={createSetRef('primaryNav')}>
           <a
+            tabIndex='0'
             className={cn(styles.tcLogo, collapsed && styles.tcLogoPush)}
             onClick={onClickLogo}
             href='/'
@@ -54,6 +55,7 @@ const PrimaryNav = ({
             <span className={styles.primaryLevel1Separator} key={`separator-${i}`} />,
             /* Level 1 menu item */
             <a
+              tabIndex='0'
               className={cn(styles.primaryLevel1, !activeLevel2Id && level1.id === activeLevel1Id && styles.primaryLevel1Open, level1.mobileOnly && styles.mobileOnly)}
               href={level1.href}
               key={`level1-${i}`}
@@ -71,6 +73,7 @@ const PrimaryNav = ({
               >
                 {level1.subMenu.filter(filterNotInMore).map((level2, i) => (
                   <a
+                    tabIndex='0'
                     className={cn(styles.primaryLevel2, level2.id === activeLevel2Id && styles.primaryLevel2Open)}
                     href={level2.href}
                     key={`level2-${i}`}
@@ -97,6 +100,7 @@ const PrimaryNav = ({
                     <div className={styles.moreContentContainer}>
                       {moreMenu.map((menu, i) => (
                         <a
+                          tabIndex='0'
                           className={cn(styles.primaryLevel2, menu.id === activeLevel2Id && styles.primaryLevel2Open)}
                           href={menu.href}
                           key={`more-item-${i}`}

From 64008e49d6b8cfefdccbeee80c464b020702438a Mon Sep 17 00:00:00 2001
From: LieutenantRoger <gair_2015@hotmail.com>
Date: Tue, 21 Jan 2020 15:47:49 +0800
Subject: [PATCH 2/2] fix enter key issue

---
 src/components/LoginNav/index.js    | 14 ++++++--
 src/components/TopNav/PrimaryNav.js | 13 +++++++-
 src/components/UserInfo/index.js    | 51 +++++++++++++++++++----------
 3 files changed, 57 insertions(+), 21 deletions(-)

diff --git a/src/components/LoginNav/index.js b/src/components/LoginNav/index.js
index 6a1b0b1..d1cc129 100644
--- a/src/components/LoginNav/index.js
+++ b/src/components/LoginNav/index.js
@@ -29,8 +29,17 @@ const LoginNav = ({
       setOpenAccountMenu(false)
       document.body.style.position = ''
     }
+    const listener = event => {
+      if (event.code === 'Enter') {
+        event.target.click()
+      }
+    }
+    document.addEventListener('keydown', listener)
     window.addEventListener('orientationchange', onOrientationChange)
-    return () => window.removeEventListener('orientationchange', onOrientationChange)
+    return () => {
+      document.removeEventListener('keydown', listener)
+      window.removeEventListener('orientationchange', onOrientationChange)
+    }
   }, [])
   const handleClickNotifications = () => setOpenNotifications(x => !x)
 
@@ -77,10 +86,11 @@ const LoginNav = ({
   }
 
   return (
-    <div tabIndex='0' className={styles.loginContainer}>
+    <div className={styles.loginContainer}>
       {loggedIn ? renderLoginPanel() : (
         <a
           href='javascript:void(0)'
+          tabIndex='0'
           onClick={(event) => {
             const retUrl = encodeURIComponent(window.location.href)
             window.location = authURLs.location.replace('%S', retUrl).replace('member?', '#!/member?')
diff --git a/src/components/TopNav/PrimaryNav.js b/src/components/TopNav/PrimaryNav.js
index 10b81fb..fbe1f33 100644
--- a/src/components/TopNav/PrimaryNav.js
+++ b/src/components/TopNav/PrimaryNav.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 import ResizeDetector from 'react-resize-detector'
@@ -39,6 +39,17 @@ const PrimaryNav = ({
   const activeTrigger = {
     bottom: 50 // The main nav head bottom Y
   }
+  useEffect(() => {
+    const listener = event => {
+      if (event.code === 'Enter') {
+        event.target.click()
+      }
+    }
+    document.addEventListener('keydown', listener)
+    return () => {
+      document.removeEventListener('keydown', listener)
+    }
+  }, [])
   return (
     <div>
       <div className={cn(styles.primaryNavContainer, showLeftMenu && styles.primaryNavContainerOpen)}>
diff --git a/src/components/UserInfo/index.js b/src/components/UserInfo/index.js
index 6839bcb..7f04b7e 100644
--- a/src/components/UserInfo/index.js
+++ b/src/components/UserInfo/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import PropTypes from 'prop-types'
 import cn from 'classnames'
 import IconAvatar from '../../assets/images/img-vic-tor-avatar.svg'
@@ -7,25 +7,40 @@ import IconArrowSmallup from '../../assets/images/arrow-small-up.svg'
 import styles from './styles.module.scss'
 import _ from 'lodash'
 
-const UserInfo = ({ profile, onClick, open, newNotifications }) => (
-  <div
-    className={styles.userInfoContainer}
-    role='button'
-    onClick={onClick}
-  >
-    <div className={cn(styles.avatarContainer, newNotifications && styles.newNotifications)}>
-      {
-        (_.isEmpty(profile) || _.isEmpty(profile.photoURL)) ? (<IconAvatar width='60' className={styles['avatar']} />) : (<img className={styles.avatar} src={profile.photoURL} alt='avatar' />)
+const UserInfo = ({ profile, onClick, open, newNotifications }) => {
+  useEffect(() => {
+    const listener = event => {
+      if (event.code === 'Enter') {
+        event.target.click()
       }
+    }
+    document.addEventListener('keydown', listener)
+    return () => {
+      document.removeEventListener('keydown', listener)
+    }
+  }, [])
+
+  return (
+    <div
+      tabIndex='0'
+      className={styles.userInfoContainer}
+      role='button'
+      onClick={onClick}
+    >
+      <div className={cn(styles.avatarContainer, newNotifications && styles.newNotifications)}>
+        {
+          (_.isEmpty(profile) || _.isEmpty(profile.photoURL)) ? (<IconAvatar width='60' className={styles['avatar']} />) : (<img className={styles.avatar} src={profile.photoURL} alt='avatar' />)
+        }
+      </div>
+      <div className={styles.handleContainer}>
+        <span className={styles.handle}>{_.isEmpty(profile) ? '' : profile.handle}</span>
+        <span className={styles.dropdownIcon}>
+          { open ? <IconArrowSmallup /> : <IconArrowSmalldown /> }
+        </span>
+      </div>
     </div>
-    <div className={styles.handleContainer}>
-      <span className={styles.handle}>{_.isEmpty(profile) ? '' : profile.handle}</span>
-      <span className={styles.dropdownIcon}>
-        { open ? <IconArrowSmallup /> : <IconArrowSmalldown /> }
-      </span>
-    </div>
-  </div>
-)
+  )
+}
 
 UserInfo.propTypes = {
   profile: PropTypes.shape(),