snapshot of https://github.com/ueberdosis/tiptap.git (main, 2026-09-15; blobs > 131072B omitted)

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

@@ -0,0 +1,42 @@
+import './styles.scss'
+
+import { EditorContent, useEditor } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+import React from 'react'
+
+import { InsertMenu } from './InsertMenu.jsx'
+import { MenuBar } from './MenuBar.jsx'
+import { TextMenu } from './TextMenu.jsx'
+
+export default () => {
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: `
+    <h2>Accessibility Demo</h2>
+    <p>Tab into the demo & navigate around with only your keyboard</p>
+    <p>Use <code>Alt + F10</code> to focus the menu bar</p>
+    `,
+    editorProps: {
+      attributes: {
+        // Make sure the editor is announced as a rich text editor
+        'aria-label': 'Rich Text Editor',
+        // editor accepts multiline input
+        'aria-multiline': 'true',
+        'aria-readonly': 'false',
+      },
+    },
+  })
+
+  return (
+    <div role="application" className="editor-application">
+      {/* The static menu bar */}
+      <MenuBar editor={editor} />
+      {/* The editor content */}
+      <EditorContent editor={editor} />
+      {/* Handles marks: bold, italic, etc. using a bubble menu */}
+      <TextMenu editor={editor} />
+      {/* Handles nodes: headings, lists, etc. using a floating menu */}
+      <InsertMenu editor={editor} />
+    </div>
+  )
+}