fix(a11y): make the most inputs more accessible

[rohanm-crest]

Issue number: ADDON-68266

PR Type

What kind of change does this PR introduce?

• Feature
• Bug Fix
• Refactoring (no functional or API changes)
• Documentation Update
• Maintenance (dependency updates, CI, etc.)

Summary

Changes

make the inputs more accessible in UI

User experience

Allow users to input accessibility options for UCC components, ensuring inputs are accessible via labels for improved usability.

Checklist

If an item doesn't apply to your changes, leave it unchecked.

• I have performed a self-review of this change according to the development guidelines
• Tests have been added/modified to cover the changes (testing doc)
• Changes are documented
• PR title and description follows the contributing principles

[vtsvetkov-splunk]

Suggested pull request title: fix(a11y): improve input accessibility through proper ID management and ARIA labels

Thank you for this comprehensive accessibility improvement PR! The changes successfully implement proper ID management for form controls and add ARIA labels, which are crucial for screen reader compatibility and overall accessibility compliance.

While the core functionality is solid, there are a few areas that could benefit from some enhancements:

1. Files: ui/src/components/SingleInputComponent/SingleInputComponent.tsx

   • Consider adding an id prop to match the ARIA label implementation
   • The aria-label should only be used when there's no visible label; consider using aria-labelledby instead when there's a visible label

2. Files: ui/src/components/RadioComponent/RadioComponent.tsx

   • The ID handling change seems to move the ID from the wrapper to individual options, but it might be better to keep both for proper grouping of radio buttons
   • Consider adding aria-describedby for any help text associated with the radio group

3. Files: ui/src/components/BaseFormView/BaseFormView.tsx

   • While adding unique IDs is good, consider adding a more descriptive prefix in the createDOMID call to make debugging easier
   • Consider adding error message IDs to connect them with inputs using aria-describedby

4. Testing:

   • Would be beneficial to add specific accessibility tests using jest-axe or similar tools
   • The modified test files should include cases testing the new ID-related functionality

5. Documentation:

   • The changes would benefit from documentation updates explaining the accessibility improvements
   • Consider adding examples of proper usage in the stories

The changes appear to be well-structured and thoughtfully implemented, but I recommend addressing these suggestions before merging to ensure the best possible accessibility implementation.

This comment was added by our PR Review Assistant Bot. Please kindly acknowledge that
while we're doing our best to keep these comments up to very high standards, they may occasionally be
incorrect. Suggestions offered by the Bot are only intended as points for consideration and no statements
by this bot alone can be considered grounds for merging of any pull request. Remember to seek a review
from a human co-worker.

To reply to the review and engage Review Bot in further conversation, start your comment with the words Review bot:

[vtsvetkov-splunk]

superseded by #1542