[Select][joy] Improve the a11y on the select field demo (#34073)

mui · Aug 29, 2022 · 81142e1 · 81142e1
1 parent 463b9e0
commit 81142e1
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/docs/data/joy/components/select/SelectFieldDemo.js b/docs/data/joy/components/select/SelectFieldDemo.js
@@ -9,15 +9,16 @@ export default function SelectFieldDemo() {
   const [value, setValue] = React.useState('dog');
   return (
     <Box sx={{ width: 240 }}>
-      <FormLabel>Favorite pet</FormLabel>
+      <FormLabel htmlFor="select-field-pet">Favorite pet</FormLabel>
       <Select
+        id="select-field-pet"
         defaultValue="dog"
         componentsProps={{
           button: {
             // screen readers will announce "Favorite pet, dog selected" when the select is focused.
             'aria-label': `Favorite pet, ${value} selected.`,
             // and this in the next sentence.
-            'aria-describedby': 'select-field-demo-helper',
+            'aria-describedby': 'select-field-pet-helper',
           },
         }}
         value={value}
@@ -29,7 +30,7 @@ export default function SelectFieldDemo() {
         <Option value="fish">Fish</Option>
         <Option value="bird">Bird</Option>
       </Select>
-      <FormHelperText id="select-field-demo-helper">
+      <FormHelperText id="select-field-pet-helper">
         This is a helper text.
       </FormHelperText>
     </Box>