mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 17:35:10 +03:00
Gildas Garcia
bfb0737d14
## Problem `FormItemLayout` does not correctly binds inputs descriptions and validation messages to their inputs. This is because the input ids are generated and not correctly propagated to the `FormMessage` and `FormDescription` components. Besides, we still pass `name` or `id` directly to the inputs or `FormItemLayout` in some places. ## Solution - Fix `FormItemLayout` to correctly binds inputs descriptions and validation messages to their inputs - Fix incorrect usages - Fix Design System documentation ## How to test The issue is visible in production: - Open https://supabase.com/design-system/docs/ui-patterns/forms - Open the devtool and check the labels `for`, the description `id` and the input `id` or `aria-describedby` attributes. You'll see they often don't match Do the same on staging: - Open https://design-system-git-fix-a11y-form-input-descriptions-supabase.vercel.app/design-system/docs/ui-patterns/forms - Open the devtool and check the labels `for`, the description `id` and the input `id` or `aria-describedby` attributes. They now match Dashboard fixes: - https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/tokens: _Expires in_ select button is now correctly linked to its label - https://studio-staging-git-fix-a11y-form-input-descriptions-supabase.vercel.app/dashboard/account/me: the switches are now correctly linked to their label - In Database/Indexes: the select buttons when creating an index are now correctly linked to their label - All other changes are the same things