fix: associate selector label with input

[Dedac]

Summary

• keep FormItem for message/error context without using its unassociated label output
• render the visible field label through TextField with a stable field-derived inputId
• generate a separate stable datalist ID and synchronize the native input list attribute on mount and field-name changes
• sanitize field names and include a deterministic hash so spaces and special characters do not create invalid or ambiguous IDs

Accessibility relationship

• TextField renders <label htmlFor={inputId}> and applies the same safe ID to the native input
• the input list attribute points only to the separate datalist ID
• the label/input ID and datalist ID remain distinct

Validation

• npm ci --no-audit --no-fund
• npx tsc --noEmit
• npm run build
• npm run build-dev
• lightweight server-rendered markup check using Customer / Region (Primary) verified:
  • label for equals the rendered input id
  • input list equals the datalist id
  • input and datalist IDs are distinct
• npm run clean removed dist and generated VSIX artifacts

No test framework exists in the repository, so no new test infrastructure was added.

[Copilot]

Copilot review overview

🟡 Changes recommended

Hiding the visible label currently leaves the input without an accessible name.

Review effort: Balanced
Findings: 1

Open (1)

• Preserve accessible name when hiding the field label · New

What changed in this PR

Improves selector accessibility by linking its visible label to the native input and separating input and datalist IDs.

Changes:

• Generates sanitized, deterministic element IDs.
• Associates TextField labels with inputs.
• Synchronizes the input’s datalist reference.

File	Description
src/​RestSelectorControl.tsx	Adds accessible labeling and distinct input/datalist IDs.

---

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