refactor(web-react): unify approach to aria id references using useAriaIdRefs hook#2559
Merged
literat merged 2 commits intofeat/ds-2454-accessible-consent-checkboxfrom Mar 26, 2026
Conversation
1 task
There was a problem hiding this comment.
Pull request overview
This PR refactors how ARIA relationship attributes are composed across web-react form fields by introducing a shared hook (useAriaIdRefs) plus attribute-specific wrappers (useAriaDescribedBy, useAriaDetails), and migrating field components to a single-line pattern for registering and spreading ARIA ID references.
Changes:
- Added
useAriaIdRefs(generic) and wrappersuseAriaDescribedBy/useAriaDetailsundercomponents/Field, removing the olduseAriaIds+ old hooks-baseduseAriaDescribedBy. - Migrated 9 form field components to the new hook API (returning ready-to-spread props +
register). - Updated related tests and documentation to match the new hook architecture.
Reviewed changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/web-react/src/hooks/useAriaDescribedBy.ts | Removed old hooks-level useAriaDescribedBy implementation. |
| packages/web-react/src/hooks/index.ts | Stopped exporting the removed hooks-level useAriaDescribedBy. |
| packages/web-react/src/hooks/tests/useAriaDescribedBy.test.ts | Removed tests for the deleted hooks-level implementation. |
| packages/web-react/src/components/UNSTABLE_FileUpload/UNSTABLE_FileUpload.tsx | Migrated to useAriaDescribedBy from Field (new API). |
| packages/web-react/src/components/Toggle/Toggle.tsx | Migrated to new useAriaDescribedBy + useAriaDetails API. |
| packages/web-react/src/components/TextFieldBase/TextFieldBase.tsx | Migrated to new useAriaDescribedBy API. |
| packages/web-react/src/components/Slider/Slider.tsx | Migrated to new useAriaDescribedBy API. |
| packages/web-react/src/components/Select/Select.tsx | Migrated to new useAriaDescribedBy API. |
| packages/web-react/src/components/Radio/Radio.tsx | Migrated to new useAriaDescribedBy API. |
| packages/web-react/src/components/InputDetails/types.ts | Updated RegisterType import to come from useAriaIdRefs. |
| packages/web-react/src/components/InputDetails/README.md | Updated docs to reference useAriaDetails instead of useAriaIds. |
| packages/web-react/src/components/FileUploader/FileUploaderInput.tsx | Migrated to new useAriaDescribedBy API. |
| packages/web-react/src/components/FieldGroup/FieldGroup.tsx | Migrated to new useAriaDescribedBy API. |
| packages/web-react/src/components/Field/useAriaIds.tsx | Removed old useAriaIds hook (format overloads, array/string output). |
| packages/web-react/src/components/Field/useAriaIdRefs.tsx | Added new generic hook and wrappers; returns ready-to-spread ARIA props. |
| packages/web-react/src/components/Field/types.ts | Updated RegisterType import to new hook module. |
| packages/web-react/src/components/Field/index.ts | Updated exports to remove useAriaIds and export useAriaIdRefs helpers. |
| packages/web-react/src/components/Field/tests/useAriaIds.test.tsx | Removed tests for deleted useAriaIds. |
| packages/web-react/src/components/Field/tests/useAriaIdRefs.test.tsx | Added test coverage for useAriaIdRefs + wrappers. |
| packages/web-react/src/components/Field/README.md | Updated documentation for new ARIA ID ref hooks and usage. |
| packages/web-react/src/components/Checkbox/Checkbox.tsx | Migrated to new useAriaDescribedBy + useAriaDetails API. |
packages/web-react/src/components/Field/__tests__/useAriaIdRefs.test.tsx
Outdated
Show resolved
Hide resolved
af03f99 to
052c97a
Compare
* add ignore pattern for hook names (useXxx) to heading-capitalization
rule so they are not flagged as capitalization errors
052c97a to
d9b1937
Compare
fb1125d
into
feat/ds-2454-accessible-consent-checkbox
26 of 27 checks passed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Refactors ARIA ID reference management into a layered hook architecture:
useAriaIdRefs— generic hook that manages a dynamic list of ARIA ID references for anyrelationship attribute (
aria-describedby,aria-details). Returns ready-to-spread props ({}or
{ 'aria-describedby': '...' }).useAriaDescribedBy/useAriaDetails— convenience wrappers for better DX at callsites.
Removes:
useAriaIdshook (with itsformatoption and TypeScript overloads)useAriaDescribedByhook fromsrc/hooks/(the old one that tookstring[]and returned{ 'aria-describedby': '...' })Before (3 lines per attribute):
After (1 line):
All 9 form field components (Checkbox, Toggle, Radio, Select, Slider, TextFieldBase,
FileUploaderInput, UNSTABLE_FileUpload, FieldGroup) now use the same single-line pattern.
Additional context
Research across major design systems (React Aria, Headless UI, Radix, Base UI, Ark UI, Mantine)
showed:
useAriaIdRefs is novel but motivated by Spirit needing both aria-describedby and aria-details
The specific wrappers (useAriaDescribedBy, useAriaDetails) follow the ecosystem convention of
attribute-specific naming while sharing logic internally.
Issue reference
DS-2454