[docs] Add a11y label to nav landmarks

mui · May 29, 2019 · 540d75c · 540d75c
1 parent 5dbc729
commit 540d75c
Show file tree

Hide file tree

Showing 18 changed files with 33 additions and 23 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/pages/components/breadcrumbs/RouterBreadcrumbs.js b/docs/src/pages/components/breadcrumbs/RouterBreadcrumbs.js
@@ -101,7 +101,7 @@ class RouterBreadcrumbs extends React.Component {
               );
             }}
           </Route>
-          <nav className={classes.lists}>
+          <nav className={classes.lists} aria-label="Mailbox folders">
             <List>
               <ListItemLink to="/inbox" open={this.state.open} onClick={this.handleClick} />
               <Collapse component="li" in={this.state.open} timeout="auto" unmountOnExit>

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

diff --git a/docs/src/pages/components/dividers/ListDividers.js b/docs/src/pages/components/dividers/ListDividers.js
@@ -17,7 +17,7 @@ function ListDividers() {
   const classes = useStyles();
 
   return (
-    <List component="nav" className={classes.root}>
+    <List component="nav" className={classes.root} aria-label="Mailbox folders">
       <ListItem button>
         <ListItemText primary="Inbox" />
       </ListItem>

diff --git a/docs/src/pages/components/dividers/ListDividers.tsx b/docs/src/pages/components/dividers/ListDividers.tsx
@@ -19,7 +19,7 @@ function ListDividers() {
   const classes = useStyles();
 
   return (
-    <List component="nav" className={classes.root}>
+    <List component="nav" className={classes.root} aria-label="Mailbox folders">
       <ListItem button>
         <ListItemText primary="Inbox" />
       </ListItem>

diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js
@@ -104,7 +104,7 @@ function ResponsiveDrawer(props) {
           </Typography>
         </Toolbar>
       </AppBar>
-      <nav className={classes.drawer}>
+      <nav className={classes.drawer} aria-label="Mailbox folders">
         {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
         <Hidden smUp implementation="css">
           <Drawer

diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx
@@ -110,7 +110,7 @@ function ResponsiveDrawer(props: ResponsiveDrawerProps) {
           </Typography>
         </Toolbar>
       </AppBar>
-      <nav className={classes.drawer}>
+      <nav className={classes.drawer} aria-label="Mailbox folders">
         {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
         <Hidden smUp implementation="css">
           <Drawer

diff --git a/docs/src/pages/components/lists/InsetList.js b/docs/src/pages/components/lists/InsetList.js
@@ -18,7 +18,7 @@ function InsetList() {
   const classes = useStyles();
 
   return (
-    <List component="nav" className={classes.root}>
+    <List component="nav" className={classes.root} aria-label="Contacts">
       <ListItem button>
         <ListItemIcon>
           <StarIcon />

diff --git a/docs/src/pages/components/lists/InsetList.tsx b/docs/src/pages/components/lists/InsetList.tsx
@@ -20,7 +20,7 @@ function InsetList() {
   const classes = useStyles();
 
   return (
-    <List component="nav" className={classes.root}>
+    <List component="nav" className={classes.root} aria-label="Contacts">
       <ListItem button>
         <ListItemIcon>
           <StarIcon />

diff --git a/docs/src/pages/components/lists/NestedList.js b/docs/src/pages/components/lists/NestedList.js
@@ -35,7 +35,12 @@ function NestedList() {
   return (
     <List
       component="nav"
-      subheader={<ListSubheader component="div">Nested List Items</ListSubheader>}
+      aria-labelledby="nested-list-subheader"
+      subheader={
+        <ListSubheader component="div" id="nested-list-subheader">
+          Nested List Items
+        </ListSubheader>
+      }
       className={classes.root}
     >
       <ListItem button>

diff --git a/docs/src/pages/components/lists/NestedList.tsx b/docs/src/pages/components/lists/NestedList.tsx
@@ -35,7 +35,12 @@ function NestedList() {
   return (
     <List
       component="nav"
-      subheader={<ListSubheader component="div">Nested List Items</ListSubheader>}
+      aria-labelledby="nested-list-subheader"
+      subheader={
+        <ListSubheader component="div" id="nested-list-subheader">
+          Nested List Items
+        </ListSubheader>
+      }
       className={classes.root}
     >
       <ListItem button>

diff --git a/docs/src/pages/components/lists/SelectedListItem.js b/docs/src/pages/components/lists/SelectedListItem.js
@@ -26,7 +26,7 @@ function SelectedListItem() {
 
   return (
     <div className={classes.root}>
-      <List component="nav">
+      <List component="nav" aria-label="Main mailbox folders">
         <ListItem
           button
           selected={selectedIndex === 0}
@@ -49,7 +49,7 @@ function SelectedListItem() {
         </ListItem>
       </List>
       <Divider />
-      <List component="nav">
+      <List component="nav" aria-label="Secondary mailbox folder">
         <ListItem
           button
           selected={selectedIndex === 2}

diff --git a/docs/src/pages/components/lists/SelectedListItem.tsx b/docs/src/pages/components/lists/SelectedListItem.tsx
@@ -29,7 +29,7 @@ function SelectedListItem() {
 
   return (
     <div className={classes.root}>
-      <List component="nav">
+      <List component="nav" aria-label="Main mailbox folders">
         <ListItem
           button
           selected={selectedIndex === 0}
@@ -52,7 +52,7 @@ function SelectedListItem() {
         </ListItem>
       </List>
       <Divider />
-      <List component="nav">
+      <List component="nav" aria-label="Secondary mailbox folder">
         <ListItem
           button
           selected={selectedIndex === 2}

diff --git a/docs/src/pages/components/lists/SimpleList.js b/docs/src/pages/components/lists/SimpleList.js
@@ -25,7 +25,7 @@ function SimpleList() {
 
   return (
     <div className={classes.root}>
-      <List component="nav">
+      <List component="nav" aria-label="Main mailbox folders">
         <ListItem button>
           <ListItemIcon>
             <InboxIcon />
@@ -40,7 +40,7 @@ function SimpleList() {
         </ListItem>
       </List>
       <Divider />
-      <List component="nav">
+      <List component="nav" aria-label="Secondary mailbox folders">
         <ListItem button>
           <ListItemText primary="Trash" />
         </ListItem>

diff --git a/docs/src/pages/components/lists/SimpleList.tsx b/docs/src/pages/components/lists/SimpleList.tsx
@@ -27,7 +27,7 @@ function SimpleList() {
 
   return (
     <div className={classes.root}>
-      <List component="nav">
+      <List component="nav" aria-label="Main mailbox folders">
         <ListItem button>
           <ListItemIcon>
             <InboxIcon />
@@ -42,7 +42,7 @@ function SimpleList() {
         </ListItem>
       </List>
       <Divider />
-      <List component="nav">
+      <List component="nav" aria-label="Secondary mailbox folders">
         <ListItem button>
           <ListItemText primary="Trash" />
         </ListItem>

diff --git a/docs/src/pages/components/menus/SimpleListMenu.js b/docs/src/pages/components/menus/SimpleListMenu.js
@@ -41,7 +41,7 @@ function SimpleListMenu() {
 
   return (
     <div className={classes.root}>
-      <List component="nav">
+      <List component="nav" aria-label="Device settings">
         <ListItem
           button
           aria-haspopup="true"

diff --git a/docs/src/pages/components/menus/SimpleListMenu.tsx b/docs/src/pages/components/menus/SimpleListMenu.tsx
@@ -43,7 +43,7 @@ function SimpleListMenu() {
 
   return (
     <div className={classes.root}>
-      <List component="nav">
+      <List component="nav" aria-label="Device settings">
         <ListItem
           button
           aria-haspopup="true"

diff --git a/docs/src/pages/guides/composition/ComponentProperty.js b/docs/src/pages/guides/composition/ComponentProperty.js
@@ -80,12 +80,12 @@ function ComponentProperty(props) {
           )}
         </Route>
         <div className={classes.lists}>
-          <List component="nav">
+          <List component="nav" aria-label="Main mailbox folders">
             <ListItemLink to="/inbox" primary="Inbox" icon={<InboxIcon />} />
             <ListItemLink to="/drafts" primary="Drafts" icon={<DraftsIcon />} />
           </List>
           <Divider />
-          <List component="nav">
+          <List component="nav" aria-label="Secondary mailbox folders">
             <ListItemLinkShorthand to="/trash" primary="Trash" />
             <ListItemLinkShorthand to="/spam" primary="Spam" />
           </List>