Merge pull request #12226 from ethereum/menu-number-shortcut

Keyboard nav: nav menu number shortcuts

Author: wackerow

src/components/Nav/Menu/index.tsx

@@ -4,7 +4,7 @@ import * as NavigationMenu from "@radix-ui/react-navigation-menu"
 
 import { Button } from "@/components/Buttons"
 
-import { NAV_PY, SECTION_LABELS } from "@/lib/constants"
+import { MAIN_NAV_ID, NAV_PY, SECTION_LABELS } from "@/lib/constants"
 
 import type { NavSections } from "../types"
 
@@ -35,7 +35,12 @@ const Menu = ({ sections, ...props }: NavMenuProps) => {
         delayDuration={0}
       >
         <NavigationMenu.List asChild>
-          <UnorderedList display="flex" listStyleType="none" m="0">
+          <UnorderedList
+            id={MAIN_NAV_ID}
+            display="flex"
+            listStyleType="none"
+            m="0"
+          >
             {SECTION_LABELS.map((sectionKey) => {
               const { label, items } = sections[sectionKey]
               const isActive = activeSection === sectionKey

src/components/Nav/Menu/useNavMenu.ts

@@ -1,5 +1,8 @@
 import { useState } from "react"
 import type { MotionProps } from "framer-motion"
+import { useEventListener } from "@chakra-ui/react"
+
+import { MAIN_NAV_ID, SECTION_LABELS } from "@/lib/constants"
 
 import type { NavSectionKey, NavSections } from "../types"
 
@@ -11,6 +14,25 @@ export const useNavMenu = (sections: NavSections) => {
   const menuColors = useNavMenuColors()
   const [activeSection, setActiveSection] = useState<NavSectionKey | null>(null)
 
+  // Focus corresponding nav section when number keys pressed
+  useEventListener("keydown", (event) => {
+    if (!document || !event.key.match(/[1-9]/)) return
+    if (event.target instanceof HTMLInputElement) return
+    if (event.target instanceof HTMLTextAreaElement) return
+    if (event.target instanceof HTMLSelectElement) return
+
+    const sectionIdx = parseInt(event.key) - 1
+    if (sectionIdx >= SECTION_LABELS.length) return
+
+    const button = document.querySelector(
+      `#${MAIN_NAV_ID} li:nth-of-type(${sectionIdx + 1}) button`
+    )
+    if (!button) return
+
+    event.preventDefault()
+    ;(button as HTMLButtonElement).focus()
+  })
+
   const getEnglishSectionName = (
     activeSection: string
   ): NavSectionKey | null => {

src/lib/constants.ts

@@ -72,9 +72,6 @@ export const RANGES = ["30d", "90d"] as const
 export const BEACONCHA_IN_URL = "https://beaconcha.in/"
 export const ETHERSCAN_API_URL = "https://api.etherscan.io"
 
-export const NAV_BAR_PX_HEIGHT = "75px"
-export const FROM_QUERY = "from"
-
 // Wallets
 export const NUMBER_OF_SUPPORTED_LANGUAGES_SHOWN = 5
 
@@ -130,6 +127,11 @@ export const DEVELOPER_FEATURES = [
  * Navigation
  */
 
+export const MAIN_NAV_ID = "main-navigation"
+export const NAV_BAR_PX_HEIGHT = "75px"
+export const FROM_QUERY = "from"
+export const NAV_PY = 4
+
 // Determines the order of sections in the menu
 export const SECTION_LABELS: NavSectionKey[] = [
   "learn",
@@ -141,5 +143,3 @@ export const SECTION_LABELS: NavSectionKey[] = [
 
 // Glossary Definition Component
 export const DEFAULT_GLOSSARY_NS = "glossary"
-
-export const NAV_PY = 4