diff --git a/.changeset/a11y-link-text-label.md b/.changeset/a11y-link-text-label.md new file mode 100644 index 00000000..3d6d97a9 --- /dev/null +++ b/.changeset/a11y-link-text-label.md @@ -0,0 +1,5 @@ +--- +"@stackoverflow/stacks-editor": patch +--- + +Associate the visible link text label with its form input. diff --git a/src/rich-text/plugins/link-editor.ts b/src/rich-text/plugins/link-editor.ts index cebe4974..26ea8e1b 100644 --- a/src/rich-text/plugins/link-editor.ts +++ b/src/rich-text/plugins/link-editor.ts @@ -78,7 +78,7 @@ export class LinkEditor extends PluginInterfaceView< - +
diff --git a/test/rich-text/plugins/link-editor.test.ts b/test/rich-text/plugins/link-editor.test.ts index fa499d9a..a5665877 100644 --- a/test/rich-text/plugins/link-editor.test.ts +++ b/test/rich-text/plugins/link-editor.test.ts @@ -55,6 +55,29 @@ 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("label"); + const inputs = [ + container.querySelector( + ".js-link-editor-href" + ), + container.querySelector( + ".js-link-editor-text" + ), + ]; + + expect(labels).toHaveLength(2); + labels.forEach((label, index) => { + expect(inputs[index]).toBeInstanceOf(HTMLInputElement); + expect(label.htmlFor).toBe(inputs[index]?.id); + }); + }); + 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