fix: improve accessible labels for CodeMirror views (#385)

Author: Pixel998

src/app.tsx

@@ -32,6 +32,7 @@ function App() {
 								>
 									<EsquerySelectorInput />
 									<Editor
+										ariaLabel="Code Editor"
 										value={code[language]}
 										highlightedRanges={
 											astParseResult.ok

src/components/ast/index.tsx

@@ -40,5 +40,11 @@ export const AST: FC = () => {
 		);
 	}
 
-	return <Editor readOnly value={JSON.stringify(result.ast, null, 2)} />;
+	return (
+		<Editor
+			ariaLabel="AST JSON"
+			readOnly
+			value={JSON.stringify(result.ast, null, 2)}
+		/>
+	);
 };

src/components/editor.tsx

@@ -28,13 +28,15 @@ const languageExtensions: Record<
 };
 
 type EditorProperties = {
+	ariaLabel: string;
 	readOnly?: boolean;
 	value?: string;
 	highlightedRanges?: SourceRange[];
 	onChange?: (value: string) => void;
 };
 
 export const Editor: FC<EditorProperties> = ({
+	ariaLabel,
 	readOnly,
 	value,
 	highlightedRanges = [],
@@ -55,11 +57,12 @@ export const Editor: FC<EditorProperties> = ({
 		() => [
 			activeLanguageExtension,
 			wrap ? EditorView.lineWrapping : [],
+			EditorView.contentAttributes.of({ "aria-label": ariaLabel }),
 			ESLintPlaygroundTheme,
 			ESLintPlaygroundHighlightStyle,
 			highlightedRangesExtension(highlightedRanges),
 		],
-		[activeLanguageExtension, wrap, highlightedRanges],
+		[activeLanguageExtension, wrap, ariaLabel, highlightedRanges],
 	);
 
 	const debouncedOnChange = useMemo(
@@ -173,7 +176,6 @@ export const Editor: FC<EditorProperties> = ({
 				</div>
 			)}
 			<CodeMirror
-				aria-label="Code Editor"
 				className="h-full overflow-auto scrollbar-thumb scrollbar-track text-sm"
 				value={value}
 				extensions={editorExtensions}

src/components/path/index.tsx

@@ -91,7 +91,7 @@ export const CodePath: FC = () => {
 	const codePath = extracted.codePathList[index].dot;
 
 	if (pathView === "code") {
-		return <Editor readOnly value={codePath} />;
+		return <Editor ariaLabel="Code Path" readOnly value={codePath} />;
 	}
 
 	return (