**Feature:** Tree a11y

src/Tree/ChildTree.tsx

@@ -25,6 +25,7 @@ const ChildTree: React.SFC<Props> = ({
   droppableProps,
   onClick,
   onContextMenu,
+  onDoubleClick,
   onRemove,
   cursor,
   searchWords,
@@ -33,25 +34,74 @@ const ChildTree: React.SFC<Props> = ({
 }) => {
   const [isOpen, setIsOpen] = React.useState(Boolean(initiallyOpen))
   const hasChildren = Boolean(childNodes && childNodes.length)
+  const clickCount = React.useRef(0)
+
+  /**
+   * This ensures that single-click isn't caught when double clicking:
+   * we set a timeout to catch the second click in a doubleclick event.
+   * If found, we do nothing. If not found within the time window, we
+   * fire the single click event.
+   */
+
+  const millisecondsToWaitForDoubleClick = 200
+  const clickTimeout = React.useRef(0)
+
+  const onNodeContextMenu = React.useMemo(
+    () =>
+      !disabled && onContextMenu
+        ? (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+            event.preventDefault()
+            onContextMenu(event)
+          }
+        : undefined,
+    [disabled, onContextMenu],
+  )
+
   const onNodeClick =
     !disabled && (hasChildren || onClick)
       ? (e: React.MouseEvent<HTMLDivElement>) => {
           e.stopPropagation()
-          if (hasChildren) {
-            setIsOpen(!isOpen)
+          if (e.altKey && onNodeContextMenu) {
+            onNodeContextMenu(e)
+            return
           }
-          if (onClick) {
-            onClick()
+          if (clickTimeout.current) {
+            clearTimeout(clickTimeout.current)
           }
+          clickCount.current++
+          clickTimeout.current = window.setTimeout(
+            () => {
+              if (clickCount.current === 1) {
+                if (hasChildren) {
+                  setIsOpen(!isOpen)
+                }
+                if (onClick) {
+                  onClick()
+                }
+              }
+              clickCount.current = 0
+            },
+            onDoubleClick ? millisecondsToWaitForDoubleClick : 0,
+          )
         }
       : undefined
 
-  const onNodeContextMenu = React.useMemo(
+  // Clean up timer on unmount
+  React.useEffect(
+    () => () => {
+      if (clickTimeout.current) {
+        clearTimeout(clickTimeout.current)
+      }
+    },
+    [clickTimeout],
+  )
+
+  const onNodeDoubleClick = React.useMemo(
     () =>
-      !disabled && onContextMenu
+      !disabled && onDoubleClick
         ? (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
             event.preventDefault()
-            onContextMenu(event)
+            onDoubleClick(event)
           }
         : undefined,
     [disabled, onContextMenu],
@@ -64,6 +114,7 @@ const ChildTree: React.SFC<Props> = ({
         searchWords={searchWords}
         onNodeClick={onNodeClick}
         onNodeContextMenu={onNodeContextMenu}
+        onNodeDoubleClick={onNodeDoubleClick}
         highlight={Boolean(highlight)}
         hasChildren={hasChildren}
         isOpen={isOpen}

src/Tree/README.md

@@ -1,6 +1,22 @@
+### Usage
+
 The tree component renders a tree structure with collapsable nodes in a filetree-like design. Defined items in the tree can have a custom click and a context-click handler.
 
-### Usage
+The tree component is also keyboard accessible:
+
+- <kbd>Tab</kbd> navigates to the next node
+- <kbd>Shift</kbd>+<kbd>Tab</kbd> navigates to the previous node
+- <kbd>Space</kbd> triggers the `onClick` handler, usually expanding a node
+- <kbd>Enter</kbd> triggers the `onDblClick` action
+- <kbd>Alt</kbd>+<kbd>Enter</kbd> triggers the right-click action
+- <kbd>Delete</kbd> or <kbd>Backspace</kbd> triggers the "remove" action, if available
+
+Try it yourself!
+
+- "Region" has a double click/<kbd>Enter</kbd> handler
+- "Country" has a click/<kbd>Space</kbd> handler
+- "Country" has a right-click/<kbd>Alt</kbd>+<kbd>Enter</kbd> handler
+- "Country" has a remove/<kbd>Backspace</kbd>/<kbd>Delete</kbd> handler
 
 ```jsx
 import * as React from "react"
@@ -14,6 +30,7 @@ import { Tree, OlapIcon } from "@operational/components"
         {
           label: "Region",
           initiallyOpen: true,
+          onDoubleClick: () => alert("woah you double clicked region amazing"),
           childNodes: [
             {
               label: "City",

src/Tree/Tree.tsx

@@ -16,6 +16,7 @@ interface BaseTree {
   iconColor?: string
   onClick?: () => void
   onContextMenu?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onDoubleClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   cursor?: string
   onRemove?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
   forwardRef?: (element?: HTMLElement | null) => any

src/Tree/TreeItem.tsx

@@ -1,11 +1,29 @@
-import React from "react"
+import React, { useCallback } from "react"
 import NameTag from "../NameTag/NameTag"
-import { darken } from "../utils"
+import { darken, lighten } from "../utils"
 import styled from "../utils/styled"
 import { ChevronRightIcon, NoIcon, ChevronDownIcon, IconComponentType } from "../Icon/Icon"
 import Highlighter from "react-highlight-words"
 import constants from "../utils/constants"
 
+interface TreeItemProps {
+  level: number
+  highlight: boolean
+  searchWords?: string[]
+  hasChildren: boolean
+  isOpen: boolean
+  label: string
+  tag?: string
+  icon?: IconComponentType
+  iconColor?: string
+  color?: string
+  cursor?: string
+  onNodeClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  onNodeDoubleClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+  onNodeContextMenu?: (e: React.MouseEvent<HTMLDivElement>) => void
+  onRemove?: (e: React.MouseEvent<HTMLDivElement>) => void
+}
+
 const Header = styled("div")<{
   highlight: boolean
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
@@ -20,18 +38,24 @@ const Header = styled("div")<{
   padding: ${({ theme }) => theme.space.base}px;
   border-radius: 2px;
   padding-left: ${({ theme, level }) => theme.space.element * level}px;
+  color: ${({ theme }) => theme.color.text.dark};
 
   :hover {
     background-color: ${({ theme, highlight }) =>
       highlight ? darken(theme.color.highlight, 20) : theme.color.background.lighter};
   }
+
+  :focus {
+    outline: none;
+    color: ${({ theme }) => theme.color.primary};
+    background-color: ${({ theme }) => lighten(theme.color.primary, 50)};
+  }
 `
 
 const Label = styled("div")<{ hasChildren: boolean }>`
   overflow-wrap: break-word;
   font-size: ${({ theme }) => theme.font.size.small}px;
   font-weight: ${({ theme, hasChildren }) => (hasChildren ? theme.font.weight.bold : theme.font.weight.medium)};
-  color: ${({ theme }) => theme.color.text.dark};
 `
 
 const DeleteNode = styled("div")`
@@ -50,23 +74,6 @@ const DeleteNode = styled("div")`
   }
 `
 
-interface TreeItemProps {
-  level: number
-  highlight: boolean
-  searchWords?: string[]
-  hasChildren: boolean
-  isOpen: boolean
-  label: string
-  tag?: string
-  icon?: IconComponentType
-  iconColor?: string
-  color?: string
-  cursor?: string
-  onNodeClick?: (e: React.MouseEvent<HTMLDivElement>) => void
-  onNodeContextMenu?: (e: React.MouseEvent<HTMLDivElement>) => void
-  onRemove?: (e: React.MouseEvent<HTMLDivElement>) => void
-}
-
 const TreeItem: React.SFC<TreeItemProps> = ({
   highlight,
   tag,
@@ -75,51 +82,95 @@ const TreeItem: React.SFC<TreeItemProps> = ({
   label,
   color,
   onNodeClick,
+  onNodeDoubleClick,
   onNodeContextMenu,
   onRemove,
   hasChildren,
   isOpen,
   level,
   cursor,
   searchWords = [],
-}) => (
-  <Header
-    level={level}
-    onClick={onNodeClick}
-    onContextMenu={onNodeContextMenu}
-    highlight={Boolean(highlight)}
-    cursor={cursor}
-  >
-    {hasChildren &&
-      React.createElement(isOpen ? ChevronDownIcon : ChevronRightIcon, {
-        size: 11,
-        left: true,
-        color: "color.text.action",
-      })}
-    {tag && (
-      <NameTag condensed left color={color}>
-        {tag}
-      </NameTag>
-    )}
-    {icon &&
-      React.createElement(icon, {
-        size: 12,
-        color: iconColor || "color.text.lighter",
-        style: { marginLeft: 0, marginRight: 8, flex: "0 0 15px" },
-      })}
-    <Label hasChildren={hasChildren}>
-      <Highlighter
-        textToHighlight={label}
-        highlightStyle={{ color: constants.color.text.action, backgroundColor: "transparent", fontWeight: "bold" }}
-        searchWords={searchWords}
-      />
-    </Label>
-    {onRemove && (
-      <DeleteNode onClick={onRemove}>
-        <NoIcon size={12} />
-      </DeleteNode>
-    )}
-  </Header>
-)
+}) => {
+  const handleKeyDown = useCallback(
+    e => {
+      switch (e.key) {
+        case "Enter":
+          e.preventDefault()
+          if (e.altKey && onNodeContextMenu) {
+            onNodeContextMenu(e)
+            return
+          }
+
+          if (onNodeDoubleClick) {
+            onNodeDoubleClick(e)
+            return
+          }
+
+          if (onNodeClick) {
+            onNodeClick(e)
+          }
+          return
+        case " ":
+        case "Space": // the platform™
+          e.preventDefault()
+          if (onNodeClick) {
+            onNodeClick(e)
+          }
+          return
+        case "Delete":
+        case "Backspace":
+          e.preventDefault()
+          if (onRemove) {
+            onRemove(e)
+          }
+          return
+      }
+    },
+    [onNodeContextMenu, onNodeDoubleClick, onNodeClick],
+  )
+
+  return (
+    <Header
+      level={level}
+      onClick={onNodeClick}
+      onContextMenu={onNodeContextMenu}
+      onDoubleClick={onNodeDoubleClick}
+      onKeyDown={handleKeyDown}
+      highlight={Boolean(highlight)}
+      cursor={cursor}
+      tabIndex={0}
+    >
+      {hasChildren &&
+        React.createElement(isOpen ? ChevronDownIcon : ChevronRightIcon, {
+          size: 11,
+          left: true,
+          color: "color.text.action",
+        })}
+      {tag && (
+        <NameTag condensed left color={color}>
+          {tag}
+        </NameTag>
+      )}
+      {icon &&
+        React.createElement(icon, {
+          size: 12,
+          color: iconColor || "color.text.lighter",
+          style: { marginLeft: 0, marginRight: 8, flex: "0 0 15px" },
+        })}
+      <Label hasChildren={hasChildren}>
+        <Highlighter
+          textToHighlight={label}
+          highlightStyle={{ color: constants.color.text.action, backgroundColor: "transparent", fontWeight: "bold" }}
+          searchWords={searchWords}
+        />
+      </Label>
+      {onRemove && (
+        <DeleteNode onClick={onRemove}>
+          <NoIcon size={12} />
+        </DeleteNode>
+      )}
+    </Header>
+  )
+}
 
 export default TreeItem