Merge a149256 into 9fa9989

primer · Sep 20, 2024 · 96d2b00 · 96d2b00
2 parents 9fa9989 + a149256
commit 96d2b00
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
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>
 )