Merge remote-tracking branch 'upstream/master' into feature/accessibility-list-reorder

Conflicts:
	src/components/App.jsx

src/components/App.jsx

@@ -3,6 +3,7 @@ import Mousetrap from 'mousetrap'
 import cloneDeep from 'lodash.clonedeep'
 import clamp from 'lodash.clamp'
 import {arrayMove} from 'react-sortable-hoc';
+import url from 'url'
 
 import MapboxGlMap from './map/MapboxGlMap'
 import OpenLayers3Map from './map/OpenLayers3Map'
@@ -74,6 +75,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: [],
@@ -83,6 +86,7 @@ export default class App extends React.Component {
       vectorLayers: {},
       inspectModeEnabled: false,
       spec: styleSpec.latest,
+      mapFilter: queryObj["color-blindness-emulation"],
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -321,15 +325,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) {

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 navigation
+          </a>
           <img src={logoImage} alt="Maputnik" />
           <h1>Maputnik
             <span className="maputnik-toolbar-version">v{pkgJson.version}</span>

src/components/layers/LayerList.jsx

@@ -178,6 +178,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"}