feat: make slash command menu a listbox for screen reader support

src/components/Editor.tsx

@@ -11,6 +11,7 @@ import SlashCommandMenu, {
 	slashCommands,
 	type SlashCommand,
 } from "./SlashCommandMenu";
+import { useCodeMirrorListboxAriaAttributes } from "../hooks/useCodeMirrorListboxAriaAttributes";
 
 interface EditorProps {
 	value: string;
@@ -31,14 +32,19 @@ export default function Editor({ value, onChange }: EditorProps) {
 	const filteredCommandsRef = useRef<SlashCommand[]>([]);
 
 	const filteredCommands = slashCommands.filter((cmd) => {
-		const matchesQuery = cmd.label
-			.toLowerCase()
-			.includes(searchQuery.toLowerCase());
+		const matchesQuery = cmd.label.toLowerCase().includes(searchQuery.toLowerCase());
 		if (isInlineTrigger) {
 			return matchesQuery && cmd.inline;
 		}
 		return matchesQuery;
 	});
+
+	const { extension: listboxAriaExtension, listboxId, getOptionId } =
+		useCodeMirrorListboxAriaAttributes({
+			editorRef,
+			open: showMenu && filteredCommands.length > 0,
+			activeOptionIndex: filteredCommands[selectedIndex] ? selectedIndex : undefined,
+		});
 
 	useEffect(() => {
 		showMenuRef.current = showMenu;
@@ -175,6 +181,7 @@ export default function Editor({ value, onChange }: EditorProps) {
 				theme={githubLight}
 				extensions={[
 					slashCommandKeymap,
+					listboxAriaExtension,
 					markdown({ codeLanguages: languages }),
 					EditorView.lineWrapping,
 				]}
@@ -193,6 +200,9 @@ export default function Editor({ value, onChange }: EditorProps) {
 				<SlashCommandMenu
 					commands={filteredCommands}
 					selectedIndex={selectedIndex}
+					position={menuPosition}
+					listboxId={listboxId}
+					getOptionId={getOptionId}
 					onSelect={(cmd) => doInsert(cmd)}
 					onClose={() => setShowMenu(false)}
 				/>

src/components/SlashCommandMenu.tsx

@@ -153,13 +153,19 @@ export const slashCommands: SlashCommand[] = [
 interface SlashCommandMenuProps {
 	commands: SlashCommand[];
 	selectedIndex: number;
+	position: { top: number; left: number };
+	listboxId: string;
+	getOptionId: (index: number) => string;
 	onSelect: (command: SlashCommand) => void;
 	onClose: () => void;
 }
 
 export default function SlashCommandMenu({
 	commands,
 	selectedIndex,
+	position,
+	listboxId,
+	getOptionId,
 	onSelect,
 	onClose,
 }: SlashCommandMenuProps) {
@@ -196,6 +202,9 @@ export default function SlashCommandMenu({
 				<div className="slash-command-menu-positioner fixed w-60 max-w-fit h-min [perspective:600px]">
 					<motion.div
 						ref={menuRef}
+						role="listbox"
+						id={listboxId}
+						aria-label="Slash commands"
 						className="bg-white border border-gray-200 rounded-lg shadow-lg py-2 max-h-64 max-w-64 overflow-y-auto z-50"
 						style={{ transformOrigin: "top left" }}
 						initial={{ rotateY: -70, opacity: 0 }}
@@ -206,6 +215,9 @@ export default function SlashCommandMenu({
 						{commands.map((command, index) => (
 							<button
 								key={command.label}
+								role="option"
+								id={getOptionId(index)}
+								aria-selected={index === selectedIndex}
 								onClick={() => onSelect(command)}
 								className={`w-full text-left px-4 py-2 hover:bg-gray-100 transition-colors ${
 									index === selectedIndex

src/hooks/useCodeMirrorListboxAriaAttributes.ts

@@ -0,0 +1,74 @@
+import { useCallback, useId, useLayoutEffect, useMemo } from "react";
+import type { RefObject } from "react";
+import { Compartment, type Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import type { ReactCodeMirrorRef } from "@uiw/react-codemirror";
+
+interface UseCodeMirrorListboxAriaAttributesProps {
+	editorRef: RefObject<ReactCodeMirrorRef | null>;
+	open: boolean;
+	activeOptionIndex?: number;
+}
+
+interface UseCodeMirrorListboxAriaAttributesResult {
+	extension: Extension;
+	listboxId: string;
+	getOptionId: (index: number) => string;
+}
+
+export function useCodeMirrorListboxAriaAttributes({
+	editorRef,
+	open,
+	activeOptionIndex,
+}: UseCodeMirrorListboxAriaAttributesProps): UseCodeMirrorListboxAriaAttributesResult {
+	const baseId = useId();
+	const listboxId = `${baseId}-listbox`;
+	const getOptionId = useCallback(
+		(index: number) => `${baseId}-opt-${index}`,
+		[baseId],
+	);
+	const ariaCompartment = useMemo(() => new Compartment(), []);
+	const extension = useMemo(
+		() =>
+			ariaCompartment.of(
+				EditorView.contentAttributes.of({
+					"aria-haspopup": "listbox",
+					"aria-expanded": "false",
+				}),
+			),
+		[ariaCompartment],
+	);
+
+	// useLayoutEffect ensures CodeMirror ARIA attrs update before paint.
+	useLayoutEffect(() => {
+		const view = editorRef.current?.view;
+		if (!view) return;
+
+		const attributes: Record<string, string> = {
+			"aria-haspopup": "listbox",
+			"aria-expanded": String(open),
+		};
+
+		if (open) {
+			attributes["aria-controls"] = listboxId;
+			// Listbox is rendered outside CodeMirror's DOM subtree.
+			attributes["aria-owns"] = listboxId;
+
+			if (activeOptionIndex !== undefined) {
+				attributes["aria-activedescendant"] = getOptionId(activeOptionIndex);
+			}
+		}
+
+		view.dispatch({
+			effects: ariaCompartment.reconfigure(
+				EditorView.contentAttributes.of(attributes),
+			),
+		});
+	}, [activeOptionIndex, ariaCompartment, editorRef, getOptionId, listboxId, open]);
+
+	return {
+		extension,
+		listboxId,
+		getOptionId,
+	};
+}