Give the API keys label-only form an accessible field label and grouping

[mikewheeleer]

Improve the API keys create form labelling and structure

Description

The create form in src/app/api-keys/page.tsx uses only an aria-label="Label" on the input and a placeholder, with no visible <label> and no grouping/legend around the create controls — placeholder-as-label disappears on focus and fails common a11y guidance. This issue gives the form a proper visible, associated label.

Requirements and context

• Repository scope: StableRoute-Org/Stableroute-frontend only.
• Migrate the label input to src/components/TextField.tsx (or add a visible <label> associated by htmlFor/id) so the field has a persistent, programmatically-associated label rather than only aria-label.
• Wrap the create controls in a labelled group/section so the form's purpose is announced.
• Keep the one-time-secret role="status" block, the create/reload flow, and the role="alert" error region unchanged.
• Reuse src/components/Button.tsx for the submit control.

Suggested execution

• Fork the repo and create a branch
• git checkout -b a11y/api-keys-39-label-association
• Implement changes
  • Write code in: src/app/api-keys/page.tsx using src/components/TextField.tsx and src/components/Button.tsx.
  • Write comprehensive tests in: extend src/app/api-keys/page.test.tsx asserting the field is reachable via getByLabelText.
  • Add documentation: note the form a11y in README.md.
  • Add JSDoc where helpful.
  • Validate the field has a persistent associated label.
• Test and commit

Test and commit

• Run npm run lint, npm test, and npm run build.
• Cover edge cases: label association, create success, and error region.
• Include the full npm test output and a11y notes in the PR description.

Example commit message

a11y: add an associated visible label to the api-keys create form

Guidelines

• Minimum 95 percent test coverage for impacted modules.
• Clear, reviewer-focused documentation.
• Timeframe: 96 hours.

Community & contribution rewards

• 💬 Join the StableRoute community on Discord for questions, reviews, and faster merges: https://discord.gg/37aCpusvx
• ⭐ This is a GrantFox OSS / Official Campaign task and may be rewarded. When your PR is merged you'll be prompted to rate the project — if this issue and the maintainers helped you ship, we'd be grateful for a 5-star rating. Clear questions in Discord and tidy, well-tested PRs are the fastest path to a merge and a reward.

[AloneBiNgu]

I can take this. I'll keep it scoped to the API keys create form: persistent accessible label/grouping, reuse existing Button/TextField components, add focused coverage, and verify build/tests.

[es3298]

I'd like to work on this. I will keep the scope focused on the API keys create form: persistent associated label, labelled grouping, Button/TextField reuse, focused RTL coverage, and README a11y notes.