Skip to content

refactor(web-react): unify approach to aria id references using useAriaIdRefs hook#2559

Merged
literat merged 2 commits intofeat/ds-2454-accessible-consent-checkboxfrom
refactor/use-aria-id-refs
Mar 26, 2026
Merged

refactor(web-react): unify approach to aria id references using useAriaIdRefs hook#2559
literat merged 2 commits intofeat/ds-2454-accessible-consent-checkboxfrom
refactor/use-aria-id-refs

Conversation

@literat
Copy link
Copy Markdown
Collaborator

@literat literat commented Mar 25, 2026

Description

Refactors ARIA ID reference management into a layered hook architecture:

  • useAriaIdRefs — generic hook that manages a dynamic list of ARIA ID references for any
    relationship attribute (aria-describedby, aria-details). Returns ready-to-spread props ({}
    or { 'aria-describedby': '...' }).
  • useAriaDescribedBy / useAriaDetails — convenience wrappers for better DX at call
    sites.

Removes:

  • useAriaIds hook (with its format option and TypeScript overloads)
  • useAriaDescribedBy hook from src/hooks/ (the old one that took string[] and returned { 'aria-describedby': '...' })

Before (3 lines per attribute):

const [ids, register] = useAriaIds(ariaDescribedBy);
const ariaDescribedByProp = useAriaDescribedBy(ids);

After (1 line):

  const [ariaDescribedByProp, register] = useAriaDescribedBy(ariaDescribedBy);

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:

  • Every library returns string | undefined, not string[]
  • Every library omits the attribute entirely when empty ({} not { 'aria-describedby': '' })
  • No library has a generic hook for multiple ARIA relationship attributes — the generic
    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

Copilot AI review requested due to automatic review settings March 25, 2026 14:19
@github-actions github-actions bot added the refactoring A code change that neither fixes a bug nor adds a feature label Mar 25, 2026
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 wrappers useAriaDescribedBy / useAriaDetails under components/Field, removing the old useAriaIds + old hooks-based useAriaDescribedBy.
  • 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.

Copilot AI review requested due to automatic review settings March 26, 2026 10:35
@literat literat force-pushed the refactor/use-aria-id-refs branch from af03f99 to 052c97a Compare March 26, 2026 10:36
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated 3 comments.

literat added 2 commits March 26, 2026 13:20
  * add ignore pattern for hook names (useXxx) to heading-capitalization
    rule so they are not flagged as capitalization errors
@literat literat force-pushed the refactor/use-aria-id-refs branch from 052c97a to d9b1937 Compare March 26, 2026 12:20
@literat literat marked this pull request as ready for review March 26, 2026 12:26
@literat literat requested a review from pavelklibani as a code owner March 26, 2026 12:26
Copilot AI review requested due to automatic review settings March 26, 2026 12:26
@literat literat requested review from a team, dlouhak and katerinarehorkova as code owners March 26, 2026 12:26
@literat literat merged commit fb1125d into feat/ds-2454-accessible-consent-checkbox Mar 26, 2026
26 of 27 checks passed
@literat literat deleted the refactor/use-aria-id-refs branch March 26, 2026 12:27
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 22 out of 22 changed files in this pull request and generated no new comments.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactoring A code change that neither fixes a bug nor adds a feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants