[A11Y-196] Associate the link text label with its input

[alexwarren]

Jira: https://stackoverflow.atlassian.net/browse/A11Y-196
Companion Stack Overflow PR: https://github.com/StackEng/StackOverflow/pull/26194

Summary

• Correct the shared editor link dialog association for the visible Link text label.
• Add regression coverage for both visible labels.
• Add a patch changeset for release.

Before and after

Run npm start and use the editor at the local address shown in the output, normally http://localhost:8080/. Test main first, then this PR branch, with a screen reader enabled.

Before (main)

1. Open the rich-text editor and open the Link dialog from the toolbar.
2. Move focus from the URL field to the Link text field.

Expected baseline: Link text is visible, but its label points to a different element ID. A screen reader therefore does not announce Link text as the field name.

After (this PR)

Repeat the steps and confirm:

• The first field is announced as the link URL field.
• The second field is announced as Link text.
• Typing and saving a link still produce the same link text and destination.
• The visual layout is unchanged.

Screenshot evidence

The A11Y-196 Jira ticket contains the original SO_49 screenshots. No after screenshot is included because this is a programmatic label association with no intentional visual change; the screen-reader announcement is the before/after evidence.

Ticket checklist

• Link text has a programmatic label matching its visible label.
• Shared implementation covers question and article editors once the patch release is consumed.

Verification

• npm run test:unit -- --runInBand (1,093 passing)
• npm run lint (passes; two existing warning-only tests)
• npm run build (passes with existing bundle-size warnings)
• git diff --check

[changeset-bot]

🦋 Changeset detected

Latest commit: f2262bd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@stackoverflow/stacks-editor	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for stacks-editor ready!

Name	Link
🔨 Latest commit	f2262bd
🔍 Latest deploy log	https://app.netlify.com/projects/stacks-editor/deploys/6aaab6d3eec029000862e7f2
😎 Deploy Preview	https://deploy-preview-530--stacks-editor.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[Copilot]

🔵 Needs a closer look

Strengthen the regression test to verify each label targets its intended input.

Pull request overview

This PR fixes the shared link editor’s “Link text” label association, adds regression coverage, and includes a patch changeset.

Changes:

• Corrects the text input ID.
• Adds label association tests.
• Adds a patch release changeset.

File summaries

File	Summary
test/rich-text/plugins/link-editor.test.ts	Adds accessibility coverage, but does not verify each label targets the intended input (moderate, 1 vote).
src/rich-text/plugins/link-editor.ts	Fixes the label-to-input association.
.changeset/a11y-link-text-label.md	Records the patch release.

Review details

Suppressed comments (1)

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

• This only verifies that each for value resolves to some <input>, so a regression that swaps the href and text IDs would still pass while the “Link text” label targets the URL field. Assert the first label resolves to .js-link-editor-href and the second to .js-link-editor-text (or compare each resolved node with those expected selectors).

            labels.forEach((label) => {
                expect(label.htmlFor).not.toBe("");
                expect(
                    container.querySelector(`#${label.htmlFor}`)
                ).toBeInstanceOf(HTMLInputElement);

• Files reviewed: 3/3 changed files
• Comments generated: 0
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟢 Approval recommended

The accessibility fix, regression coverage, and patch changeset are complete with no unresolved blocking issues.

Review details

• Files reviewed: 3/3 changed files
• Comments generated: 0 new
• Review effort level: Lite