Prefer semantic elements

nygrenh · nygrenh · commit 493184a77943 · 2018-12-26T00:48:34.000+02:00
diff --git a/src/components/Banner.js b/src/components/Banner.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import Bruce from '../images/banner.svg'
 import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
 
-const BannerWrapper = styled.div`
+const BannerWrapper = styled.header`
   height: 30rem;
   max-height: 50vh;
   display: flex;
diff --git a/src/components/ContentArea.js b/src/components/ContentArea.js
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { SIDEBAR_WIDTH } from './Sidebar'
 import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
 
-const ContentAreaContainer = styled.div`
+const ContentAreaContainer = styled.main`
   @media only screen and (min-width: 1200px) {
     margin-left: ${SIDEBAR_WIDTH};
   }
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -59,7 +59,7 @@ const LogoContainer = styled.div`
   align-items: center;
 `
 
-const TreeViewContainer = styled.div`
+const TreeViewContainer = styled.nav`
   flex: 1;
 `
 
diff --git a/src/partials/ProgrammingExercise.js b/src/partials/ProgrammingExercise.js
@@ -17,7 +17,7 @@ import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
 
 const accentColor = '#FAAA38'
 
-const Wrapper = styled.div`
+const ProgrammingExerciseWrapper = styled.section`
   padding 1rem;
   margin-bottom: 2rem;
   border-left: 0.2rem solid ${accentColor};
@@ -174,7 +174,7 @@ class ProgrammingExercise extends React.Component {
     }
 
     return (
-      <Wrapper>
+      <ProgrammingExerciseWrapper>
         <Header>
           <StyledIcon icon={icon} size="1x" />
           <HeaderMuted>Tehtävä: </HeaderMuted>
@@ -297,7 +297,7 @@ class ProgrammingExercise extends React.Component {
             </div>
           )}
         </Body>
-      </Wrapper>
+      </ProgrammingExerciseWrapper>
     )
   }
 }
diff --git a/src/partials/TextBox.js b/src/partials/TextBox.js
@@ -5,7 +5,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faInfoCircle, faUserGraduate } from '@fortawesome/free-solid-svg-icons'
 import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'
 
-const Wrapper = styled.div`
+const Wrapper = styled.aside`
   padding 1rem;
   margin-bottom: 2rem;
   border-left: 0.2rem solid var(--color);
diff --git a/src/templates/CourseContentTemplate.js b/src/templates/CourseContentTemplate.js
@@ -28,7 +28,7 @@ const StyledIcon = styled(FontAwesomeIcon)`
   font-size: 1em;
 `
 
-const ContentWrapper = styled.div``
+const ContentWrapper = styled.article``
 
 const UpLink = styled(Link)`
   color: #332c2cb3 !important;

Original file line number	Diff line number	Diff line change
`@@ -3,7 +3,7 @@ import styled from 'styled-components'`
`3`	`3`	`import { SIDEBAR_WIDTH } from './Sidebar'`
`4`	`4`	`import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'`
`5`	`5`
`6`		-const ContentAreaContainer = styled.div`
	`6`	+const ContentAreaContainer = styled.main`
`7`	`7`	`@media only screen and (min-width: 1200px) {`
`8`	`8`	`margin-left: ${SIDEBAR_WIDTH};`
`9`	`9`	`}`
Original file line number	Diff line number	Diff line change
@@ -59,7 +59,7 @@ const LogoContainer = styled.div`
`59`	`59`	`align-items: center;`
`60`	`60`	`
`61`	`61`
`62`		-const TreeViewContainer = styled.div`
	`62`	+const TreeViewContainer = styled.nav`
`63`	`63`	`flex: 1;`
`64`	`64`	`
`65`	`65`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,7 @@ import withSimpleErrorBoundary from '../util/withSimpleErrorBoundary'`
`17`	`17`
`18`	`18`	`const accentColor = '#FAAA38'`
`19`	`19`
`20`		-const Wrapper = styled.div`
	`20`	+const ProgrammingExerciseWrapper = styled.section`
`21`	`21`	`padding 1rem;`
`22`	`22`	`margin-bottom: 2rem;`
`23`	`23`	`border-left: 0.2rem solid ${accentColor};`
`@@ -174,7 +174,7 @@ class ProgrammingExercise extends React.Component {`
`174`	`174`	`}`
`175`	`175`
`176`	`176`	`return (`
`177`		`- <Wrapper>`
	`177`	`+ <ProgrammingExerciseWrapper>`
`178`	`178`	`<Header>`
`179`	`179`	`<StyledIcon icon={icon} size="1x" />`
`180`	`180`	`<HeaderMuted>Tehtävä: </HeaderMuted>`
`@@ -297,7 +297,7 @@ class ProgrammingExercise extends React.Component {`
`297`	`297`	`</div>`
`298`	`298`	`)}`
`299`	`299`	`</Body>`
`300`		`- </Wrapper>`
	`300`	`+ </ProgrammingExerciseWrapper>`
`301`	`301`	`)`
`302`	`302`	`}`
`303`	`303`	`}`
Original file line number	Diff line number	Diff line change
@@ -28,7 +28,7 @@ const StyledIcon = styled(FontAwesomeIcon)`
`28`	`28`	`font-size: 1em;`
`29`	`29`	`
`30`	`30`
`31`		-const ContentWrapper = styled.div``
	`31`	+const ContentWrapper = styled.article``
`32`	`32`
`33`	`33`	const UpLink = styled(Link)`
`34`	`34`	`color: #332c2cb3 !important;`