From c0183d9d6ca112a8922e0672f216a5cfc084763d Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Sat, 25 Dec 2021 03:07:55 +0530
Subject: [PATCH] [docs] Fix a11y in Menu demos (#30378)

---
 docs/src/pages/components/menus/AccountMenu.js         | 10 +++++++++-
 docs/src/pages/components/menus/AccountMenu.tsx        | 10 +++++++++-
 docs/src/pages/components/menus/BasicMenu.js           |  2 +-
 docs/src/pages/components/menus/BasicMenu.tsx          |  2 +-
 docs/src/pages/components/menus/CustomizedMenus.js     |  2 +-
 docs/src/pages/components/menus/CustomizedMenus.tsx    |  2 +-
 docs/src/pages/components/menus/FadeMenu.js            |  2 +-
 docs/src/pages/components/menus/FadeMenu.tsx           |  2 +-
 docs/src/pages/components/menus/LongMenu.js            |  2 +-
 docs/src/pages/components/menus/LongMenu.tsx           |  2 +-
 docs/src/pages/components/menus/PositionedMenu.js      |  2 +-
 docs/src/pages/components/menus/PositionedMenu.tsx     |  2 +-
 .../src/AutocompleteUnstyled/useAutocomplete.js        |  2 +-
 13 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/docs/src/pages/components/menus/AccountMenu.js b/docs/src/pages/components/menus/AccountMenu.js
index dd3e0e1a222f0a..8e67439c924eb6 100644
--- a/docs/src/pages/components/menus/AccountMenu.js
+++ b/docs/src/pages/components/menus/AccountMenu.js
@@ -27,13 +27,21 @@ export default function AccountMenu() {
         <Typography sx={{ minWidth: 100 }}>Contact</Typography>
         <Typography sx={{ minWidth: 100 }}>Profile</Typography>
         <Tooltip title="Account settings">
-          <IconButton onClick={handleClick} size="small" sx={{ ml: 2 }}>
+          <IconButton
+            onClick={handleClick}
+            size="small"
+            sx={{ ml: 2 }}
+            aria-controls={open ? 'account-menu' : undefined}
+            aria-haspopup="true"
+            aria-expanded={open ? 'true' : undefined}
+          >
             <Avatar sx={{ width: 32, height: 32 }}>M</Avatar>
           </IconButton>
         </Tooltip>
       </Box>
       <Menu
         anchorEl={anchorEl}
+        id="account-menu"
         open={open}
         onClose={handleClose}
         onClick={handleClose}
diff --git a/docs/src/pages/components/menus/AccountMenu.tsx b/docs/src/pages/components/menus/AccountMenu.tsx
index aca289b1a910d0..1a13ebd4fab1e9 100644
--- a/docs/src/pages/components/menus/AccountMenu.tsx
+++ b/docs/src/pages/components/menus/AccountMenu.tsx
@@ -27,13 +27,21 @@ export default function AccountMenu() {
         <Typography sx={{ minWidth: 100 }}>Contact</Typography>
         <Typography sx={{ minWidth: 100 }}>Profile</Typography>
         <Tooltip title="Account settings">
-          <IconButton onClick={handleClick} size="small" sx={{ ml: 2 }}>
+          <IconButton
+            onClick={handleClick}
+            size="small"
+            sx={{ ml: 2 }}
+            aria-controls={open ? 'account-menu' : undefined}
+            aria-haspopup="true"
+            aria-expanded={open ? 'true' : undefined}
+          >
             <Avatar sx={{ width: 32, height: 32 }}>M</Avatar>
           </IconButton>
         </Tooltip>
       </Box>
       <Menu
         anchorEl={anchorEl}
+        id="account-menu"
         open={open}
         onClose={handleClose}
         onClick={handleClose}
diff --git a/docs/src/pages/components/menus/BasicMenu.js b/docs/src/pages/components/menus/BasicMenu.js
index 0c2dd12b33342d..4400fb55aaf4c9 100644
--- a/docs/src/pages/components/menus/BasicMenu.js
+++ b/docs/src/pages/components/menus/BasicMenu.js
@@ -17,7 +17,7 @@ export default function BasicMenu() {
     <div>
       <Button
         id="basic-button"
-        aria-controls="basic-menu"
+        aria-controls={open ? 'basic-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
diff --git a/docs/src/pages/components/menus/BasicMenu.tsx b/docs/src/pages/components/menus/BasicMenu.tsx
index 47c1a4b33324b7..1a32274121f332 100644
--- a/docs/src/pages/components/menus/BasicMenu.tsx
+++ b/docs/src/pages/components/menus/BasicMenu.tsx
@@ -17,7 +17,7 @@ export default function BasicMenu() {
     <div>
       <Button
         id="basic-button"
-        aria-controls="basic-menu"
+        aria-controls={open ? 'basic-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
diff --git a/docs/src/pages/components/menus/CustomizedMenus.js b/docs/src/pages/components/menus/CustomizedMenus.js
index e9fb4b3619bac7..0465b0a5fdf4ff 100644
--- a/docs/src/pages/components/menus/CustomizedMenus.js
+++ b/docs/src/pages/components/menus/CustomizedMenus.js
@@ -65,7 +65,7 @@ export default function CustomizedMenus() {
     <div>
       <Button
         id="demo-customized-button"
-        aria-controls="demo-customized-menu"
+        aria-controls={open ? 'demo-customized-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
         variant="contained"
diff --git a/docs/src/pages/components/menus/CustomizedMenus.tsx b/docs/src/pages/components/menus/CustomizedMenus.tsx
index b90436bdf264ed..0b0a89d625ebda 100644
--- a/docs/src/pages/components/menus/CustomizedMenus.tsx
+++ b/docs/src/pages/components/menus/CustomizedMenus.tsx
@@ -65,7 +65,7 @@ export default function CustomizedMenus() {
     <div>
       <Button
         id="demo-customized-button"
-        aria-controls="demo-customized-menu"
+        aria-controls={open ? 'demo-customized-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
         variant="contained"
diff --git a/docs/src/pages/components/menus/FadeMenu.js b/docs/src/pages/components/menus/FadeMenu.js
index 30b88e4478aefa..5b233ba73e7934 100644
--- a/docs/src/pages/components/menus/FadeMenu.js
+++ b/docs/src/pages/components/menus/FadeMenu.js
@@ -18,7 +18,7 @@ export default function FadeMenu() {
     <div>
       <Button
         id="fade-button"
-        aria-controls="fade-menu"
+        aria-controls={open ? 'fade-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
diff --git a/docs/src/pages/components/menus/FadeMenu.tsx b/docs/src/pages/components/menus/FadeMenu.tsx
index ca5d17fd14d99e..cdbc6b30c0c92d 100644
--- a/docs/src/pages/components/menus/FadeMenu.tsx
+++ b/docs/src/pages/components/menus/FadeMenu.tsx
@@ -18,7 +18,7 @@ export default function FadeMenu() {
     <div>
       <Button
         id="fade-button"
-        aria-controls="fade-menu"
+        aria-controls={open ? 'fade-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
diff --git a/docs/src/pages/components/menus/LongMenu.js b/docs/src/pages/components/menus/LongMenu.js
index 1b0367e9ab38ea..926a419b5a3990 100644
--- a/docs/src/pages/components/menus/LongMenu.js
+++ b/docs/src/pages/components/menus/LongMenu.js
@@ -38,7 +38,7 @@ export default function LongMenu() {
       <IconButton
         aria-label="more"
         id="long-button"
-        aria-controls="long-menu"
+        aria-controls={open ? 'long-menu' : undefined}
         aria-expanded={open ? 'true' : undefined}
         aria-haspopup="true"
         onClick={handleClick}
diff --git a/docs/src/pages/components/menus/LongMenu.tsx b/docs/src/pages/components/menus/LongMenu.tsx
index 25bee521f257fc..184184386e84c8 100644
--- a/docs/src/pages/components/menus/LongMenu.tsx
+++ b/docs/src/pages/components/menus/LongMenu.tsx
@@ -38,7 +38,7 @@ export default function LongMenu() {
       <IconButton
         aria-label="more"
         id="long-button"
-        aria-controls="long-menu"
+        aria-controls={open ? 'long-menu' : undefined}
         aria-expanded={open ? 'true' : undefined}
         aria-haspopup="true"
         onClick={handleClick}
diff --git a/docs/src/pages/components/menus/PositionedMenu.js b/docs/src/pages/components/menus/PositionedMenu.js
index 4f4cba31c679b6..557cf86afe3e87 100644
--- a/docs/src/pages/components/menus/PositionedMenu.js
+++ b/docs/src/pages/components/menus/PositionedMenu.js
@@ -17,7 +17,7 @@ export default function PositionedMenu() {
     <div>
       <Button
         id="demo-positioned-button"
-        aria-controls="demo-positioned-menu"
+        aria-controls={open ? 'demo-positioned-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
diff --git a/docs/src/pages/components/menus/PositionedMenu.tsx b/docs/src/pages/components/menus/PositionedMenu.tsx
index 7b2848f40552e2..fdafa5b55c705f 100644
--- a/docs/src/pages/components/menus/PositionedMenu.tsx
+++ b/docs/src/pages/components/menus/PositionedMenu.tsx
@@ -17,7 +17,7 @@ export default function PositionedMenu() {
     <div>
       <Button
         id="demo-positioned-button"
-        aria-controls="demo-positioned-menu"
+        aria-controls={open ? 'demo-positioned-menu' : undefined}
         aria-haspopup="true"
         aria-expanded={open ? 'true' : undefined}
         onClick={handleClick}
diff --git a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js
index 86c8edddc3ba12..b028d19ec9726d 100644
--- a/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js
+++ b/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js
@@ -1017,7 +1017,7 @@ export default function useAutocomplete(props) {
       // only have an opinion about this when closed
       'aria-activedescendant': popupOpen ? '' : null,
       'aria-autocomplete': autoComplete ? 'both' : 'list',
-      'aria-controls': listboxAvailable ? `${id}-listbox` : null,
+      'aria-controls': listboxAvailable ? `${id}-listbox` : undefined,
       // Disable browser's suggestion that might overlap with the popup.
       // Handle autocomplete but not autofill.
       autoComplete: 'off',