Describe how to connect a description to an input in Field

Amsterdam · May 24, 2024 · 421d064 · 421d064
1 parent 1059feb
commit 421d064
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 10 deletions.
diff --git a/storybook/src/components/Field/Field.docs.mdx b/storybook/src/components/Field/Field.docs.mdx
@@ -10,6 +10,14 @@ import README from "../../../../packages/css/src/components/field/README.md?raw"
 
 <Controls />
 
+## With Description
+
+A Field can have a description.
+Make sure to connect this description to the input in the Field,
+otherwise this won’t be read by a screen reader.
+
+<Canvas of={FieldStories.WithDescription} />
+
 ## With Error
 
 A Field can indicate if the contained input has a validation error.

diff --git a/storybook/src/components/Field/Field.stories.tsx b/storybook/src/components/Field/Field.stories.tsx
@@ -13,32 +13,42 @@ const meta = {
   args: {
     invalid: false,
   },
+} satisfies Meta<typeof Field>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
   render: (args) => (
     <Field invalid={args.invalid}>
       <Label htmlFor="input1">Waar gaat het om?</Label>
+      <TextInput id="input1" aria-invalid={args.invalid ? true : undefined} />
+    </Field>
+  ),
+}
+
+export const WithDescription: Story = {
+  render: (args) => (
+    <Field invalid={args.invalid}>
+      <Label htmlFor="input2">Waar gaat het om?</Label>
       <Paragraph id="description1" size="small">
         Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.
       </Paragraph>
-      <TextInput id="input1" aria-describedby="description1" aria-invalid={args.invalid ? true : undefined} />
+      <TextInput id="input2" aria-describedby="description1" aria-invalid={args.invalid ? true : undefined} />
     </Field>
   ),
-} satisfies Meta<typeof Field>
-
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
+}
 
 export const WithError: Story = {
   args: { invalid: true },
   render: (args) => (
     <Field invalid={args.invalid}>
-      <Label htmlFor="input2">Waar gaat het om?</Label>
+      <Label htmlFor="input3">Waar gaat het om?</Label>
       <Paragraph id="description2" size="small">
         Typ geen persoonsgegevens in deze omschrijving. We vragen dit later in dit formulier aan u.
       </Paragraph>
-      <TextInput id="input2" aria-describedby="description2" aria-invalid={args.invalid ? true : undefined} />
+      <TextInput id="input3" aria-describedby="description2" aria-invalid={args.invalid ? true : undefined} />
     </Field>
   ),
 }