Background styles for focused action list item

Author: dgreif

src/ActionList/Item.tsx

@@ -53,12 +53,16 @@ const StyledItem = styled.div<{variant: ItemProps['variant']} & SxProp>`
 
   @media (hover: hover) and (pointer: fine) {
     :hover {
-      background: ${props =>
-        props.variant === 'danger' ? get('colors.bg.danger') : get('colors.selectMenu.tapHighlight')};
+      background: ${props => (props.variant === 'danger' ? '#FFF0F2' : '#F0F3F5')};
       cursor: pointer;
     }
   }
 
+  &:focus {
+    background: ${props => (props.variant === 'danger' ? '#FFDBE0' : '#E0E4E7')};
+    outline: none;
+  }
+
   ${sx}
 `
 
@@ -103,7 +107,7 @@ export function Item({
   ...props
 }: Partial<ItemProps>): JSX.Element {
   return (
-    <StyledItem variant={variant} {...props}>
+    <StyledItem tabIndex={-1} variant={variant} {...props}>
       {LeadingVisual && (
         <LeadingVisualContainer>
           <LeadingVisual />

src/stories/ActionList.stories.tsx

@@ -10,12 +10,13 @@ import {
   GearIcon
 } from '@primer/octicons-react'
 import {Meta} from '@storybook/react'
-import React from 'react'
+import React, {useRef} from 'react'
 import styled from 'styled-components'
 import {ThemeProvider} from '..'
 import {ActionList as _ActionList} from '../ActionList'
 import {Header} from '../ActionList/Header'
 import BaseStyles from '../BaseStyles'
+import {useFocusZone} from '../hooks/useFocusZone'
 import sx from '../sx'
 
 const ActionList = Object.assign(_ActionList, {
@@ -77,10 +78,13 @@ export function ActionsStory(): JSX.Element {
 ActionsStory.storyName = 'Actions'
 
 export function SimpleListStory(): JSX.Element {
+  const containerRef = useRef(null)
+  useFocusZone({containerRef})
+
   return (
     <>
       <h1>Simple List</h1>
-      <ErsatzOverlay>
+      <ErsatzOverlay ref={containerRef}>
         <ActionList
           items={[
             {text: 'New file'},