refactor: cleanup implementation

demos/src/Examples/Accessibility/React/InsertMenu.tsx

@@ -1,7 +1,7 @@
 import { Editor, FloatingMenu, useEditorState } from '@tiptap/react'
 import React, { useRef } from 'react'
 
-import { useFocusMenubar } from './useFocusMenubar.js'
+import { useMenubarNav } from './useMenubarNav.js'
 
 /**
  * A floating menu for inserting new elements like lists, horizontal rules, etc.
@@ -21,10 +21,11 @@ export function InsertMenu({ editor }: { editor: Editor }) {
   })
 
   // Handle arrow navigation within a menu bar container, and allow to escape to the editor
-  const { focusButton } = useFocusMenubar({
+  const { getFocusableElements } = useMenubarNav({
     editor,
     ref: containerRef,
-    onEscape: () => {
+    onEscape: e => {
+      e.preventDefault()
       // On escape, focus the editor
       editor.chain().focus().run()
     },
@@ -43,8 +44,8 @@ export function InsertMenu({ editor }: { editor: Editor }) {
       onFocus={e => {
         // The ref we have is to the container, not the menu itself
         if (containerRef.current === e.target?.parentNode) {
-          // Focus the first button when the menu bar is focused
-          focusButton(containerRef.current?.querySelector('button'))
+          // Focus the first enabled button-like when the menu bar is focused
+          getFocusableElements()?.[0]?.focus()
         }
       }}
       tabIndex={0}

demos/src/Examples/Accessibility/React/MenuBar.tsx

@@ -2,7 +2,7 @@ import { Editor } from '@tiptap/core'
 import { useEditorState } from '@tiptap/react'
 import React, { useEffect, useRef, useState } from 'react'
 
-import { useFocusMenubar } from './useFocusMenubar.js'
+import { useMenubarNav } from './useMenubarNav.js'
 
 /**
  * Handles the heading dropdown
@@ -48,10 +48,24 @@ function NodeTypeDropdown({ editor }: { editor: Editor }) {
   }, [])
 
   return (
-    <div className="node-type-dropdown__container" ref={menuRef}>
+    <div
+      className="node-type-dropdown__container"
+      ref={menuRef}
+      onKeyDown={e => {
+        // Escape or tab should close the dropdown if it's open
+        if (isOpen && (e.key === 'Escape' || e.key === 'Tab')) {
+          setIsOpen(false)
+          if (e.key === 'Escape') {
+            // Prevent the editor from handling the escape key
+            e.preventDefault()
+          }
+        }
+      }}
+    >
       <button
-        onClick={() => {
+        onClick={e => {
           setIsOpen(open => !open)
+          e.stopPropagation()
         }}
         onKeyDown={e => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -257,7 +271,7 @@ export function MenuBar({ editor }: { editor: Editor }) {
     },
   })
 
-  useFocusMenubar({
+  useMenubarNav({
     ref: containerRef,
     editor,
     onKeydown: event => {

demos/src/Examples/Accessibility/React/TextMenu.tsx

@@ -2,7 +2,7 @@ import { Selection } from '@tiptap/pm/state'
 import { BubbleMenu, Editor, useEditorState } from '@tiptap/react'
 import React, { useRef } from 'react'
 
-import { useFocusMenubar } from './useFocusMenubar.js'
+import { useMenubarNav } from './useMenubarNav.js'
 
 /**
  * Handles formatting text with marks like bold, italic, etc.
@@ -33,10 +33,11 @@ export function TextMenu({ editor }: { editor: Editor }) {
   })
 
   // Handle arrow navigation within a menu bar container, and allow to escape to the editor
-  const { focusButton } = useFocusMenubar({
+  const { getFocusableElements } = useMenubarNav({
     editor,
     ref: containerRef,
-    onEscape: () => {
+    onEscape: e => {
+      e.preventDefault()
       // On escape, focus the editor & dismiss the menu by moving the selection to the end of the selection
       editor
         .chain()
@@ -63,7 +64,7 @@ export function TextMenu({ editor }: { editor: Editor }) {
         // The ref we have is to the container, not the menu itself
         if (containerRef.current === e.target?.parentNode) {
           // Focus the first button when the menu bar is focused
-          focusButton(containerRef.current?.querySelector('button'))
+          getFocusableElements()?.[0]?.focus()
         }
       }}
       tabIndex={0}