[docs] Improve lighthouse a11y score in demos (#15901)

* [docs] Fix a11y lighthouse issues in breadcrumbs demos * [docs] Fix a11y lighthouse issues with Menu demos * [docs] Fix a11y lighthouse issues in grid-list demos * [docs] Fix a11y lighthouse issues in AppBar demos * [docs] Fix lighthouse a11y issues in Card demos * [docs] Fix a11y lighthouse issues with Progress demos * [docs] Fix a11y lighthouse issues in Dialog demos * [docs] Fix a11y lighthouse issues with List demos * [docs] Fix a11y lighthouse issues in Table demos Remaining issues are caused by 3rd party packages * [docs] Fix lighthouse a11y issues in Popper demos * [docs] Fix a11y lighthouse issues in Transition demos * Apply suggestions from code review Co-Authored-By: Matt <[email protected]> * [docs] Add a11y label to nav landmarks * [docs] Add title to iframe demos * [docs] Fixup for a11y lighthouse issues in menu demos
mui · May 29, 2019 · 831c6cc · 831c6cc
1 parent b4de19a
commit 831c6cc
Show file tree

Hide file tree

Showing 65 changed files with 348 additions and 183 deletions.
diff --git a/docs/src/modules/components/AppTableOfContents.js b/docs/src/modules/components/AppTableOfContents.js
@@ -223,7 +223,7 @@ function AppTableOfContents(props) {
   );
 
   return (
-    <nav className={classes.root}>
+    <nav className={classes.root} aria-label="Page table of contents">
       {itemsServer.length > 0 ? (
         <React.Fragment>
           <Typography gutterBottom className={classes.contents}>

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -234,6 +234,8 @@ class Demo extends React.Component {
     const demoData = this.getDemoData();
     const DemoComponent = demoData.Component;
     const gaCategory = demoOptions.demo;
+    // get the last alphanumeric pattern before the file extension
+    const demoName = demoData.githubLocation.replace(/(.+?)(\w+)\.\w+$$/, '$2');
 
     return (
       <div className={classes.root}>
@@ -360,7 +362,7 @@ class Demo extends React.Component {
             maxWidth: demoOptions.maxWidth,
           }}
         >
-          <DemoSandboxed component={DemoComponent} iframe={demoOptions.iframe} />
+          <DemoSandboxed component={DemoComponent} iframe={demoOptions.iframe} name={demoName} />
         </div>
       </div>
     );

diff --git a/docs/src/modules/components/DemoSandboxed.js b/docs/src/modules/components/DemoSandboxed.js
@@ -45,7 +45,7 @@ class DemoFrame extends React.Component {
   };
 
   render() {
-    const { children, classes } = this.props;
+    const { children, classes, theme, ...other } = this.props;
 
     // NoSsr fixes a strange concurrency issue with iframe and quick React mount/unmount
     return (
@@ -55,6 +55,7 @@ class DemoFrame extends React.Component {
           className={classes.root}
           contentDidMount={this.onContentDidMount}
           contentDidUpdate={this.onContentDidUpdate}
+          {...other}
         >
           <div id="demo-frame-jss" />
           {this.state.ready ? (
@@ -80,11 +81,12 @@ DemoFrame.propTypes = {
 const StyledFrame = withStyles(styles, { withTheme: true })(DemoFrame);
 
 function DemoSandboxed(props) {
-  const { component: Component, iframe } = props;
+  const { component: Component, iframe, name } = props;
   const Sandbox = iframe ? StyledFrame : React.Fragment;
+  const sandboxProps = iframe ? { title: `${name} demo` } : {};
 
   return (
-    <Sandbox>
+    <Sandbox {...sandboxProps}>
       <Component />
     </Sandbox>
   );
@@ -93,6 +95,7 @@ function DemoSandboxed(props) {
 DemoSandboxed.propTypes = {
   component: PropTypes.elementType.isRequired,
   iframe: PropTypes.bool,
+  name: PropTypes.string.isRequired,
 };
 
 export default React.memo(DemoSandboxed);
diff --git a/docs/src/pages/components/app-bar/MenuAppBar.js b/docs/src/pages/components/app-bar/MenuAppBar.js
@@ -61,7 +61,8 @@ function MenuAppBar() {
           {auth && (
             <div>
               <IconButton
-                aria-owns={open ? 'menu-appbar' : undefined}
+                aria-label="Account of current user"
+                aria-controls="menu-appbar"
                 aria-haspopup="true"
                 onClick={handleMenu}
                 color="inherit"
@@ -75,6 +76,7 @@ function MenuAppBar() {
                   vertical: 'top',
                   horizontal: 'right',
                 }}
+                keepMounted
                 transformOrigin={{
                   vertical: 'top',
                   horizontal: 'right',

diff --git a/docs/src/pages/components/app-bar/MenuAppBar.tsx b/docs/src/pages/components/app-bar/MenuAppBar.tsx
@@ -63,7 +63,8 @@ function MenuAppBar() {
           {auth && (
             <div>
               <IconButton
-                aria-owns={open ? 'menu-appbar' : undefined}
+                aria-label="Account of current user"
+                aria-controls="menu-appbar"
                 aria-haspopup="true"
                 onClick={handleMenu}
                 color="inherit"
@@ -77,6 +78,7 @@ function MenuAppBar() {
                   vertical: 'top',
                   horizontal: 'right',
                 }}
+                keepMounted
                 transformOrigin={{
                   vertical: 'top',
                   horizontal: 'right',

diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.js b/docs/src/pages/components/app-bar/PrimarySearchAppBar.js
@@ -103,10 +103,13 @@ function PrimarySearchAppBar() {
     setMobileMoreAnchorEl(event.currentTarget);
   }
 
+  const menuId = 'primary-search-account-menu';
   const renderMenu = (
     <Menu
       anchorEl={anchorEl}
       anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      id={menuId}
+      keepMounted
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       open={isMenuOpen}
       onClose={handleMenuClose}
@@ -116,32 +119,40 @@ function PrimarySearchAppBar() {
     </Menu>
   );
 
+  const mobileMenuId = 'primary-search-account-menu-mobile';
   const renderMobileMenu = (
     <Menu
       anchorEl={mobileMoreAnchorEl}
       anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      id={mobileMenuId}
+      keepMounted
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       open={isMobileMenuOpen}
       onClose={handleMobileMenuClose}
     >
       <MenuItem>
-        <IconButton color="inherit">
+        <IconButton aria-label="Show 4 new mails" color="inherit">
           <Badge badgeContent={4} color="secondary">
             <MailIcon />
           </Badge>
         </IconButton>
         <p>Messages</p>
       </MenuItem>
       <MenuItem>
-        <IconButton color="inherit">
+        <IconButton aria-label="Show 11 new notifications" color="inherit">
           <Badge badgeContent={11} color="secondary">
             <NotificationsIcon />
           </Badge>
         </IconButton>
         <p>Notifications</p>
       </MenuItem>
       <MenuItem onClick={handleProfileMenuOpen}>
-        <IconButton color="inherit">
+        <IconButton
+          aria-label="Account of current user"
+          aria-controls="primary-search-account-menu"
+          aria-haspopup="true"
+          color="inherit"
+        >
           <AccountCircle />
         </IconButton>
         <p>Profile</p>
@@ -174,23 +185,25 @@ function PrimarySearchAppBar() {
                 root: classes.inputRoot,
                 input: classes.inputInput,
               }}
+              inputProps={{ 'aria-label': 'Search' }}
             />
           </div>
           <div className={classes.grow} />
           <div className={classes.sectionDesktop}>
-            <IconButton color="inherit">
+            <IconButton aria-label="Show 4 new mails" color="inherit">
               <Badge badgeContent={4} color="secondary">
                 <MailIcon />
               </Badge>
             </IconButton>
-            <IconButton color="inherit">
+            <IconButton aria-label="Show 17 new notifications" color="inherit">
               <Badge badgeContent={17} color="secondary">
                 <NotificationsIcon />
               </Badge>
             </IconButton>
             <IconButton
               edge="end"
-              aria-owns={isMenuOpen ? 'material-appbar' : undefined}
+              aria-label="Account of current user"
+              aria-controls={menuId}
               aria-haspopup="true"
               onClick={handleProfileMenuOpen}
               color="inherit"
@@ -199,14 +212,20 @@ function PrimarySearchAppBar() {
             </IconButton>
           </div>
           <div className={classes.sectionMobile}>
-            <IconButton aria-haspopup="true" onClick={handleMobileMenuOpen} color="inherit">
+            <IconButton
+              aria-label="Show more"
+              aria-controls={mobileMenuId}
+              aria-haspopup="true"
+              onClick={handleMobileMenuOpen}
+              color="inherit"
+            >
               <MoreIcon />
             </IconButton>
           </div>
         </Toolbar>
       </AppBar>
-      {renderMenu}
       {renderMobileMenu}
+      {renderMenu}
     </div>
   );
 }

diff --git a/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx b/docs/src/pages/components/app-bar/PrimarySearchAppBar.tsx
@@ -105,10 +105,13 @@ function PrimarySearchAppBar() {
     setMobileMoreAnchorEl(event.currentTarget);
   }
 
+  const menuId = 'primary-search-account-menu';
   const renderMenu = (
     <Menu
       anchorEl={anchorEl}
       anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      id={menuId}
+      keepMounted
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       open={isMenuOpen}
       onClose={handleMenuClose}
@@ -118,32 +121,40 @@ function PrimarySearchAppBar() {
     </Menu>
   );
 
+  const mobileMenuId = 'primary-search-account-menu-mobile';
   const renderMobileMenu = (
     <Menu
       anchorEl={mobileMoreAnchorEl}
       anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+      id={mobileMenuId}
+      keepMounted
       transformOrigin={{ vertical: 'top', horizontal: 'right' }}
       open={isMobileMenuOpen}
       onClose={handleMobileMenuClose}
     >
       <MenuItem>
-        <IconButton color="inherit">
+        <IconButton aria-label="Show 4 new mails" color="inherit">
           <Badge badgeContent={4} color="secondary">
             <MailIcon />
           </Badge>
         </IconButton>
         <p>Messages</p>
       </MenuItem>
       <MenuItem>
-        <IconButton color="inherit">
+        <IconButton aria-label="Show 11 new notifications" color="inherit">
           <Badge badgeContent={11} color="secondary">
             <NotificationsIcon />
           </Badge>
         </IconButton>
         <p>Notifications</p>
       </MenuItem>
       <MenuItem onClick={handleProfileMenuOpen}>
-        <IconButton color="inherit">
+        <IconButton
+          aria-label="Account of current user"
+          aria-controls="primary-search-account-menu"
+          aria-haspopup="true"
+          color="inherit"
+        >
           <AccountCircle />
         </IconButton>
         <p>Profile</p>
@@ -176,23 +187,25 @@ function PrimarySearchAppBar() {
                 root: classes.inputRoot,
                 input: classes.inputInput,
               }}
+              inputProps={{ 'aria-label': 'Search' }}
             />
           </div>
           <div className={classes.grow} />
           <div className={classes.sectionDesktop}>
-            <IconButton color="inherit">
+            <IconButton aria-label="Show 4 new mails" color="inherit">
               <Badge badgeContent={4} color="secondary">
                 <MailIcon />
               </Badge>
             </IconButton>
-            <IconButton color="inherit">
+            <IconButton aria-label="Show 17 new notifications" color="inherit">
               <Badge badgeContent={17} color="secondary">
                 <NotificationsIcon />
               </Badge>
             </IconButton>
             <IconButton
               edge="end"
-              aria-owns={isMenuOpen ? 'material-appbar' : undefined}
+              aria-label="Account of current user"
+              aria-controls={menuId}
               aria-haspopup="true"
               onClick={handleProfileMenuOpen}
               color="inherit"
@@ -201,14 +214,20 @@ function PrimarySearchAppBar() {
             </IconButton>
           </div>
           <div className={classes.sectionMobile}>
-            <IconButton aria-haspopup="true" onClick={handleMobileMenuOpen} color="inherit">
+            <IconButton
+              aria-label="Show more"
+              aria-controls={mobileMenuId}
+              aria-haspopup="true"
+              onClick={handleMobileMenuOpen}
+              color="inherit"
+            >
               <MoreIcon />
             </IconButton>
           </div>
         </Toolbar>
       </AppBar>
-      {renderMenu}
       {renderMobileMenu}
+      {renderMenu}
     </div>
   );
 }

diff --git a/docs/src/pages/components/app-bar/SearchAppBar.js b/docs/src/pages/components/app-bar/SearchAppBar.js
@@ -89,6 +89,7 @@ function SearchAppBar() {
                 root: classes.inputRoot,
                 input: classes.inputInput,
               }}
+              inputProps={{ 'aria-label': 'Search' }}
             />
           </div>
         </Toolbar>

diff --git a/docs/src/pages/components/app-bar/SearchAppBar.tsx b/docs/src/pages/components/app-bar/SearchAppBar.tsx
@@ -91,6 +91,7 @@ function SearchAppBar() {
                 root: classes.inputRoot,
                 input: classes.inputInput,
               }}
+              inputProps={{ 'aria-label': 'Search' }}
             />
           </div>
         </Toolbar>

diff --git a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js
@@ -101,18 +101,18 @@ class RouterBreadcrumbs extends React.Component {
               );
             }}
           </Route>
-          <div className={classes.lists}>
-            <List component="nav">
+          <nav className={classes.lists} aria-label="Mailbox folders">
+            <List>
               <ListItemLink to="/inbox" open={this.state.open} onClick={this.handleClick} />
-              <Collapse in={this.state.open} timeout="auto" unmountOnExit>
-                <List component="div" disablePadding>
+              <Collapse component="li" in={this.state.open} timeout="auto" unmountOnExit>
+                <List disablePadding>
                   <ListItemLink to="/inbox/important" className={classes.nested} />
                 </List>
               </Collapse>
               <ListItemLink to="/trash" />
               <ListItemLink to="/spam" />
             </List>
-          </div>
+          </nav>
         </div>
       </MemoryRouter>
     );

diff --git a/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.tsx
@@ -119,18 +119,18 @@ class RouterBreadcrumbs extends React.Component<RouterBreadcrumbsProp, RouterBre
               );
             }}
           </Route>
-          <div className={classes.lists}>
-            <List component="nav">
+          <nav className={classes.lists} aria-label="Mailbox folders">
+            <List>
               <ListItemLink to="/inbox" open={this.state.open} onClick={this.handleClick} />
-              <Collapse in={this.state.open} timeout="auto" unmountOnExit>
-                <List component="div" disablePadding>
+              <Collapse component="li" in={this.state.open} timeout="auto" unmountOnExit>
+                <List disablePadding>
                   <ListItemLink to="/inbox/important" className={classes.nested} />
                 </List>
               </Collapse>
               <ListItemLink to="/trash" />
               <ListItemLink to="/spam" />
             </List>
-          </div>
+          </nav>
         </div>
       </MemoryRouter>
     );

diff --git a/docs/src/pages/components/cards/RecipeReviewCard.js b/docs/src/pages/components/cards/RecipeReviewCard.js
@@ -56,7 +56,7 @@ function RecipeReviewCard() {
           </Avatar>
         }
         action={
-          <IconButton>
+          <IconButton aria-label="Settings">
             <MoreVertIcon />
           </IconButton>
         }