From 4782c472bfbe84c93fb49834368d49d892ecc3c0 Mon Sep 17 00:00:00 2001
From: Jake Rayson <hi@github.grwd.uk>
Date: Mon, 6 Aug 2018 21:53:40 +0100
Subject: [PATCH] improvement(a11y): use more semantic html tags in collections
 view (#1585)

---
 .../integration/editorial_workflow_spec.js    |  2 +-
 .../src/components/App/Header.js              |  2 +-
 .../src/components/Collection/Collection.js   |  2 +-
 .../Collection/Entries/EntryCard.js           | 40 ++++++++++++-------
 .../Collection/Entries/EntryListing.js        |  3 +-
 .../src/components/Collection/Sidebar.js      |  4 +-
 6 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/cypress/integration/editorial_workflow_spec.js b/cypress/integration/editorial_workflow_spec.js
index 25237de9..e55151f9 100644
--- a/cypress/integration/editorial_workflow_spec.js
+++ b/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', () => {
diff --git a/packages/netlify-cms-core/src/components/App/Header.js b/packages/netlify-cms-core/src/components/App/Header.js
index 355148c2..9232f68d 100644
--- a/packages/netlify-cms-core/src/components/App/Header.js
+++ b/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;
 `;
 
diff --git a/packages/netlify-cms-core/src/components/Collection/Collection.js b/packages/netlify-cms-core/src/components/Collection/Collection.js
index c4c3632e..c5f7d514 100644
--- a/packages/netlify-cms-core/src/components/Collection/Collection.js
+++ b/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;
 `
 
diff --git a/packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js b/packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js
index bb7d280c..74681d48 100644
--- a/packages/netlify-cms-core/src/components/Collection/Entries/EntryCard.js
+++ b/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>
     );
   }
 }
diff --git a/packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js b/packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js
index 9eed15f1..c6bb131b 100644
--- a/packages/netlify-cms-core/src/components/Collection/Entries/EntryListing.js
+++ b/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;
 `
 
diff --git a/packages/netlify-cms-core/src/components/Collection/Sidebar.js b/packages/netlify-cms-core/src/components/Collection/Sidebar.js
index 96ff4e83..64931101 100644
--- a/packages/netlify-cms-core/src/components/Collection/Sidebar.js
+++ b/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;