[docs] Fix a11y lighthouse issues with Menu demos

mui · May 27, 2019 · c1a2f41 · c1a2f41
1 parent ffb4457
commit c1a2f41
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 25 deletions.
diff --git a/docs/src/pages/components/menus/CustomizedMenus.js b/docs/src/pages/components/menus/CustomizedMenus.js
@@ -54,7 +54,7 @@ function CustomizedMenus() {
   return (
     <div>
       <Button
-        aria-owns={anchorEl ? 'simple-menu' : undefined}
+        aria-controls="customized-menu"
         aria-haspopup="true"
         variant="contained"
         color="primary"
@@ -63,7 +63,7 @@ function CustomizedMenus() {
         Open Menu
       </Button>
       <StyledMenu
-        id="simple-menu"
+        id="customized-menu"
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
         onClose={handleClose}

diff --git a/docs/src/pages/components/menus/CustomizedMenus.tsx b/docs/src/pages/components/menus/CustomizedMenus.tsx
@@ -54,7 +54,7 @@ function CustomizedMenus() {
   return (
     <div>
       <Button
-        aria-owns={anchorEl ? 'simple-menu' : undefined}
+        aria-controls="customized-menu"
         aria-haspopup="true"
         variant="contained"
         color="primary"
@@ -63,7 +63,7 @@ function CustomizedMenus() {
         Open Menu
       </Button>
       <StyledMenu
-        id="simple-menu"
+        id="customized-menu"
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
         onClose={handleClose}

diff --git a/docs/src/pages/components/menus/FadeMenu.js b/docs/src/pages/components/menus/FadeMenu.js
@@ -18,12 +18,13 @@ function FadeMenu() {
 
   return (
     <div>
-      <Button aria-owns={open ? 'fade-menu' : undefined} aria-haspopup="true" onClick={handleClick}>
+      <Button aria-controls="fade-menu" aria-haspopup="true" onClick={handleClick}>
         Open with fade transition
       </Button>
       <Menu
         id="fade-menu"
         anchorEl={anchorEl}
+        keepMounted
         open={open}
         onClose={handleClose}
         TransitionComponent={Fade}

diff --git a/docs/src/pages/components/menus/FadeMenu.tsx b/docs/src/pages/components/menus/FadeMenu.tsx
@@ -18,12 +18,13 @@ function FadeMenu() {
 
   return (
     <div>
-      <Button aria-owns={open ? 'fade-menu' : undefined} aria-haspopup="true" onClick={handleClick}>
+      <Button aria-controls="fade-menu" aria-haspopup="true" onClick={handleClick}>
         Open with fade transition
       </Button>
       <Menu
         id="fade-menu"
         anchorEl={anchorEl}
+        keepMounted
         open={open}
         onClose={handleClose}
         TransitionComponent={Fade}

diff --git a/docs/src/pages/components/menus/LongMenu.js b/docs/src/pages/components/menus/LongMenu.js
@@ -39,7 +39,7 @@ function LongMenu() {
     <div>
       <IconButton
         aria-label="More"
-        aria-owns={open ? 'long-menu' : undefined}
+        aria-controls="long-menu"
         aria-haspopup="true"
         onClick={handleClick}
       >
@@ -48,6 +48,7 @@ function LongMenu() {
       <Menu
         id="long-menu"
         anchorEl={anchorEl}
+        keepMounted
         open={open}
         onClose={handleClose}
         PaperProps={{

diff --git a/docs/src/pages/components/menus/LongMenu.tsx b/docs/src/pages/components/menus/LongMenu.tsx
@@ -39,7 +39,7 @@ function LongMenu() {
     <div>
       <IconButton
         aria-label="More"
-        aria-owns={open ? 'long-menu' : undefined}
+        aria-controls="long-menu"
         aria-haspopup="true"
         onClick={handleClick}
       >
@@ -48,6 +48,7 @@ function LongMenu() {
       <Menu
         id="long-menu"
         anchorEl={anchorEl}
+        keepMounted
         open={open}
         onClose={handleClose}
         PaperProps={{

diff --git a/docs/src/pages/components/menus/MenuListComposition.js b/docs/src/pages/components/menus/MenuListComposition.js
@@ -46,13 +46,13 @@ function MenuListComposition() {
       <div>
         <Button
           ref={anchorRef}
-          aria-owns={open ? 'menu-list-grow' : undefined}
+          aria-controls="menu-list-grow"
           aria-haspopup="true"
           onClick={handleToggle}
         >
           Toggle Menu Grow
         </Button>
-        <Popper open={open} anchorEl={anchorRef.current} transition disablePortal>
+        <Popper open={open} anchorEl={anchorRef.current} keepMounted transition disablePortal>
           {({ TransitionProps, placement }) => (
             <Grow
               {...TransitionProps}

diff --git a/docs/src/pages/components/menus/MenuListComposition.tsx b/docs/src/pages/components/menus/MenuListComposition.tsx
@@ -48,13 +48,13 @@ function MenuListComposition() {
       <div>
         <Button
           ref={anchorRef}
-          aria-owns={open ? 'menu-list-grow' : undefined}
+          aria-controls="menu-list-grow"
           aria-haspopup="true"
           onClick={handleToggle}
         >
           Toggle Menu Grow
         </Button>
-        <Popper open={open} anchorEl={anchorRef.current} transition disablePortal>
+        <Popper open={open} anchorEl={anchorRef.current} keepMounted transition disablePortal>
           {({ TransitionProps, placement }) => (
             <Grow
               {...TransitionProps}

diff --git a/docs/src/pages/components/menus/SimpleListMenu.js b/docs/src/pages/components/menus/SimpleListMenu.js
@@ -52,7 +52,13 @@ function SimpleListMenu() {
           <ListItemText primary="When device is locked" secondary={options[selectedIndex]} />
         </ListItem>
       </List>
-      <Menu id="lock-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+      <Menu
+        id="lock-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
         {options.map((option, index) => (
           <MenuItem
             key={option}

diff --git a/docs/src/pages/components/menus/SimpleMenu.js b/docs/src/pages/components/menus/SimpleMenu.js
@@ -16,14 +16,16 @@ function SimpleMenu() {
 
   return (
     <div>
-      <Button
-        aria-owns={anchorEl ? 'simple-menu' : undefined}
-        aria-haspopup="true"
-        onClick={handleClick}
-      >
+      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
         Open Menu
       </Button>
-      <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+      <Menu
+        id="simple-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
         <MenuItem onClick={handleClose}>Profile</MenuItem>
         <MenuItem onClick={handleClose}>My account</MenuItem>
         <MenuItem onClick={handleClose}>Logout</MenuItem>

diff --git a/docs/src/pages/components/menus/SimpleMenu.tsx b/docs/src/pages/components/menus/SimpleMenu.tsx
@@ -16,14 +16,16 @@ function SimpleMenu() {
 
   return (
     <div>
-      <Button
-        aria-owns={anchorEl ? 'simple-menu' : undefined}
-        aria-haspopup="true"
-        onClick={handleClick}
-      >
+      <Button aria-controls="simple-menu" aria-haspopup="true" onClick={handleClick}>
         Open Menu
       </Button>
-      <Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+      <Menu
+        id="simple-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={Boolean(anchorEl)}
+        onClose={handleClose}
+      >
         <MenuItem onClick={handleClose}>Profile</MenuItem>
         <MenuItem onClick={handleClose}>My account</MenuItem>
         <MenuItem onClick={handleClose}>Logout</MenuItem>