Fix ID collision in FormTokenField suggestions list

[Copilot]

Hardcoded id="ftf-suggestions" breaks ARIA associations and violates HTML uniqueness when multiple FormTokenField instances exist on the same page.

Changes

• Dynamic suggestionsId — derived from label prop using the codebase-standard pattern; sanitizes to [a-z0-9-_] to produce valid HTML IDs
• useId() fallback — uses React 18's useId() when no label is provided, guaranteeing per-instance uniqueness
• Applied consistently to both aria-controls on <input> and id on the suggestions <ul>

const generatedId = useId();
const suggestionsId = label
    ? `formtoken-${ label.toLowerCase().replace( /\s+/g, '-' ).replace( /[^a-z0-9-_]/g, '' ) }`
    : `formtoken-${ generatedId }`;

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
gutendocs	Ready	Preview, Comment	Feb 23, 2026 10:34pm

[flexseth]

@copilot has this been merged?

[Copilot]

@copilot has this been merged?

Not yet — PR #24 is still open and marked as a draft. It's targeting the feature/form-token-field branch (PR #22) as its base. Once #22 is ready and merged, this PR can be reviewed and merged on top of it.

[flexseth]

The hardcoded id="ftf-suggestions" violated HTML uniqueness requirements and broke ARIA associations when multiple FormTokenField instances appeared on the same page.

Can we make a standard for components, such that if there is more than one on a page, they will not collide?

I will approve this PR, and merge.

@copilot - Please make a new PR to add the anti-collision method to all other components, can you do that?

[flexseth]

This is a feature fix when trying to create a single post or page with multiple components of the same type on it. Should extend beyond just this component, we will address the PR in the future as the plugin UI starts working better.