improvement(a11y): use more semantic html tags in collections view (#1585)

cypress/integration/editorial_workflow_spec.js

@@ -160,7 +160,7 @@ describe('Editorial Workflow', () => {
 
     function assertOnCollectionsPage() {
       cy.url().should('contain', '/#/collections/posts')
-      cy.contains('h1', 'Collections')
+      cy.contains('h2', 'Collections')
     }
 
     it('successfully loads', () => {

packages/netlify-cms-core/src/components/App/Header.js

@@ -21,7 +21,7 @@ const styles = {
   `,
 };
 
-const AppHeaderContainer = styled.div`
+const AppHeaderContainer = styled.header`
   z-index: 300;
 `;
 

packages/netlify-cms-core/src/components/Collection/Collection.js

@@ -14,7 +14,7 @@ const CollectionContainer = styled.div`
   margin: ${lengths.pageMargin};
 `
 
-const CollectionMain = styled.div`
+const CollectionMain = styled.main`
   padding-left: 280px;
 `
 

packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js

@@ -5,27 +5,33 @@ import { resolvePath } from 'netlify-cms-lib-util';
 import { colors, colorsRaw, components, lengths } from 'netlify-cms-ui-default';
 import { VIEW_STYLE_LIST, VIEW_STYLE_GRID } from 'Constants/collectionViews';
 
-const ListCardLink = styled(Link)`
+const ListCard = styled.li`
   ${components.card};
   width: ${lengths.topCardWidth};
-  max-width: 100%;
-  padding: 16px 22px;
   margin-left: 12px;
   margin-bottom: 16px;
+`
 
+const ListCardLink = styled(Link)`
+  display: block;
+  max-width: 100%;
+  padding: 16px 22px;
   &:hover {
     background-color: ${colors.foreground};
   }
 `
 
-const GridCardLink = styled(Link)`
+const GridCard = styled.li`
   ${components.card};
   flex: 0 0 335px;
   height: 240px;
   overflow: hidden;
   margin-left: 12px;
   margin-bottom: 16px;
+`
 
+const GridCardLink = styled(Link)`
+  display: block;
   &, &:hover {
     background-color: ${colors.foreground};
     color: ${colors.text};
@@ -92,22 +98,26 @@ const EntryCard = ({
 
   if (viewStyle === VIEW_STYLE_LIST) {
     return (
-      <ListCardLink to={path}>
-        { collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null }
-        <ListCardTitle>{ title }</ListCardTitle>
-      </ListCardLink>
+      <ListCard>
+        <ListCardLink to={path}>
+          { collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null }
+          <ListCardTitle>{ title }</ListCardTitle>
+        </ListCardLink>
+      </ListCard>
     );
   }
 
   if (viewStyle === VIEW_STYLE_GRID) {
     return (
-      <GridCardLink to={path}>
-        <CardBody hasImage={image}>
-          { collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null }
-          <CardHeading>{title}</CardHeading>
-        </CardBody>
-        { image ? <CardImage url={image}/> : null }
-      </GridCardLink>
+      <GridCard>
+        <GridCardLink to={path}>
+          <CardBody hasImage={image}>
+            { collectionLabel ? <CollectionLabel>{collectionLabel}</CollectionLabel> : null }
+            <CardHeading>{title}</CardHeading>
+          </CardBody>
+          { image ? <CardImage url={image}/> : null }
+        </GridCardLink>
+      </GridCard>
     );
   }
 }

packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js

@@ -8,9 +8,10 @@ import { Cursor } from 'netlify-cms-lib-util';
 import { selectFields, selectInferedField } from 'Reducers/collections';
 import EntryCard from './EntryCard';
 
-const CardsGrid = styled.div`
+const CardsGrid = styled.ul`
   display: flex;
   flex-flow: row wrap;
+  list-style-type: none;
   margin-left: -12px;
 `
 

packages/netlify-cms-core/src/components/Collection/Sidebar.js

@@ -13,7 +13,7 @@ const styles = {
   `,
 };
 
-const SidebarContainer = styled.div`
+const SidebarContainer = styled.aside`
   ${components.card};
   width: 250px;
   padding: 8px 0 12px;
@@ -22,7 +22,7 @@ const SidebarContainer = styled.div`
   overflow: auto;
 `
 
-const SidebarHeading = styled.h1`
+const SidebarHeading = styled.h2`
   font-size: 23px;
   font-weight: 600;
   padding: 0;