normalize, global styles, add roles to major landmarks

src/components/Footer/Footer.tsx

@@ -1,7 +1,9 @@
 import React from "react";
 import styled from "styled-components";
 
-const Layout = styled.footer`
+const Layout = styled.footer.attrs({
+  role: "contentinfo",
+})`
   display: flex;
   flex-flow: row nowrap;
   justify-content: flex-start;

src/components/GlobalStyles/GlobalStyles.tsx

@@ -0,0 +1,7 @@
+import { createGlobalStyle } from "styled-components";
+
+const GlobalStyles = createGlobalStyle`
+
+`;
+
+export default GlobalStyles;

src/components/GlobalStyles/index.ts

@@ -0,0 +1 @@
+export { default as GlobalStyles } from "./GlobalStyles";

src/components/Header/Header.tsx

@@ -8,7 +8,9 @@ interface HeaderProps {
   children?: React.ReactNode;
 }
 
-const Layout = styled.header`
+const Layout = styled.header.attrs({
+  role: "banner",
+})`
   display: flex;
   flex-flow: row nowrap;
   justify-content: space-between;

src/components/Layout/Layout.tsx

@@ -3,13 +3,16 @@ import styled from "styled-components";
 import { Normalize } from "styled-normalize";
 
 import { Footer } from "../Footer";
+import { GlobalStyles } from "../GlobalStyles";
 import { Header } from "../Header";
 
 interface LayoutProps {
   children?: React.ReactNode;
 }
 
-const Main = styled.main`
+const Main = styled.main.attrs({
+  role: "main",
+})`
   display: flex;
   flex-flow: column nowrap;
   justify-content: flex-start;
@@ -22,6 +25,8 @@ const Layout: React.FC<LayoutProps> = ({ children }: LayoutProps) => {
   return (
     <>
       <Normalize />
+      <GlobalStyles />
+
       <Header />
       <Main>{children}</Main>
       <Footer />

src/components/index.ts

@@ -1,4 +1,5 @@
 export * from "./Footer";
+export * from "./GlobalStyles";
 export * from "./Header";
 export * from "./Image";
 export * from "./Layout";