[docs] Fix a11y in Menu demos (#30378)

mui · Dec 24, 2021 · c0183d9 · c0183d9
1 parent 83b7ea0
commit c0183d9
Show file tree

Hide file tree

Showing 13 changed files with 29 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',