Add accessible label/input associations to reusable form fields

[jaynomyaro]

PR: Add Accessible Label/Input Associations to Reusable Form Fields
Summary

Improve form accessibility by ensuring all reusable form components correctly associate labels with their corresponding inputs.

This PR introduces proper label/input relationships across shared form components, improving usability for screen reader users, keyboard navigation, and overall compliance with accessibility standards.

Problem

Several reusable form fields currently do not consistently associate labels with their inputs:

Some inputs are missing unique id attributes.
Labels are not always linked using htmlFor.
Screen readers may not correctly announce field labels.
Clicking a label does not always focus the associated input.
Accessibility testing tools report form labeling violations.
Solution

Standardize accessible label associations across all reusable form components.

Core Changes
Generate or accept stable, unique id values for form controls.
Associate labels with controls using htmlFor.
Ensure every rendered form field has an accessible name.
Preserve backward compatibility for existing component consumers.
Add support for custom IDs when explicitly provided.
Component Updates
TextField
Input
Textarea
Select
Checkbox
RadioGroup
Any wrapper components rendering form controls
Example
const generatedId = id ?? useId();

{label}
<input id={generatedId} {...props} />
Accessibility Improvements
Screen readers correctly announce field labels.
Clicking labels moves focus to the corresponding control.
Improved keyboard and assistive technology support.
Better compliance with WCAG and accessibility best practices.
Reduced accessibility violations in automated audits.
Testing

Added tests covering:

Labels render with matching htmlFor values.
Inputs receive stable IDs.
Custom IDs override generated IDs.
Label clicks correctly focus associated controls.
Components expose accessible names to assistive technologies.
Accessibility tests pass with React Testing Library and axe checks.
Benefits
Improves accessibility for users relying on assistive technologies.
Creates consistent behavior across all form components.
Simplifies development by standardizing field implementations.
Reduces accessibility regressions in future form development.
Enhances overall user experience and standards compliance.
Breaking Changes
None.
All changes are backward compatible. Existing consumers continue to function while automatically benefiting from improved accessibility. closed #64