fix issue #132

src/components/LoginNav/index.js

@@ -31,8 +31,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)
+    }
   }, [])
 
   useEffect(() => {
@@ -104,6 +113,7 @@ const LoginNav = ({
       {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?')

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,11 +39,23 @@ 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)}>
         <div className={styles.primaryNav} ref={createSetRef('primaryNav')}>
           <a
+            tabIndex='0'
             className={cn(styles.tcLogo, collapsed && styles.tcLogoPush)}
             onClick={onClickLogo}
             href='/'
@@ -54,6 +66,7 @@ const PrimaryNav = ({
             <span className={styles.primaryLevel1Separator} key={`separator-${i}`} />,
             /* Level 1 menu item */
             <a
+              tabIndex='0'
               className={cn(styles.primaryLevel1, (!activeLevel2Id || showLeftMenu) && level1.id === activeLevel1Id && styles.primaryLevel1Open, level1.mobileOnly && styles.mobileOnly)}
               href={level1.href}
               key={`level1-${i}`}
@@ -71,6 +84,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 +111,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}`}

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/ico-user-default.svg'
@@ -7,26 +7,41 @@ import IconArrowSmallup from '../../assets/images/arrow-small-up.svg'
 import styles from './styles.module.scss'
 import _ from 'lodash'
 
-const UserInfo = ({ profile, onClick, open, newNotifications, domRef }) => (
-  <div
-    ref={domRef}
-    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, domRef }) => {
+  useEffect(() => {
+    const listener = event => {
+      if (event.code === 'Enter') {
+        event.target.click()
       }
+    }
+    document.addEventListener('keydown', listener)
+    return () => {
+      document.removeEventListener('keydown', listener)
+    }
+  }, [])
+
+  return (
+    <div
+      ref={domRef}
+      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(),