fix(ui): wire up aria-describedby for form field descriptions

Form field descriptions were visually rendered but not connected
to inputs via aria-describedby, making them invisible to screen
readers.

Added a descriptionSlot prop to FieldLabel that renders the
description as a React Aria <Text slot="description"> element,
letting React Aria automatically wire up aria-describedby on
the associated input.

Applied to TextField, PasswordField, SearchField, Select,
RadioGroup, and CheckboxGroup. Slider already handled this
manually and is unchanged.

Also added a missing WithDescription story for RadioGroup.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
This commit is contained in:
Johan Persson
2026-04-08 16:38:50 +02:00
parent 0dc2cf7e43
commit 17eb8e03e0
12 changed files with 44 additions and 3 deletions
+7
View File
@@ -0,0 +1,7 @@
---
'@backstage/ui': patch
---
Fixed form field descriptions not being connected to inputs via `aria-describedby`, making them accessible to screen readers. Added a `descriptionSlot` prop to `FieldLabel` that uses React Aria's slot mechanism to automatically wire up the connection.
**Affected components:** FieldLabel, TextField, PasswordField, SearchField, Select, RadioGroup, CheckboxGroup