fix: FormItemLayout does not apply item id correctly (#49637)

## Problem

`<FormItemLayout>` does not apply item id correctly. This can be seen on
https://supabase.com/design-system/docs/ui-patterns/forms: open the
devtool and check the form items labels. They have no `for` attribute.
This makes it harder to correctly test and is an accessibility issue.

Axe devtool actually report it

## Solution

When inside React Hook Form, `<FormItemLayout>` actually generate an
`id` (via `<FormItem>`). However, this `id` is overridden in
`<FormLayout>` and read from context by `<FormLabel>`. Ensure we use the
generated id unless one was provided.

Also updated the paths filters for the CI check so that any changes in
either `ui` or `ui-patterns` triggers the studio unit and e2e tests.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Bug Fixes**
- Improved form accessibility by ensuring labels consistently connect to
their corresponding input fields.
- React-based forms now correctly preserve field-specific identifiers
when associating labels with inputs.
- Added support for explicitly specifying a label’s input target,
improving compatibility with customized form layouts.
- Updated Studio forms to use consistent control identifiers and
labeling behavior.

- **Quality Improvements**
- Automated validation now also runs when shared UI components and
patterns are updated.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Gildas Garcia authored and GitHub committed 2026-08-31 10:32:45 +02:00
1 parent 8aade77966
commit 4f92790587
15 files changed
+70 -125

No files matched your search

+2
View File
@@ -44,6 +44,8 @@ jobs:
filters: |
studio:
- 'packages/pg-meta/**'
- 'packages/ui/**'
- 'packages/ui-patterns/**'
- 'apps/studio/**'
- 'apps/ui-library/**'
- 'apps/design-system/**'
+4
View File
@@ -8,6 +8,8 @@ on:
branches: [master, studio]
paths:
- 'apps/studio/**'
- 'packages/ui/**'
- 'packages/ui-patterns/**'
- 'pnpm-lock.yaml'
pull_request:
branches: [master, studio]
@@ -44,6 +46,8 @@ jobs:
with:
filters: |
relevant:
- 'packages/ui/**'
- 'packages/ui-patterns/**'
- 'apps/studio/**'
- 'pnpm-lock.yaml'
- uses: pnpm/action-setup@0ebf47130e4866e96fce0953f49152a61190b271 # v6.0.9