Merge branch 'feature/accessibility-list-reorder' into feature/shortcuts

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'
@@ -153,6 +154,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: [],
@@ -168,7 +171,8 @@ export default class App extends React.Component {
         open: false,
         shortcuts: false,
         export: false,
-      }
+      },
+      mapFilter: queryObj["color-blindness-emulation"],
     }
 
     this.layerWatcher = new LayerWatcher({
@@ -407,15 +411,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

@@ -99,9 +99,13 @@ export default class Toolbar extends React.Component {
     return <div className='maputnik-toolbar'>
       <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/LayerEditor.jsx

@@ -48,6 +48,13 @@ export default class LayerEditor extends React.Component {
     spec: PropTypes.object.isRequired,
     onLayerChanged: PropTypes.func,
     onLayerIdChange: PropTypes.func,
+    onMoveLayer: PropTypes.func,
+    onLayerDestroy: PropTypes.func,
+    onLayerCopy: PropTypes.func,
+    onLayerVisibilityToggle: PropTypes.func,
+    isFirstLayer: PropTypes.bool,
+    isLastLayer: PropTypes.bool,
+    layerIndex: PropTypes.number,
   }
 
   static defaultProps = {
@@ -202,6 +209,7 @@ export default class LayerEditor extends React.Component {
       </LayerEditorGroup>
     })
 
+    const layout = this.props.layer.layout || {}
 
     const items = {
       delete: {
@@ -213,7 +221,7 @@ export default class LayerEditor extends React.Component {
         handler: () => this.props.onLayerCopy(this.props.layer.id)
       },
       hide: {
-        text: "Hide",
+        text: (layout.visibility === "none") ? "Show" : "Hide",
         handler: () => this.props.onLayerVisibilityToggle(this.props.layer.id)
       },
       moveLayerUp: {

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"}