From b408dc412b99fc0b80a76d13838973182538645d Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 26 Sep 2022 14:08:45 +0200
Subject: [PATCH] [Select] Improve integration with a <label> (#34116)

---
 .../select/UnstyledSelectObjectValues.js      |  1 -
 .../select/UnstyledSelectObjectValues.tsx     |  1 -
 .../UnstyledSelectObjectValues.tsx.preview    |  1 -
 .../select/UnstyledSelectObjectValuesForm.js  | 92 +++++++++++--------
 .../select/UnstyledSelectObjectValuesForm.tsx | 92 +++++++++++--------
 docs/data/base/components/select/UseSelect.js |  8 --
 .../data/base/components/select/UseSelect.tsx |  8 --
 .../joy/components/select/SelectFieldDemo.js  | 20 ++--
 .../joy/components/select/SelectFieldDemo.tsx | 35 +++++++
 .../data/joy/components/select/SelectUsage.js |  2 +-
 docs/data/joy/components/select/select.md     |  6 +-
 11 files changed, 162 insertions(+), 104 deletions(-)
 create mode 100644 docs/data/joy/components/select/SelectFieldDemo.tsx

diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.js b/docs/data/base/components/select/UnstyledSelectObjectValues.js
index 252733e700cce2..97bfc6a06968fa 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValues.js
+++ b/docs/data/base/components/select/UnstyledSelectObjectValues.js
@@ -197,7 +197,6 @@ export default function UnstyledSelectObjectValues() {
           </StyledOption>
         ))}
       </CustomSelect>
-
       <Paragraph>Selected character:</Paragraph>
       <Pre>{JSON.stringify(character, null, 2)}</Pre>
     </div>
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
index 18b1091e301a40..eae52ea386a2fb 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
+++ b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx
@@ -191,7 +191,6 @@ export default function UnstyledSelectObjectValues() {
           </StyledOption>
         ))}
       </CustomSelect>
-
       <Paragraph>Selected character:</Paragraph>
       <Pre>{JSON.stringify(character, null, 2)}</Pre>
     </div>
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview
index 9c9d3943de5723..e0017db19d9b81 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview
+++ b/docs/data/base/components/select/UnstyledSelectObjectValues.tsx.preview
@@ -8,6 +8,5 @@
     </StyledOption>
   ))}
 </CustomSelect>
-
 <Paragraph>Selected character:</Paragraph>
 <Pre>{JSON.stringify(character, null, 2)}</Pre>
\ No newline at end of file
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
index 9af2b70fd0fe30..e92a80a32bcf49 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
+++ b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.js
@@ -4,6 +4,7 @@ import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled'
 import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import Box from '@mui/system/Box';
 
 const blue = {
   100: '#DAECFF',
@@ -37,7 +38,6 @@ const StyledButton = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
   border-radius: 0.75em;
-  margin: 0.5em;
   padding: 10px;
   text-align: left;
   line-height: 1.5;
@@ -123,11 +123,12 @@ const StyledPopper = styled(PopperUnstyled)`
   z-index: 1;
 `;
 
-const Header = styled('h1')(
+const Label = styled('label')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 1rem;
-  margin: 10px 0;
+  font-size: 0.85rem;
+  display: block;
+  margin-bottom: 4px;
   font-weight: 400;
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
   `,
@@ -183,9 +184,7 @@ const characters = [
   { name: 'Gimli', race: 'Dwarf' },
 ];
 
-export default function UnstyledSelectObjectValues() {
-  const [character, setCharacter] = React.useState(characters[0]);
-
+export default function UnstyledSelectObjectValuesForm() {
   const getSerializedValue = (option) => {
     if (option?.value == null) {
       return '';
@@ -202,39 +201,58 @@ export default function UnstyledSelectObjectValues() {
 
   return (
     <div>
-      <Header>Default behavior</Header>
       <form onSubmit={handleSubmit}>
-        <CustomSelect
-          value={character}
-          onChange={(e, newValue) => setCharacter(newValue)}
-          name="character"
-        >
-          {characters.map((c) => (
-            <StyledOption key={c.name} value={c}>
-              {c.name}
-            </StyledOption>
-          ))}
-        </CustomSelect>
-
-        <Button type="submit">Submit</Button>
+        <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
+          <div>
+            <Label
+              id="object-value-default-label"
+              htmlFor="object-value-default-button"
+            >
+              Default behavior
+            </Label>
+            <CustomSelect
+              name="character"
+              id="object-value-default-button"
+              aria-labelledby="object-value-default-label object-value-default-button"
+            >
+              {characters.map((character) => (
+                <StyledOption key={character.name} value={character}>
+                  {character.name}
+                </StyledOption>
+              ))}
+            </CustomSelect>
+          </div>
+          <Button sx={{ ml: 1 }} type="submit">
+            Submit
+          </Button>
+        </Box>
       </form>
-
-      <Header>Custom getSerializedValue</Header>
       <form onSubmit={handleSubmit}>
-        <CustomSelect
-          value={character}
-          onChange={(e, newValue) => setCharacter(newValue)}
-          getSerializedValue={getSerializedValue}
-          name="character"
-        >
-          {characters.map((c) => (
-            <StyledOption key={c.name} value={c}>
-              {c.name}
-            </StyledOption>
-          ))}
-        </CustomSelect>
-
-        <Button type="submit">Submit</Button>
+        <Box sx={{ display: 'flex', alignItems: 'flex-end', mt: 2 }}>
+          <div>
+            <Label
+              id="object-value-serialize-label"
+              htmlFor="object-value-serialize-button"
+            >
+              Custom getSerializedValue
+            </Label>
+            <CustomSelect
+              getSerializedValue={getSerializedValue}
+              name="character"
+              id="object-value-serialize-button"
+              aria-labelledby="object-value-serialize-label object-value-serialize-button"
+            >
+              {characters.map((character) => (
+                <StyledOption key={character.name} value={character}>
+                  {character.name}
+                </StyledOption>
+              ))}
+            </CustomSelect>
+          </div>
+          <Button sx={{ ml: 1 }} type="submit">
+            Submit
+          </Button>
+        </Box>
       </form>
     </div>
   );
diff --git a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
index f75634bc653b66..d9706da80453e0 100644
--- a/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
+++ b/docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx
@@ -7,6 +7,7 @@ import SelectUnstyled, {
 import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';
+import Box from '@mui/system/Box';
 
 const blue = {
   100: '#DAECFF',
@@ -40,7 +41,6 @@ const StyledButton = styled('button')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
   border-radius: 0.75em;
-  margin: 0.5em;
   padding: 10px;
   text-align: left;
   line-height: 1.5;
@@ -126,11 +126,12 @@ const StyledPopper = styled(PopperUnstyled)`
   z-index: 1;
 `;
 
-const Header = styled('h1')(
+const Label = styled('label')(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-size: 1rem;
-  margin: 10px 0;
+  font-size: 0.85rem;
+  display: block;
+  margin-bottom: 4px;
   font-weight: 400;
   color: ${theme.palette.mode === 'dark' ? grey[400] : grey[700]};
   `,
@@ -178,9 +179,7 @@ const characters: Character[] = [
   { name: 'Gimli', race: 'Dwarf' },
 ];
 
-export default function UnstyledSelectObjectValues() {
-  const [character, setCharacter] = React.useState<Character | null>(characters[0]);
-
+export default function UnstyledSelectObjectValuesForm() {
   const getSerializedValue = (option: SelectOption<Character> | null) => {
     if (option?.value == null) {
       return '';
@@ -197,39 +196,58 @@ export default function UnstyledSelectObjectValues() {
 
   return (
     <div>
-      <Header>Default behavior</Header>
       <form onSubmit={handleSubmit}>
-        <CustomSelect
-          value={character}
-          onChange={(e, newValue) => setCharacter(newValue)}
-          name="character"
-        >
-          {characters.map((c) => (
-            <StyledOption key={c.name} value={c}>
-              {c.name}
-            </StyledOption>
-          ))}
-        </CustomSelect>
-
-        <Button type="submit">Submit</Button>
+        <Box sx={{ display: 'flex', alignItems: 'flex-end' }}>
+          <div>
+            <Label
+              id="object-value-default-label"
+              htmlFor="object-value-default-button"
+            >
+              Default behavior
+            </Label>
+            <CustomSelect
+              name="character"
+              id="object-value-default-button"
+              aria-labelledby="object-value-default-label object-value-default-button"
+            >
+              {characters.map((character) => (
+                <StyledOption key={character.name} value={character}>
+                  {character.name}
+                </StyledOption>
+              ))}
+            </CustomSelect>
+          </div>
+          <Button sx={{ ml: 1 }} type="submit">
+            Submit
+          </Button>
+        </Box>
       </form>
-
-      <Header>Custom getSerializedValue</Header>
       <form onSubmit={handleSubmit}>
-        <CustomSelect
-          value={character}
-          onChange={(e, newValue) => setCharacter(newValue)}
-          getSerializedValue={getSerializedValue}
-          name="character"
-        >
-          {characters.map((c) => (
-            <StyledOption key={c.name} value={c}>
-              {c.name}
-            </StyledOption>
-          ))}
-        </CustomSelect>
-
-        <Button type="submit">Submit</Button>
+        <Box sx={{ display: 'flex', alignItems: 'flex-end', mt: 2 }}>
+          <div>
+            <Label
+              id="object-value-serialize-label"
+              htmlFor="object-value-serialize-button"
+            >
+              Custom getSerializedValue
+            </Label>
+            <CustomSelect
+              getSerializedValue={getSerializedValue}
+              name="character"
+              id="object-value-serialize-button"
+              aria-labelledby="object-value-serialize-label object-value-serialize-button"
+            >
+              {characters.map((character) => (
+                <StyledOption key={character.name} value={character}>
+                  {character.name}
+                </StyledOption>
+              ))}
+            </CustomSelect>
+          </div>
+          <Button sx={{ ml: 1 }} type="submit">
+            Submit
+          </Button>
+        </Box>
       </form>
     </div>
   );
diff --git a/docs/data/base/components/select/UseSelect.js b/docs/data/base/components/select/UseSelect.js
index b5d9666f1bdabd..7e4f2e46eb6309 100644
--- a/docs/data/base/components/select/UseSelect.js
+++ b/docs/data/base/components/select/UseSelect.js
@@ -17,12 +17,7 @@ const grey = {
 };
 
 const Root = styled('div')`
-  font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   position: relative;
-  display: inline-block;
-  vertical-align: baseline;
-  color: #000;
 `;
 
 const Toggle = styled('div')(
@@ -32,19 +27,16 @@ const Toggle = styled('div')(
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
   min-width: 320px;
-  padding: 12px;
   border-radius: 12px;
   text-align: left;
   line-height: 1.5;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: var(--color, ${theme.palette.mode === 'dark' ? grey[900] : '#fff'});
-  margin: 0.5em;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: default;
-
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
diff --git a/docs/data/base/components/select/UseSelect.tsx b/docs/data/base/components/select/UseSelect.tsx
index af7646a7b961f1..5ea4417d2002a2 100644
--- a/docs/data/base/components/select/UseSelect.tsx
+++ b/docs/data/base/components/select/UseSelect.tsx
@@ -16,12 +16,7 @@ const grey = {
 };
 
 const Root = styled('div')`
-  font-family: IBM Plex Sans, sans-serif;
-  font-size: 0.875rem;
   position: relative;
-  display: inline-block;
-  vertical-align: baseline;
-  color: #000;
 `;
 
 const Toggle = styled('div')(
@@ -31,19 +26,16 @@ const Toggle = styled('div')(
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
   min-width: 320px;
-  padding: 12px;
   border-radius: 12px;
   text-align: left;
   line-height: 1.5;
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: var(--color, ${theme.palette.mode === 'dark' ? grey[900] : '#fff'});
-  margin: 0.5em;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: default;
-
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 120ms;
diff --git a/docs/data/joy/components/select/SelectFieldDemo.js b/docs/data/joy/components/select/SelectFieldDemo.js
index b75da7a916b0f4..f9b64948f8d6d6 100644
--- a/docs/data/joy/components/select/SelectFieldDemo.js
+++ b/docs/data/joy/components/select/SelectFieldDemo.js
@@ -6,26 +6,30 @@ import Select from '@mui/joy/Select';
 import Option from '@mui/joy/Option';
 
 export default function SelectFieldDemo() {
-  const [value, setValue] = React.useState('dog');
   return (
     <FormControl sx={{ width: 240 }}>
-      <FormLabel
-        // screen readers will announce "Favorite pet, dog selected" when the select is focused.
-        aria-label={`Favorite pet, ${value} selected.`}
-      >
+      <FormLabel id="select-field-demo-label" htmlFor="select-field-demo-button">
         Favorite pet
       </FormLabel>
       <Select
         defaultValue="dog"
-        value={value}
-        onChange={(e, newValue) => setValue(newValue)}
+        componentsProps={{
+          button: {
+            id: 'select-field-demo-button',
+            // TODO: Material UI set aria-labelledby correctly & automatically
+            // but MUI Base and Joy UI don't yet.
+            'aria-labelledby': 'select-field-demo-label select-field-demo-button',
+          },
+        }}
       >
         <Option value="dog">Dog</Option>
         <Option value="cat">Cat</Option>
         <Option value="fish">Fish</Option>
         <Option value="bird">Bird</Option>
       </Select>
-      <FormHelperText>This is a helper text.</FormHelperText>
+      <FormHelperText id="select-field-demo-helper">
+        This is a helper text.
+      </FormHelperText>
     </FormControl>
   );
 }
diff --git a/docs/data/joy/components/select/SelectFieldDemo.tsx b/docs/data/joy/components/select/SelectFieldDemo.tsx
new file mode 100644
index 00000000000000..f9b64948f8d6d6
--- /dev/null
+++ b/docs/data/joy/components/select/SelectFieldDemo.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import FormControl from '@mui/joy/FormControl';
+import FormLabel from '@mui/joy/FormLabel';
+import FormHelperText from '@mui/joy/FormHelperText';
+import Select from '@mui/joy/Select';
+import Option from '@mui/joy/Option';
+
+export default function SelectFieldDemo() {
+  return (
+    <FormControl sx={{ width: 240 }}>
+      <FormLabel id="select-field-demo-label" htmlFor="select-field-demo-button">
+        Favorite pet
+      </FormLabel>
+      <Select
+        defaultValue="dog"
+        componentsProps={{
+          button: {
+            id: 'select-field-demo-button',
+            // TODO: Material UI set aria-labelledby correctly & automatically
+            // but MUI Base and Joy UI don't yet.
+            'aria-labelledby': 'select-field-demo-label select-field-demo-button',
+          },
+        }}
+      >
+        <Option value="dog">Dog</Option>
+        <Option value="cat">Cat</Option>
+        <Option value="fish">Fish</Option>
+        <Option value="bird">Bird</Option>
+      </Select>
+      <FormHelperText id="select-field-demo-helper">
+        This is a helper text.
+      </FormHelperText>
+    </FormControl>
+  );
+}
diff --git a/docs/data/joy/components/select/SelectUsage.js b/docs/data/joy/components/select/SelectUsage.js
index 3244190eb80e95..cf55f6ab62e1af 100644
--- a/docs/data/joy/components/select/SelectUsage.js
+++ b/docs/data/joy/components/select/SelectUsage.js
@@ -32,7 +32,7 @@ export default function SelectUsage() {
         {
           propName: 'placeholder',
           knob: 'input',
-          defaultValue: 'Choose one...',
+          defaultValue: 'Choose one…',
           codeBlockDisplay: true,
         },
         {
diff --git a/docs/data/joy/components/select/select.md b/docs/data/joy/components/select/select.md
index 73273cd8160370..1273c5c1d61c09 100644
--- a/docs/data/joy/components/select/select.md
+++ b/docs/data/joy/components/select/select.md
@@ -2,6 +2,7 @@
 product: joy-ui
 title: React Select component
 githubLabel: 'component: select'
+waiAria: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html
 unstyled: /base/react-select/
 ---
 
@@ -136,11 +137,12 @@ The `FormControl` automatically generates a unique id that links the select with
 Alternatively, you can do it manually by targeting the button slot:
 
 ```jsx
-<label htmlFor="unique-id">Label</label>
+<label htmlFor="select-button" id="select-label">Label</label>
 <Select
   componentsProps={{
     button: {
-      id: 'unique-id',
+      id: 'select-button',
+      'aria-labelledby': 'select-label select-button',
     }
   }}
 >