feat: keyboard navigation updates

wackerow · wackerow · commit 8c3576ed6344 · 2024-02-05T17:11:37.000-08:00
diff --git a/src/components/LanguagePicker/NoResultsCallout.tsx b/src/components/LanguagePicker/NoResultsCallout.tsx
@@ -1,30 +1,33 @@
 import { useTranslation } from "next-i18next"
-import { Box, Text } from "@chakra-ui/react"
+import { FormHelperText, forwardRef, Text } from "@chakra-ui/react"
 
 import { BaseLink } from "@/components/Link"
 
 import MenuItem from "./MenuItem"
 
 type NoResultsCalloutProps = { onClose: () => void }
 
-const NoResultsCallout = ({ onClose }: NoResultsCalloutProps) => {
-  const { t } = useTranslation("page-languages")
-  return (
-    <Box>
-      <Text fontWeight="bold" mb="2">
-        {t("page-languages-want-more-header")}
-      </Text>
-      {t("page-languages-want-more-paragraph")}{" "}
-      <BaseLink
-        as={MenuItem}
-        key="item-no-results"
-        href="contributing/translation-program"
-        onClick={onClose}
-      >
-        {t("page-languages-want-more-link")}
-      </BaseLink>
-    </Box>
-  )
-}
+const NoResultsCallout = forwardRef(
+  ({ onClose }: NoResultsCalloutProps, ref) => {
+    const { t } = useTranslation("page-languages")
+    return (
+      <FormHelperText color="body.medium" lineHeight="base" fontSize="md">
+        <Text fontWeight="bold" mb="2" color="body.base">
+          {t("page-languages-want-more-header")}
+        </Text>
+        {t("page-languages-want-more-paragraph")}{" "}
+        <BaseLink
+          ref={ref}
+          as={MenuItem}
+          key="item-no-results"
+          href="contributing/translation-program"
+          onClick={onClose}
+        >
+          {t("page-languages-want-more-link")}
+        </BaseLink>
+      </FormHelperText>
+    )
+  }
+)
 
 export default NoResultsCallout
diff --git a/src/components/LanguagePicker/index.tsx b/src/components/LanguagePicker/index.tsx
@@ -1,13 +1,19 @@
 import {
   Box,
   Flex,
+  FormControl,
+  FormLabel,
   Input,
+  InputGroup,
+  InputRightElement,
+  Kbd,
   Menu,
-  MenuItem as ChakraMenuItem,
   MenuList,
   type MenuListProps,
   type MenuProps,
   Text,
+  type UseDisclosureReturn,
+  useEventListener,
 } from "@chakra-ui/react"
 
 import { Button } from "@/components/Buttons"
@@ -21,34 +27,45 @@ type LanguagePickerProps = Omit<MenuListProps, "children"> & {
   children: React.ReactNode
   placement: MenuProps["placement"]
   handleClose?: () => void
+  menuState?: UseDisclosureReturn
 }
 
 const LanguagePicker = ({
   children,
   placement,
   handleClose,
+  menuState,
   ...props
 }: LanguagePickerProps) => {
-  const {
-    t,
-    disclosure,
-    inputRef,
-    firstItemRef,
-    filterValue,
-    setFilterValue,
-    filteredNames,
-  } = useLanguagePicker(handleClose)
-
+  const { t, refs, disclosure, filterValue, setFilterValue, filteredNames } =
+    useLanguagePicker(handleClose, menuState)
+  const { inputRef, firstItemRef, noResultsRef, footerRef } = refs
   const { onClose } = disclosure
 
+  /**
+   * Adds a keydown event listener to focus filter input (\).
+   * @param {string} event - The keydown event.
+   */
+  useEventListener("keydown", (e) => {
+    if (e.key !== "\\") return
+    e.preventDefault()
+    inputRef.current?.focus()
+  })
+
   return (
-    <Menu isLazy placement={placement} closeOnSelect={false} {...disclosure}>
+    <Menu isLazy placement={placement} autoSelect={false} {...disclosure}>
       {children}
       <MenuList
         position="relative"
         overflow="auto"
         borderRadius="base"
         py="0"
+        onKeyDown={(e) => {
+          if (e.key === "Tab" || e.key === "\\") {
+            e.preventDefault()
+            ;(e.shiftKey ? inputRef : footerRef).current?.focus()
+          }
+        }}
         {...props}
       >
         {/* Mobile Close bar */}
@@ -79,63 +96,100 @@ const LanguagePicker = ({
           bg="background.highlight"
           sx={{ "[role=menuitem]": { py: "3", px: "2" } }}
         >
-          <Text fontSize="xs" color="body.medium">
-            {t("page-languages-filter-label")}{" "}
-            <Text as="span" textTransform="lowercase">
-              ({filteredNames.length} {t("common:languages")})
-            </Text>
-          </Text>
-          <ChakraMenuItem
-            onFocus={() => inputRef.current?.focus()}
-            p="0"
-            bg="transparent"
-            position="relative"
-            closeOnSelect={false}
-          >
-            <Input
-              placeholder={t("page-languages-filter-placeholder")}
-              value={filterValue}
-              onChange={(e) => setFilterValue(e.target.value)}
-              ref={inputRef}
-              h="8"
-              mt="1"
-              mb="2"
-              bg="background.base"
-              color="body.base"
-              onKeyDown={(e) => {
-                // Navigate to first result on enter
-                if (e.key === "Enter") {
+          <FormControl>
+            <FormLabel fontSize="xs" color="body.medium">
+              {t("page-languages-filter-label")}{" "}
+              <Text as="span" textTransform="lowercase">
+                ({filteredNames.length} {t("common:languages")})
+              </Text>
+            </FormLabel>
+            <InputGroup>
+              <Input
+                type="search"
+                autoComplete="off"
+                placeholder={t("page-languages-filter-placeholder")}
+                value={filterValue}
+                onChange={(e) => setFilterValue(e.target.value)}
+                onBlur={(e) => {
+                  if (e.relatedTarget?.tagName.toLowerCase() === "div") {
+                    e.currentTarget.focus()
+                  }
+                }}
+                ref={inputRef}
+                h="8"
+                mt="1"
+                mb="2"
+                bg="background.base"
+                color="body.base"
+                onKeyDown={(e) => {
+                  // Navigate to first result on enter
+                  if (e.key === "Enter") {
+                    e.preventDefault()
+                    firstItemRef.current?.click()
+                  }
+                  // If Tab/ArrowDown, focus on first item if available, NoResults link otherwise
+                  if (e.key === "Tab" || e.key === "ArrowDown") {
+                    e.preventDefault()
+                    ;(filteredNames.length === 0
+                      ? noResultsRef
+                      : firstItemRef
+                    ).current?.focus()
+                    e.stopPropagation()
+                  }
+                }}
+              />
+              <InputRightElement
+                hideBelow="lg" // TODO: Confirm breakpoint after nav-menu PR merged
+                cursor="text"
+              >
+                <Kbd
+                  fontSize="sm"
+                  lineHeight="none"
+                  me="2"
+                  p="1"
+                  py="0.5"
+                  ms="auto"
+                  border="1px"
+                  borderColor="disabled"
+                  color="disabled"
+                  rounded="base"
+                >
+                  \
+                </Kbd>
+              </InputRightElement>
+            </InputGroup>
+
+            {filteredNames.map((displayInfo, index) => (
+              <MenuItem
+                key={"item-" + displayInfo.localeOption}
+                displayInfo={displayInfo}
+                ref={index === 0 ? firstItemRef : null}
+                onKeyDown={(e) => {
+                  if (e.key !== "\\") return
                   e.preventDefault()
-                  firstItemRef.current?.click()
+                  inputRef.current?.focus()
+                }}
+                onClick={() =>
+                  onClose({
+                    eventAction: "Locale chosen",
+                    eventName: displayInfo.localeOption,
+                  })
                 }
-              }}
-            />
-          </ChakraMenuItem>
+              />
+            ))}
 
-          {filteredNames.map((displayInfo, index) => (
-            <MenuItem
-              key={"item-" + displayInfo.localeOption}
-              displayInfo={displayInfo}
-              ref={index === 0 ? firstItemRef : null}
-              onClick={() =>
-                onClose({
-                  eventAction: "Locale chosen",
-                  eventName: displayInfo.localeOption,
-                })
-              }
-            />
-          ))}
-
-          {filteredNames.length === 0 && (
-            <NoResultsCallout
-              onClose={() =>
-                onClose({
-                  eventAction: "Translation program link (no results)",
-                  eventName: "/contributing/translation-program",
-                })
-              }
-            />
-          )}
+            {filteredNames.length === 0 && (
+              <NoResultsCallout
+                ref={noResultsRef}
+                onClose={() =>
+                  onClose({
+                    eventAction: "Translation program link (no results)",
+                    eventName: "/contributing/translation-program",
+                  })
+                }
+              />
+            )}
+          </FormControl>
         </Box>
 
         {/* Footer callout */}
@@ -151,6 +205,7 @@ const LanguagePicker = ({
           <Text fontSize="xs" textAlign="center" color="body.base">
             {t("page-languages-recruit-community")}{" "}
             <BaseLink
+              ref={footerRef}
               href="/contributing/translation-program"
               onClick={() =>
                 onClose({
diff --git a/src/components/LanguagePicker/useLanguagePicker.tsx b/src/components/LanguagePicker/useLanguagePicker.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import { useDisclosure } from "@chakra-ui/react"
+import { useDisclosure, type UseDisclosureReturn } from "@chakra-ui/react"
 
 import type {
   I18nLocale,
@@ -19,11 +19,18 @@ import { DEFAULT_LOCALE } from "@/lib/constants"
 
 const data = progressData as ProjectProgressData[]
 
-export const useLanguagePicker = (handleClose?: () => void) => {
+export const useLanguagePicker = (
+  handleClose?: () => void,
+  menuState?: UseDisclosureReturn
+) => {
   const { t } = useTranslation("page-languages")
   const { locale, locales } = useRouter()
-  const inputRef = useRef<HTMLInputElement>(null)
-  const firstItemRef = useRef<HTMLAnchorElement>(null)
+  const refs = {
+    inputRef: useRef<HTMLInputElement>(null),
+    firstItemRef: useRef<HTMLAnchorElement>(null),
+    noResultsRef: useRef<HTMLAnchorElement>(null),
+    footerRef: useRef<HTMLAnchorElement>(null),
+  }
   const [filterValue, setFilterValue] = useState("")
 
   const [filteredNames, setFilteredNames] = useState<LocaleDisplayInfo[]>([])
@@ -143,6 +150,7 @@ export const useLanguagePicker = (handleClose?: () => void) => {
 
   const onOpen = () => {
     menu.onOpen()
+    menuState?.onOpen()
     trackCustomEvent({
       ...eventBase,
       eventName: "Opened",
@@ -160,6 +168,7 @@ export const useLanguagePicker = (handleClose?: () => void) => {
     setFilterValue("")
     handleClose && handleClose()
     menu.onClose()
+    menuState?.onClose()
     trackCustomEvent(
       (customMatomoEvent
         ? { ...eventBase, ...customMatomoEvent }
@@ -169,9 +178,8 @@ export const useLanguagePicker = (handleClose?: () => void) => {
 
   return {
     t,
+    refs,
     disclosure: { isOpen, onOpen, onClose },
-    inputRef,
-    firstItemRef,
     filterValue,
     setFilterValue,
     filteredNames,
diff --git a/src/components/Nav/index.tsx b/src/components/Nav/index.tsx
@@ -42,6 +42,7 @@ const Nav: FC<IProps> = ({ path }) => {
   const { t } = useTranslation("common")
   const searchModalDisclosure = useDisclosure()
   const navWrapperRef = useRef(null)
+  const languagePickerState = useDisclosure()
   const languagePickerRef = useRef<HTMLButtonElement>(null)
   /**
    * Adds a keydown event listener to toggle color mode (ctrl|cmd + \)
@@ -54,6 +55,7 @@ const Nav: FC<IProps> = ({ path }) => {
     if (e.metaKey || e.ctrlKey) {
       toggleColorMode()
     } else {
+      if (languagePickerState.isOpen) return
       languagePickerRef.current?.click()
     }
   })
@@ -135,6 +137,7 @@ const Nav: FC<IProps> = ({ path }) => {
                   w="xs"
                   inset="unset"
                   top="unset"
+                  menuState={languagePickerState}
                 >
                   <MenuButton
                     as={Button}
@@ -144,7 +147,6 @@ const Nav: FC<IProps> = ({ path }) => {
                     transition="color 0.2s"
                     _hover={{
                       color: "primary.hover",
-                      bg: "primary.lowContrast",
                       "& svg": {
                         transform: "rotate(10deg)",
                         transition: "transform 0.5s",
