fix(core/form/inputs): fix issue with navigating to toolbarbuttons wi…

…th tab It should be possible to hit Tab and get to the annotation and inline block edit toolbar buttons.
sanity-io · Oct 24, 2023 · 301a283 · 301a283
1 parent 3c64bec
commit 301a283
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 6 deletions.
diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/AnnotationToolbarPopover.tsx
@@ -46,7 +46,7 @@ export function AnnotationToolbarPopover(props: AnnotationToolbarPopoverProps) {
   const [cursorRect, setCursorRect] = useState<DOMRect | null>(null)
   const rangeRef = useRef<Range | null>(null)
   const {sanity} = useTheme()
-  const popoverRef = useRef<HTMLDivElement | null>(null)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
   const popoverScheme = sanity.color.dark ? 'light' : 'dark'
 
   // This is a "virtual element" (supported by Popper.js)
@@ -68,11 +68,19 @@ export function AnnotationToolbarPopover(props: AnnotationToolbarPopoverProps) {
         if (!popoverOpen) {
           return
         }
+        if (event.key === 'Tab' && buttonRef.current && selected) {
+          event.stopImmediatePropagation()
+          if (document.activeElement !== buttonRef.current) {
+            setTimeout(() => {
+              if (buttonRef.current) buttonRef.current.focus()
+            })
+          }
+        }
         if (event.key === 'Escape') {
           setPopoverOpen(false)
         }
       },
-      [popoverOpen],
+      [popoverOpen, selected],
     ),
   )
 
@@ -167,6 +175,7 @@ export function AnnotationToolbarPopover(props: AnnotationToolbarPopoverProps) {
               </Text>
             </Box>
             <Button
+              ref={buttonRef}
               icon={EditIcon}
               mode="bleed"
               onClick={handleEditButtonClicked}
@@ -190,7 +199,6 @@ export function AnnotationToolbarPopover(props: AnnotationToolbarPopoverProps) {
       placement="top"
       portal
       preventOverflow
-      ref={popoverRef}
       referenceBoundary={referenceBoundary}
       referenceElement={cursorElement}
       scheme={popoverScheme}

diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObject.tsx
@@ -310,6 +310,7 @@ export const DefaultInlineObjectComponent = (props: BlockProps) => {
           open={popoverOpen}
           referenceBoundary={referenceBoundary}
           referenceElement={referenceElement}
+          selected={selected}
           title={popoverTitle}
         />
       )}

diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/InlineObjectToolbarPopover.tsx
@@ -28,6 +28,7 @@ interface InlineObjectToolbarPopoverProps {
   onEdit: (event: React.MouseEvent<HTMLButtonElement>) => void
   referenceBoundary: HTMLElement | null
   referenceElement: HTMLElement | null
+  selected: boolean
   title: string
 }
 
@@ -39,6 +40,7 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
     onDelete,
     referenceBoundary,
     referenceElement,
+    selected,
     title,
     open,
   } = props
@@ -52,13 +54,21 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
   useGlobalKeyDown(
     useCallback(
       (event) => {
+        if (event.key === 'Tab' && editButtonRef.current && selected) {
+          event.stopImmediatePropagation()
+          if (document.activeElement !== editButtonRef.current) {
+            setTimeout(() => {
+              if (editButtonRef.current) editButtonRef.current.focus()
+            })
+          }
+        }
         if (event.key === 'Escape') {
           event.preventDefault()
           event.stopPropagation()
           onClosePopover()
         }
       },
-      [onClosePopover],
+      [onClosePopover, selected],
     ),
   )
 
@@ -84,7 +94,7 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
 
   const popoverContent = useMemo(
     () => (
-      <Box padding={1}>
+      <Box padding={1} data-testid="inline-object-toolbar-popover">
         <Inline space={1}>
           <Box padding={2}>
             <Text weight="semibold" size={1}>
@@ -98,6 +108,7 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
             padding={2}
             ref={editButtonRef}
             alt="Edit object"
+            tabIndex={0}
           />
           <Button
             ref={deleteButtonRef}
@@ -107,6 +118,7 @@ export function InlineObjectToolbarPopover(props: InlineObjectToolbarPopoverProp
             onClick={handleDelete}
             tone="critical"
             alt="Remove object"
+            tabIndex={0}
           />
         </Inline>
       </Box>

diff --git a/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx b/packages/sanity/src/core/form/inputs/PortableText/object/modals/PopoverModal.tsx
@@ -78,7 +78,12 @@ function Content(props: PopoverEditDialogProps) {
       scrollElement={contentElement}
       containerElement={containerElement}
     >
-      <Flex ref={containerElement} direction="column" height="fill">
+      <Flex
+        ref={containerElement}
+        direction="column"
+        height="fill"
+        data-testid="popover-edit-object-dialog"
+      >
         <ContentHeaderBox flex="none" padding={1}>
           <Flex align="center">
             <Box flex={1} padding={2}>