Add an accessible status/error state and JSON validation to the ApiUsage parameters textarea

[greatest0fallt1me]

Description

This is a UI/UX form-validation issue. The "Parameters (JSON)" textarea in src/ApiUsage.tsx accepts arbitrary text and is sent to handleMakeTestCall with no validation; malformed JSON produces no feedback. The textarea also lacks an associated error region and the label is not programmatically linked to it.

Requirements and Context

• Validate the JSON on blur/submit and show an inline, accessible error linked via aria-describedby / aria-invalid.
• Disable or guard the "Make Test Call" action when the JSON is invalid.
• Associate the <label> with the textarea via htmlFor/id.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b feature/params-json-validation

2. Implement changes
   • src/ApiUsage.tsx — add JSON parse validation, error state, and aria wiring
   • src/index.css — add an .invalid style for the textarea using tokens
3. Test and commit
   • npm run dev, open /api-usage, enter invalid JSON and verify messaging
   • Include test output and notes in the PR

Example commit message

feat: validate parameters JSON in test call form

Acceptance Criteria

• Invalid JSON shows an accessible inline error
• Error is linked via aria-describedby and aria-invalid is set
• Make Test Call is guarded against invalid input
• Label is associated with the textarea

Guidelines

• Meet WCAG 2.1 AA 3.3.1 (Error Identification) and 3.3.2 (Labels or Instructions)
• Clear documentation and inline comments
• Timeframe: 96 hours