fix(docs): add title to visually hidden stories (#4998)

* fix(docs): add title to visually hidden stories * test(vrt): update snapshots --------- Co-authored-by: francinelucca <[email protected]>
primer · Sep 23, 2024 · a21674f · a21674f
1 parent dbfb504
commit a21674f
Show file tree

Hide file tree

Showing 20 changed files with 12 additions and 4 deletions.
diff --git a/...Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-colorblind-linux.png b/...Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-colorblind-linux.png
diff --git a/...nts/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-dimmed-linux.png b/...nts/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-dimmed-linux.png
diff --git a/...ect.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png b/...ect.test.ts-snapshots/Select-Visually-Hidden-Label-dark-high-contrast-linux.png
diff --git a/...components/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-linux.png b/...components/Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-linux.png
diff --git a/...Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-tritanopia-linux.png b/...Select.test.ts-snapshots/Select-Visually-Hidden-Label-dark-tritanopia-linux.png
diff --git a/...elect.test.ts-snapshots/Select-Visually-Hidden-Label-light-colorblind-linux.png b/...elect.test.ts-snapshots/Select-Visually-Hidden-Label-light-colorblind-linux.png
diff --git a/...ct.test.ts-snapshots/Select-Visually-Hidden-Label-light-high-contrast-linux.png b/...ct.test.ts-snapshots/Select-Visually-Hidden-Label-light-high-contrast-linux.png
diff --git a/...omponents/Select.test.ts-snapshots/Select-Visually-Hidden-Label-light-linux.png b/...omponents/Select.test.ts-snapshots/Select-Visually-Hidden-Label-light-linux.png
diff --git a/...elect.test.ts-snapshots/Select-Visually-Hidden-Label-light-tritanopia-linux.png b/...elect.test.ts-snapshots/Select-Visually-Hidden-Label-light-tritanopia-linux.png
diff --git a/...put.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-colorblind-linux.png b/...put.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-colorblind-linux.png
diff --git a/...xtInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-dimmed-linux.png b/...xtInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-dimmed-linux.png
diff --git a/....test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png b/....test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-high-contrast-linux.png
diff --git a/...ents/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-linux.png b/...ents/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-linux.png
diff --git a/...put.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-tritanopia-linux.png b/...put.test.ts-snapshots/TextInput-Visually-Hidden-Label-dark-tritanopia-linux.png
diff --git a/...ut.test.ts-snapshots/TextInput-Visually-Hidden-Label-light-colorblind-linux.png b/...ut.test.ts-snapshots/TextInput-Visually-Hidden-Label-light-colorblind-linux.png
diff --git a/...test.ts-snapshots/TextInput-Visually-Hidden-Label-light-high-contrast-linux.png b/...test.ts-snapshots/TextInput-Visually-Hidden-Label-light-high-contrast-linux.png
diff --git a/...nts/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-light-linux.png b/...nts/TextInput.test.ts-snapshots/TextInput-Visually-Hidden-Label-light-linux.png
diff --git a/...ut.test.ts-snapshots/TextInput-Visually-Hidden-Label-light-tritanopia-linux.png b/...ut.test.ts-snapshots/TextInput-Visually-Hidden-Label-light-tritanopia-linux.png
diff --git a/packages/react/src/Select/Select.features.stories.tsx b/packages/react/src/Select/Select.features.stories.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Select, FormControl, Box} from '..'
+import {Select, FormControl, Box, Heading} from '..'
 
 export default {
   title: 'Components/Select/Features',
@@ -60,8 +60,11 @@ export const WithCaption = () => (
 
 export const VisuallyHiddenLabel = () => (
   <Box as="form">
+    <Heading as="h2" variant="small">
+      Primer form title
+    </Heading>
     <FormControl>
-      <FormControl.Label visuallyHidden>Default label</FormControl.Label>
+      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>
       <Select>
         <Select.Option value="one">Choice one</Select.Option>
         <Select.Option value="two">Choice two</Select.Option>
@@ -70,6 +73,7 @@ export const VisuallyHiddenLabel = () => (
         <Select.Option value="five">Choice five</Select.Option>
         <Select.Option value="six">Choice six</Select.Option>
       </Select>
+      <FormControl.Caption>Label is visually hidden; the title describes the purpose visually</FormControl.Caption>
     </FormControl>
   </Box>
 )

diff --git a/packages/react/src/TextInput/TextInput.features.stories.tsx b/packages/react/src/TextInput/TextInput.features.stories.tsx
@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import {Box, FormControl, Stack} from '..'
+import {Box, FormControl, Heading, Stack} from '..'
 import type {TextInputProps} from '../TextInput'
 import TextInput from '../TextInput'
 import {CalendarIcon, CheckIcon, XCircleFillIcon} from '@primer/octicons-react'
@@ -31,9 +31,13 @@ export const WithCaption = () => (
 
 export const VisuallyHiddenLabel = () => (
   <Box as="form">
+    <Heading as="h2" variant="small">
+      Primer form title
+    </Heading>
     <FormControl>
-      <FormControl.Label visuallyHidden>Default label</FormControl.Label>
+      <FormControl.Label visuallyHidden>Primer form label</FormControl.Label>
       <TextInput />
+      <FormControl.Caption>Label is visually hidden; the title describes the purpose visually</FormControl.Caption>
     </FormControl>
   </Box>
 )