fix(app-webdir-ui): sanitize useId to generate accessible form field IDs #1574
Conversation
|
Storybook deployed at https://unity-uds-staging.s3.us-west-2.amazonaws.com/pr-1574/index.html |
There was a problem hiding this comment.
Pull Request Overview
This PR fixes the generation of accessible form field IDs by sanitizing the output of React's useId hook to ensure compliance with HTML ID attribute requirements.
- Sanitizes
useIdoutput to create valid HTML ID attributes for form fields - Adds a descriptive prefix "sortBy-" to improve accessibility and semantic meaning
- Removes special characters that are invalid in HTML ID attributes
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| const sortLabelId = useId(); | ||
|
|
||
| const rawSortLabelId = useId(); | ||
| const sortLabelId = `sortBy-${rawSortLabelId.replace(/[^a-zA-Z0-9-_]/g, "")}`; |
There was a problem hiding this comment.
The regex pattern [^a-zA-Z0-9-_] allows hyphens and underscores but React's useId() can generate colons which are valid in CSS selectors but should be escaped. Consider using [^a-zA-Z0-9_] to remove hyphens as well, or handle colon escaping specifically if CSS targeting is needed.
| const sortLabelId = `sortBy-${rawSortLabelId.replace(/[^a-zA-Z0-9-_]/g, "")}`; | |
| const sortLabelId = `sortBy-${rawSortLabelId.replace(/[^a-zA-Z0-9-_]/g, "").replace(/:/g, "")}`; |
Copilot uses AI. Check for mistakes.
3 participants
UDS-2046
Description
Checklist
Important Reminders
Links