Add tests for header and make accessible

src/devpanel/components/Header/Header.css

@@ -1,10 +1,19 @@
-.Header {
-  background-color: #363b44;
-  color: #f9bb10;
-  padding: 10px;
+@media only screen {
+  .header {
+    background-color: var(--microsoft-gray-darkest);
+    color: var(--microsoft-white);
+    padding: 10px;
+  }
+
+  .header--text {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
 }
 
-.Header h1 {
-  margin: 0;
-  padding: 0;
+@media only screen and (min-width: 540px) {
+  .header--text {
+    text-align: start;
+  }
 }

src/devpanel/components/Header/Header.js

@@ -1,22 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
+
 import './Header.css';
 
-class Header extends Component {
-  componentDidMount () {
-
-  }
-
-  componentWillUnMount () {
-
-  }
-
-  render () {
-    return (
-      <header className='Header'>
-        <h1>Mezzurite Developer Tools</h1>
-      </header>
-    );
-  }
-}
+const Header = () => (
+  <header className='header' role='banner'>
+    <h1 className='header--text'>Mezzurite Developer Tools</h1>
+  </header>
+);
 
 export default Header;

src/devpanel/components/Header/Header.test.js

@@ -0,0 +1,7 @@
+import Header from './Header';
+
+describe('Header.js', () => {
+  it('should render the header', () => {
+    expect(Header()).toMatchSnapshot();
+  });
+});

src/devpanel/components/Header/__snapshots__/Header.test.js.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header.js should render the header 1`] = `
+<header
+  className="header"
+>
+  <h1
+    className="header--text"
+  >
+    Mezzurite Developer Tools
+  </h1>
+</header>
+`;