fix(custom-widgets): address v2 merge review (#6446)

packages/custom-widgets/src/workbench/code-editor.tsx

@@ -100,7 +100,7 @@ export function CustomWidgetCodeEditor(props: CustomWidgetCodeEditorProps) {
       description={props.description}
       error={props.error}
       required={props.required}
-      labelProps={{ htmlFor: props.id }}
+      labelProps={{ id: `${props.id}-label`, htmlFor: props.id }}
       inputWrapperOrder={["label", "description", "input", "error"]}
     >
       <div className={classes.root}>
@@ -152,7 +152,8 @@ export function CustomWidgetCodeEditor(props: CustomWidgetCodeEditorProps) {
           {editorReady ? (
             <Suspense fallback={<EditorLoader />}>
               <LazyCodeMirror
-                id={`${props.id}-root`}
+                id={props.id}
+                labelledBy={`${props.id}-label`}
                 value={props.value}
                 language={props.language}
                 diagnostics={diagnostics}

packages/custom-widgets/src/workbench/direct-code-mirror.tsx

@@ -24,6 +24,7 @@ interface DirectCodeMirrorProps {
   completions: Completion[];
   id: string;
   label: string;
+  labelledBy: string;
   placeholder?: string;
   height: string;
   theme: "light" | "dark";
@@ -121,7 +122,7 @@ function createExtensions(instanceId: string, props: DirectCodeMirrorProps) {
         };
       }),
     ),
-    EditorView.contentAttributes.of({ id: props.id, "aria-label": props.label }),
+    EditorView.contentAttributes.of({ id: props.id, "aria-label": props.label, "aria-labelledby": props.labelledBy }),
     EditorView.editable.of(!props.readOnly),
     EditorState.readOnly.of(props.readOnly),
     keymap.of(props.readOnly ? [] : [indentWithTab]),