Elliot/tree focus visible (#1159)

* Added focusVisible behavior to TreeItem border
* Added focusVisible behavior to AccordionDisclosure border
* Added onClick to FieldPicker.stories items
  - Makes items tabbable for testing purposes

Author: Elliot

CHANGELOG.md

@@ -16,6 +16,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 
 - `Fieldset` accordion mode auto-indents elements in the inner `AccordionContent`
+- `AccordionDisclosure`, `TreeItem` no longer display purple border on click
+  - This purple border will only display when tabbing onto a `TreeItem` or `AccordionDisclosure` (`Tree`)
 
 ### Fixed
 

packages/components/src/Accordion/AccordionDisclosure.tsx

@@ -24,64 +24,81 @@
 
  */
 
-import React, { FC, ReactNode, useContext } from 'react'
+import React, { FC, useContext, useState } from 'react'
 import styled from 'styled-components'
 import { TypographyProps, typography } from '@looker/design-tokens'
 import { AccordionContext } from './AccordionContext'
 import { AccordionDisclosureGrid } from './AccordionDisclosureGrid'
 
 export interface AccordionDisclosureProps extends TypographyProps {
-  children: ReactNode
   className?: string
+  focusVisible?: boolean
 }
 
 export const AccordionDisclosureLayout: FC<AccordionDisclosureProps> = ({
   children,
   className,
 }) => {
+  const [isFocusVisible, setFocusVisible] = useState(false)
   const { isOpen, toggleOpen, onClose, onOpen, ...props } = useContext(
     AccordionContext
   )
   const handleOpen = () => onOpen && onOpen()
   const handleClose = () => onClose && onClose()
+  const handleToggle = () => {
+    isOpen ? handleClose() : handleOpen()
+    toggleOpen(!isOpen)
+  }
+
+  const handleKeyUp = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.keyCode === 9 && event.currentTarget === event.target)
+      setFocusVisible(true)
 
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (event.keyCode === 13) {
-      event.currentTarget.click()
+      handleToggle()
     }
   }
+
   const handleClick = () => {
-    isOpen ? handleClose() : handleOpen()
-    toggleOpen(!isOpen)
+    setFocusVisible(false)
+    handleToggle()
+  }
+
+  const handleBlur = () => {
+    setFocusVisible(false)
   }
 
   return (
-    <div
+    <AccordionDisclosureStyle
       className={className}
+      onBlur={handleBlur}
       onClick={handleClick}
-      onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
       tabIndex={0}
+      focusVisible={isFocusVisible}
     >
       <AccordionDisclosureGrid {...props} isOpen={isOpen}>
         {children}
       </AccordionDisclosureGrid>
-    </div>
+    </AccordionDisclosureStyle>
   )
 }
 
-export const AccordionDisclosure = styled(AccordionDisclosureLayout)`
-  ${typography}
-
+export const AccordionDisclosureStyle = styled.div<{ focusVisible: boolean }>`
   align-items: center;
   border: 1px solid transparent;
+  border-color: ${({ focusVisible, theme }) =>
+    focusVisible && theme.colors.keyFocus};
   cursor: pointer;
   display: flex;
+  height: 100%;
   outline: none;
   padding: ${({ theme: { space } }) => `${space.xsmall} ${space.none}`};
+  width: 100%;
+`
 
-  &:focus-within {
-    border-color: ${({ theme }) => theme.colors.keyFocus};
-  }
+export const AccordionDisclosure = styled(AccordionDisclosureLayout)`
+  ${typography}
 `
 
 AccordionDisclosure.defaultProps = {

packages/components/src/Tree/Tree.tsx

@@ -31,6 +31,7 @@ import {
   Accordion,
   AccordionContent,
   AccordionDisclosure,
+  AccordionDisclosureStyle,
   AccordionProps,
   AccordionIndicatorProps,
 } from '../Accordion'
@@ -188,6 +189,9 @@ const TreeStyle = styled.div<TreeStyleProps>`
 
   ${AccordionDisclosure} {
     height: 25px;
+  }
+
+  ${AccordionDisclosureStyle} {
     padding: ${({ theme }) => theme.space.xxsmall};
     ${({ depth, theme }) => generateIndent(depth, theme)}
   }

packages/components/src/Tree/TreeItem.tsx

@@ -31,6 +31,7 @@ import React, {
   ReactNode,
   useContext,
   useRef,
+  useState,
 } from 'react'
 import styled from 'styled-components'
 import { SpacingSizes, uiTransparencyBlend } from '@looker/design-tokens'
@@ -89,26 +90,34 @@ const TreeItemLayout: FC<TreeItemProps> = ({
   const itemRef = useRef<HTMLDivElement>(null)
   const detailRef = useRef<HTMLDivElement>(null)
   const [isHovered] = useHovered(itemRef)
+  const [isFocusVisible, setFocusVisible] = useState(false)
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     if (detailRef.current && detailRef.current.contains(event.target as Node)) {
       event.stopPropagation()
       return
     }
 
+    setFocusVisible(false)
     onClick && onClick()
   }
 
-  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+  const handleKeyUp = (event: KeyboardEvent<HTMLElement>) => {
     if (detailRef.current && detailRef.current.contains(event.target as Node)) {
       event.stopPropagation()
       return
     }
 
-    if (event.keyCode === 13) {
-      event.currentTarget.click()
-    }
+    if (event.keyCode === 9 && event.currentTarget === event.target)
+      setFocusVisible(true)
+
+    if (event.keyCode === 13) onClick && onClick()
   }
+
+  const handleBlur = () => {
+    setFocusVisible(false)
+  }
+
   const defaultIconSize = 12
 
   const detailAccessory =
@@ -129,11 +138,13 @@ const TreeItemLayout: FC<TreeItemProps> = ({
 
   return (
     <HoverDisclosureContext.Provider value={{ visible: isHovered }}>
-      <Space
+      <TreeItemSpace
         className={props.className}
+        focusVisible={isFocusVisible}
         gap="none"
+        onBlur={handleBlur}
         onClick={handleClick}
-        onKeyDown={handleKeyDown}
+        onKeyUp={handleKeyUp}
         ref={itemRef}
         tabIndex={onClick ? 0 : -1}
       >
@@ -143,22 +154,26 @@ const TreeItemLayout: FC<TreeItemProps> = ({
           {!detailAccessory && detail}
         </TreeItemLabel>
         {detailAccessory && detail}
-      </Space>
+      </TreeItemSpace>
     </HoverDisclosureContext.Provider>
   )
 }
 
-export const TreeItem = styled(TreeItemLayout)`
+export const TreeItem = styled(TreeItemLayout)``
+
+interface TreeItemSpace {
+  focusVisible: boolean
+}
+
+export const TreeItemSpace = styled(Space)<TreeItemSpace>`
   align-items: center;
   border: 1px solid transparent;
+  border-color: ${({ focusVisible, theme }) =>
+    focusVisible && theme.colors.keyFocus};
   cursor: ${({ onClick }) => onClick && 'pointer'};
   display: flex;
   height: 25px;
   outline: none;
-
-  &:focus-within {
-    border-color: ${({ theme: { colors } }) => colors.keyFocus};
-  }
 `
 
 interface TreeItemLabelProps {

storybook/src/Tree/FieldPicker.stories.tsx

@@ -119,6 +119,7 @@ const PickerItem = () => {
             </>
           }
           detailHoverDisclosure={!overlay}
+          onClick={() => alert('Clicked on cost!')}
           selected={!!overlay}
           icon="FieldNumber"
         >