add an aria label prop to the cypher editor

neo4j · May 22, 2024 · 64a0833 · 64a0833
1 parent 8a63a35
commit 64a0833
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/packages/react-codemirror-playground/src/App.tsx b/packages/react-codemirror-playground/src/App.tsx
@@ -109,6 +109,7 @@ export function App() {
               theme={darkMode ? 'dark' : 'light'}
               history={Object.values(demos)}
               schema={schema}
+              ariaLabel="Cypher Editor"
             />
 
             {commandRanCount > 0 && (

diff --git a/packages/react-codemirror/src/CypherEditor.tsx b/packages/react-codemirror/src/CypherEditor.tsx
@@ -135,6 +135,12 @@ export interface CypherEditorProps {
    * @default false
    */
   readonly?: boolean;
+
+  /**
+   * String value to assign to the aria-label attribute of the editor
+   *
+   */
+  ariaLabel?: string;
 }
 
 const executeKeybinding = (onExecute?: (cmd: string) => void) =>
@@ -311,6 +317,11 @@ export class CypherEditor extends Component<
             ? EditorView.domEventHandlers(this.props.domEventHandlers)
             : [],
         ),
+        this.props.ariaLabel
+          ? EditorView.contentAttributes.of({
+              'aria-label': this.props.ariaLabel,
+            })
+          : [],
       ],
       doc: this.props.value,
     });