Board switcher keyboard shortcut navigation

webapp/src/components/boardsSwitcher/boardsSwitcher.tsx

@@ -40,12 +40,21 @@ const BoardsSwitcher = (props: Props): JSX.Element => {
         }
     }
 
+    const handleEscKeyPress = (e: KeyboardEvent) => {
+        if (Utils.isKeyPressed(e, Constants.keyCodes.ESC)) {
+            e.preventDefault()
+            setShowSwitcher(false)
+        }
+    }
+
     useEffect(() => {
         document.addEventListener('keydown', handleQuickSwitchKeyPress)
+        document.addEventListener('keydown', handleEscKeyPress)
 
         // cleanup function
         return () => {
             document.removeEventListener('keydown', handleQuickSwitchKeyPress)
+            document.removeEventListener('keydown', handleEscKeyPress)
         }
     }, [])
 

webapp/src/components/boardsSwitcherDialog/boardSwitcherDialog.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {ReactNode} from 'react'
+import React, {ReactNode, useRef, createRef} from 'react'
 
 import './boardSwitcherDialog.scss'
 import {useIntl} from 'react-intl'
@@ -50,21 +50,25 @@ const BoardSwitcherDialog = (props: Props): JSX.Element => {
     const teamsById:Record<string, Team> = {}
     useAppSelector(getAllTeams).forEach((t) => teamsById[t.id] = t)
 
+    const refs = useRef([])
+
     const searchHandler = async (query: string): Promise<Array<ReactNode>> => {
         if (query.trim().length === 0 || !team) {
             return []
         }
 
         const items = await octoClient.search(team.id, query)
-        const untitledBoardTitle = intl.formatMessage({id: 'ViewTitle.untitled-board', defaultMessage: 'Untitled board'})
-        return items.map((item) => {
+        const untitledBoardTitle = intl.formatMessage({id: 'ViewTitle.untitled-board', defaultMessage: 'Untitled Board'})
+        refs.current = items.map((_, i) => refs.current[i] ?? createRef())
+        return items.map((item, i) => {
             const resultTitle = item.title || untitledBoardTitle
             const teamTitle = teamsById[item.teamId].title
             return (
                 <div
                     key={item.id}
                     className='blockSearchResult'
                     onClick={() => selectBoard(item.teamId, item.id)}
+                    ref={refs.current[i]}
                 >
                     {item.type === BoardTypeOpen && <Globe/>}
                     {item.type === BoardTypePrivate && <LockOutline/>}
@@ -81,6 +85,7 @@ const BoardSwitcherDialog = (props: Props): JSX.Element => {
             title={title}
             subTitle={subTitle}
             searchHandler={searchHandler}
+            refs={refs}
         />
     )
 }

webapp/src/components/searchDialog/searchDialog.scss

@@ -59,7 +59,8 @@
                 cursor: pointer;
                 overflow: hidden;
 
-                &:hover {
+                &:hover,
+                &:focus {
                     background: rgba(var(--center-channel-color-rgb), 0.08);
                 }
             }

webapp/src/components/searchDialog/searchDialog.tsx

@@ -1,6 +1,6 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
-import React, {ReactNode, useMemo, useState} from 'react'
+import React, {MutableRefObject, ReactNode, useEffect, useMemo, useState} from 'react'
 
 import './searchDialog.scss'
 import {FormattedMessage} from 'react-intl'
@@ -10,22 +10,27 @@ import {debounce} from 'lodash'
 import Dialog from '../dialog'
 import {Utils} from '../../utils'
 import Search from '../../widgets/icons/search'
+import { Constants } from '../../constants'
 
 type Props = {
     onClose: () => void
     title: string
     subTitle?: string | ReactNode
     searchHandler: (query: string) => Promise<Array<ReactNode>>
     initialData?: Array<ReactNode>
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    refs: MutableRefObject<any>
 }
 
 const SearchDialog = (props: Props): JSX.Element => {
     const [results, setResults] = useState<Array<ReactNode>>(props.initialData || [])
     const [isSearching, setIsSearching] = useState<boolean>(false)
     const [searchQuery, setSearchQuery] = useState<string>('')
+    const [selected, setSelected] = useState<number>(-1)
 
     const searchHandler = async (query: string): Promise<void> => {
         setIsSearching(true)
+        setSelected(-1)
         setSearchQuery(query)
         const searchResults = await props.searchHandler(query)
         setResults(searchResults)
@@ -36,6 +41,41 @@ const SearchDialog = (props: Props): JSX.Element => {
 
     const emptyResult = results.length === 0 && !isSearching && searchQuery
 
+    const handleUpDownKeyPress = (e: KeyboardEvent) => {
+        if (Utils.isKeyPressed(e, Constants.keyCodes.DOWN)) {
+            e.preventDefault()
+            if (results.length > 0)
+                setSelected(Utils.clamp(selected + 1, 0, results.length - 1))
+        }
+
+        if (Utils.isKeyPressed(e, Constants.keyCodes.UP)) {
+            e.preventDefault()
+            if (results.length > 0)
+                setSelected(Utils.clamp(selected - 1, 0, results.length - 1))
+        }
+    }
+
+    const handleEnterKeyPress = (e: KeyboardEvent) => {
+        if (Utils.isKeyPressed(e, Constants.keyCodes.ENTER) && selected >= 0) {
+            e.preventDefault()
+            props.refs.current[selected].current.click()
+        }
+    }
+
+    useEffect(() => {
+        if (selected >= 0)
+            props.refs.current[selected].current.parentElement.focus()
+
+        document.addEventListener('keydown', handleUpDownKeyPress)
+        document.addEventListener('keydown', handleEnterKeyPress)
+
+        // cleanup function
+        return () => {
+            document.removeEventListener('keydown', handleUpDownKeyPress)
+            document.removeEventListener('keydown', handleEnterKeyPress)
+        }
+    }, [selected, results])
+
     return (
         <Dialog
             className='BoardSwitcherDialog'
@@ -64,6 +104,7 @@ const SearchDialog = (props: Props): JSX.Element => {
                             <div
                                 key={Utils.uuid()}
                                 className='searchResult'
+                                tabIndex={-1}
                             >
                                 {result}
                             </div>

webapp/src/constants.ts

@@ -161,6 +161,10 @@ class Constants {
 
     static readonly keyCodes: {[key: string]: [string, number]} = {
         COMPOSING: ['Composing', 229],
+        ESC: ['Esc', 27],
+        UP: ['Up', 38],
+        DOWN: ['Down', 40],
+        ENTER: ['Enter', 13],
         A: ['a', 65],
         B: ['b', 66],
         C: ['c', 67],

webapp/src/utils.ts

@@ -743,6 +743,11 @@ class Utils {
 
         return bytes.toFixed(dp) + ' ' + units[u]
     }
+
+    // Clamps a number between a ceiling and a floor, inclusive. Optionally absolute value, too.
+    static clamp(number: number, min: number, max: number, absolute?: boolean) : number {
+        return absolute ? Math.abs(Math.max(min, Math.min(number, max))) : Math.max(min, Math.min(number, max))
+    }
 }
 
 export {Utils, IDType}