[A11Y-196] Restore the V0 link text label association

.changeset/v0-link-text-label.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-editor": patch
+---
+
+Restore the programmatic association between the visible Link text label and its form input in the V0 editor.

src/rich-text/plugins/link-editor.ts

@@ -78,7 +78,7 @@ export class LinkEditor extends PluginInterfaceView<
                 <label for="link-editor-text-input-${randomId}" class="s-label mb4">${_t(
                     "link_editor.text_label"
                 )}</label>
-                <input id="link-text-href-input-${randomId}" class="s-input js-link-editor-text" type="text" name="text" />
+                <input id="link-editor-text-input-${randomId}" class="s-input js-link-editor-text" type="text" name="text" />
             </div>
 
             <div class="flex--item">

test/rich-text/editor.e2e.test.ts

@@ -56,6 +56,31 @@ test.describe.serial("rich-text mode", () => {
         );
     });
 
+    test("should label link fields and save link text and destination", async () => {
+        await clearEditor(page);
+        await page.locator(editorSelector).focus();
+        await page.locator(".js-insert-link-btn").click();
+
+        const linkUrl = page.getByRole("textbox", {
+            name: "Link URL",
+            exact: true,
+        });
+        const linkText = page.getByRole("textbox", {
+            name: "Link text",
+            exact: true,
+        });
+        await expect(linkUrl).toBeFocused();
+        await linkUrl.fill("https://stackoverflow.com/");
+        await page.keyboard.press("Tab");
+        await expect(linkText).toBeFocused();
+        await linkText.fill("Example link");
+        await page.locator(".js-link-editor-save-btn").click();
+
+        expect(await getMarkdownContent(page)).toMatch(
+            /^\[Example link\]\(https:\/\/stackoverflow\.com\/\)\n?$/
+        );
+    });
+
     test("should insert heading from dropdown", async () => {
         await enterTextAsMarkdown(page, "plain text");
         await page.locator(editorSelector).focus();

test/rich-text/plugins/link-editor.test.ts

@@ -55,6 +55,30 @@ describe("link-editor", () => {
             expect(updatedUploadContainer.parentElement).toBeTruthy();
         });
 
+        it("should associate each visible label with its input", () => {
+            showLinkEditor(view.editorView);
+            editor.update(view.editorView);
+
+            const container = getViewContainer(editor);
+            const labels =
+                container.querySelectorAll<HTMLLabelElement>("label");
+            const inputs = [
+                container.querySelector<HTMLInputElement>(
+                    ".js-link-editor-href"
+                ),
+                container.querySelector<HTMLInputElement>(
+                    ".js-link-editor-text"
+                ),
+            ];
+
+            expect(labels).toHaveLength(2);
+            labels.forEach((label, index) => {
+                expect(inputs[index]).toBeInstanceOf(HTMLInputElement);
+                expect(label.htmlFor).toBe(inputs[index]?.id);
+                expect(label.control).toBe(inputs[index]);
+            });
+        });
+
         it("should focus first input when showing image uploader", () => {
             // we need to add our DOM to the doc's body in order to make jsdom's "focus" handling work
             // see https://github.com/jsdom/jsdom/issues/2586#issuecomment-742593116