From 28af87391d49b38521bf50c8cf28db704c80b19d Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Tue, 22 May 2018 21:43:35 +0100
Subject: [PATCH 1/4] Fixed public source button size.

---
 src/styles/_modal.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 4fe3acf..0e93dca 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -136,6 +136,7 @@
   font-size: $font-size-5;
   color: $color-lowgray;
   background-color: transparent;
+  width: 100%;
 
   @include flex-row;
 }

From a82ba26f861096201aa3cfe4e44342d62330980a Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 28 May 2018 10:50:19 +0100
Subject: [PATCH 2/4] Added skip-menu link for keyboard users.

---
 src/components/Toolbar.jsx          |  4 ++++
 src/components/layers/LayerList.jsx |  1 +
 src/styles/_toolbar.scss            | 22 ++++++++++++++++++++++
 3 files changed, 27 insertions(+)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index caa1c5e..7d24d74 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -135,9 +135,13 @@ export default class Toolbar extends React.Component {
       />
       <div className="maputnik-toolbar__inner">
         <ToolbarLink
+          tabIndex="2"
           href={"https://github.com/maputnik/editor"}
           className="maputnik-toolbar-logo"
         >
+          <a tabIndex="1" className="maputnik-toolbar-skip" href="#skip-menu">
+            Skip the menu
+          </a>
           <img src={logoImage} alt="Maputnik" />
           <h1>Maputnik
             <span className="maputnik-toolbar-version">v{pkgJson.version}</span>
diff --git a/src/components/layers/LayerList.jsx b/src/components/layers/LayerList.jsx
index a9b144f..0bbd2ab 100644
--- a/src/components/layers/LayerList.jsx
+++ b/src/components/layers/LayerList.jsx
@@ -209,6 +209,7 @@ class LayerListContainer extends React.Component {
         <div className="maputnik-default-property">
           <div className="maputnik-multibutton">
             <button
+              id="skip-menu"
               onClick={this.toggleLayers.bind(this)}
               className="maputnik-button">
               {this.state.areAllGroupsExpanded === true ? "Collapse" : "Expand"}
diff --git a/src/styles/_toolbar.scss b/src/styles/_toolbar.scss
index b02c31f..d2c9513 100644
--- a/src/styles/_toolbar.scss
+++ b/src/styles/_toolbar.scss
@@ -16,6 +16,8 @@
   background-color: $color-black;
   padding: $margin-2;
   height: $toolbar-height;
+  position: relative;
+  overflow: hidden;
 
   h1 {
     display: inline;
@@ -80,3 +82,23 @@
   flex: 1;
   overflow-y: auto;
 }
+
+.maputnik-toolbar-skip {
+  position: absolute;
+  overflow: hidden;
+  width: 0px;
+  height: 100%;
+  text-align: center;
+  display: block;
+  background-color: $color-black;
+  z-index: 999;
+  line-height: 40px;
+  left: 0;
+  top: 0;
+
+  &:active,
+  &:focus {
+    width: 100%;
+  }
+}
+

From 272f662a341946e6bcfa8d201a136d19139de1c8 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Mon, 28 May 2018 11:29:49 +0100
Subject: [PATCH 3/4] Changed 'skip' wording

As outlined in <https://webaim.org/techniques/skipnav/>
---
 src/components/Toolbar.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index 7d24d74..f53996a 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -140,7 +140,7 @@ export default class Toolbar extends React.Component {
           className="maputnik-toolbar-logo"
         >
           <a tabIndex="1" className="maputnik-toolbar-skip" href="#skip-menu">
-            Skip the menu
+            Skip navigation
           </a>
           <img src={logoImage} alt="Maputnik" />
           <h1>Maputnik

From aa2f4a091c380f63ad22391f29845f09b5157023 Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Fri, 1 Jun 2018 09:22:18 +0100
Subject: [PATCH 4/4] Initial attempt at color blindness emulation

---
 src/components/App.jsx | 18 ++++++++--
 src/template.html      | 81 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 97 insertions(+), 2 deletions(-)

diff --git a/src/components/App.jsx b/src/components/App.jsx
index 61b2ea7..780470b 100644
--- a/src/components/App.jsx
+++ b/src/components/App.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import Mousetrap from 'mousetrap'
+import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
 import OpenLayers3Map from './map/OpenLayers3Map'
@@ -71,6 +72,8 @@ export default class App extends React.Component {
       Debug.set("maputnik", "styleStore", this.styleStore);
     }
 
+    const queryObj = url.parse(window.location.href, true).query;
+
     this.state = {
       errors: [],
       infos: [],
@@ -80,6 +83,7 @@ export default class App extends React.Component {
       vectorLayers: {},
       inspectModeEnabled: false,
       spec: styleSpec.latest,
+      mapFilter: queryObj["color-blindness-emulation"],
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -266,15 +270,25 @@ export default class App extends React.Component {
     const metadata = this.state.mapStyle.metadata || {}
     const renderer = metadata['maputnik:renderer'] || 'mbgljs'
 
+    let mapElement;
+
     // Check if OL3 code has been loaded?
     if(renderer === 'ol3') {
-      return <OpenLayers3Map {...mapProps} />
+      mapElement = <OpenLayers3Map {...mapProps} />
     } else {
-      return  <MapboxGlMap {...mapProps}
+      mapElement = <MapboxGlMap {...mapProps}
         inspectModeEnabled={this.state.inspectModeEnabled}
         highlightedLayer={this.state.mapStyle.layers[this.state.selectedLayerIndex]}
         onLayerSelect={this.onLayerSelect.bind(this)} />
     }
+
+    const elementStyle = {
+      "filter": `url('#${this.state.mapFilter}')`
+    };
+
+    return <div style={elementStyle}>
+      {mapElement}
+    </div>
   }
 
   onLayerSelect(layerId) {
diff --git a/src/template.html b/src/template.html
index bfa8284..268f229 100644
--- a/src/template.html
+++ b/src/template.html
@@ -69,6 +69,87 @@
   </style>
 </head>
 <body>
+  <!-- TODO: Import dynamically -->
+  <!-- From <https://github.com/hail2u/color-blindness-emulation> -->
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1">
+    <defs>
+      <filter id="protanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.567, 0.433, 0,     0, 0
+                  0.558, 0.442, 0,     0, 0
+                  0,     0.242, 0.758, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="protanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.817, 0.183, 0,     0, 0
+                  0.333, 0.667, 0,     0, 0
+                  0,     0.125, 0.875, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="deuteranopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.625, 0.375, 0,   0, 0
+                  0.7,   0.3,   0,   0, 0
+                  0,     0.3,   0.7, 0, 0
+                  0,     0,     0,   1, 0"/>
+      </filter>
+      <filter id="deuteranomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.8,   0.2,   0,     0, 0
+                  0.258, 0.742, 0,     0, 0
+                  0,     0.142, 0.858, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="tritanopia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.95, 0.05,  0,     0, 0
+                  0,    0.433, 0.567, 0, 0
+                  0,    0.475, 0.525, 0, 0
+                  0,    0,     0,     1, 0"/>
+      </filter>
+      <filter id="tritanomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.967, 0.033, 0,     0, 0
+                  0,     0.733, 0.267, 0, 0
+                  0,     0.183, 0.817, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="achromatopsia">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.299, 0.587, 0.114, 0, 0
+                  0.299, 0.587, 0.114, 0, 0
+                  0.299, 0.587, 0.114, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+      <filter id="achromatomaly">
+        <feColorMatrix
+          in="SourceGraphic"
+          type="matrix"
+          values="0.618, 0.320, 0.062, 0, 0
+                  0.163, 0.775, 0.062, 0, 0
+                  0.163, 0.320, 0.516, 0, 0
+                  0,     0,     0,     1, 0"/>
+      </filter>
+    </defs>
+  </svg>
+
   <div id="app">
     <div id="loader">Loading...</div>
   </div>