refactor(default-layout): update ToolCollapseMenu with refactored `…

…CollapseMenu` + add roving focus
sanity-io · Feb 16, 2022 · 5d31566 · 5d31566
1 parent c25201a
commit 5d31566
Showing 1 changed file with 20 additions and 6 deletions.
diff --git a/packages/@sanity/default-layout/src/navbar/toolMenuCollapse/ToolMenuCollapse.tsx b/packages/@sanity/default-layout/src/navbar/toolMenuCollapse/ToolMenuCollapse.tsx
@@ -1,17 +1,30 @@
 import {PlugIcon} from '@sanity/icons'
 import {StateLink} from '@sanity/base/router'
-import React, {forwardRef, useMemo} from 'react'
-import {CollapseMenu, CollapseMenuButton} from '@sanity/base/components'
+import React, {forwardRef, useMemo, useState} from 'react'
+import {CollapseMenuButton, CollapseMenu, useRovingFocus} from '@sanity/base/components'
+import {MenuButtonProps, TooltipProps} from '@sanity/ui'
 import {Tool} from '../../types'
 import {useDefaultLayoutRouter} from '../../useDefaultLayoutRouter'
 
+const BUTTON_TOOLTIP_PROPS: TooltipProps = {scheme: 'light'}
+const MENU_BUTTON_PROPS: Omit<MenuButtonProps, 'id' | 'button'> = {
+  popover: {constrainSize: true, portal: true, scheme: 'light'},
+}
+
 export function ToolMenuCollapse({tools}: {tools: Tool[]}) {
   const router = useDefaultLayoutRouter()
+  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
+
+  useRovingFocus({
+    rootElement: rootElement,
+  })
 
   return useMemo(
     () => (
-      <CollapseMenu menuPopoverProps={{scheme: 'light'}} gap={1}>
+      <CollapseMenu menuButtonProps={MENU_BUTTON_PROPS} gap={1} ref={setRootElement}>
         {tools.map((tool) => {
+          const title = tool.title || tool.name
+
           const Link = forwardRef(function Link(props: any, ref: any) {
             return (
               <StateLink
@@ -32,9 +45,10 @@ export function ToolMenuCollapse({tools}: {tools: Tool[]}) {
               as={Link}
               key={tool.name}
               data-as="a"
-              buttonProps={{mode: 'bleed'}}
-              tooltipProps={{scheme: 'light'}}
-              text={tool.title}
+              mode="bleed"
+              tooltipProps={BUTTON_TOOLTIP_PROPS}
+              collapsedProps={{tooltipText: title}}
+              text={title}
               icon={tool.icon || PlugIcon}
               selected={router.state.tool === tool.name}
             />