Fixed more input accessibility issues, also

- Added searchParams based router for easier testing
 - Added more stories to the storybook

src/components/App.jsx

@@ -6,6 +6,7 @@ import get from 'lodash.get'
 import {unset} from 'lodash'
 import arrayMove from 'array-move'
 import url from 'url'
+import hash from "string-hash";
 
 import MapMapboxGl from './MapMapboxGl'
 import MapOpenLayers from './MapOpenLayers'
@@ -189,7 +190,7 @@ export default class App extends React.Component {
           console.log('Falling back to local storage for storing styles')
           this.styleStore = new StyleStore()
         }
-        this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle))
+        this.styleStore.latestStyle(mapStyle => this.onStyleChanged(mapStyle, {initialLoad: true}))
 
         if(Debug.enabled()) {
           Debug.set("maputnik", "styleStore", this.styleStore);
@@ -322,9 +323,14 @@ export default class App extends React.Component {
     opts = {
       save: true,
       addRevision: true,
+      initialLoad: false,
       ...opts,
     };
 
+    if (opts.initialLoad) {
+      this.getInitialStateFromUrl(newStyle);
+    }
+
     const errors = validate(newStyle, latest) || [];
 
     // The validate function doesn't give us errors for duplicate error with
@@ -442,6 +448,7 @@ export default class App extends React.Component {
       errors: mappedErrors,
     }, () => {
       this.fetchSources();
+      this.setStateInUrl();
     })
 
   }
@@ -542,7 +549,7 @@ export default class App extends React.Component {
   setMapState = (newState) => {
     this.setState({
       mapState: newState
-    })
+    }, this.setStateInUrl);
   }
 
   setDefaultValues = (styleObj) => {
@@ -697,8 +704,85 @@ export default class App extends React.Component {
     </div>
   }
 
+  setStateInUrl = () => {
+    const {mapState, mapStyle, isOpen} = this.state;
+    const {selectedLayerIndex} = this.state;
+    const url = new URL(location.href);
+    const hashVal = hash(JSON.stringify(mapStyle));
+    url.searchParams.set("layer", `${hashVal}~${selectedLayerIndex}`);
+
+    const openModals = Object.entries(isOpen)
+    .map(([key, val]) => (val === true ? key : null))
+    .filter(val => val !== null);
+
+    if (openModals.length > 0) {
+      url.searchParams.set("modal", openModals.join(","));
+    }
+    else {
+      url.searchParams.delete("modal");
+    }
+
+    if (mapState === "map") {
+      url.searchParams.delete("view");
+    }
+    else if (mapState === "inspect") {
+      url.searchParams.set("view", "inspect");
+    }
+
+    history.replaceState({selectedLayerIndex}, "Maputnik", url.href);
+  }
+
+  getInitialStateFromUrl = (mapStyle) => {
+    const url = new URL(location.href);
+    const modalParam = url.searchParams.get("modal");
+    if (modalParam && modalParam !== "") {
+      const modals = modalParam.split(",");
+      const modalObj = {};
+      modals.forEach(modalName => {
+        modalObj[modalName] = true;
+      });
+
+      this.setState({
+        isOpen: {
+          ...this.state.isOpen,
+          ...modalObj,
+        }
+      });
+    }
+
+    const view = url.searchParams.get("view");
+    if (view && view !== "") {
+      this.setMapState(view);
+    }
+
+    const path = url.searchParams.get("layer");
+    if (path) {
+      try {
+        const parts = path.split("~");
+        const [hashVal, selectedLayerIndex] = [
+          parts[0],
+          parseInt(parts[1], 10),
+        ];
+
+        let invalid = false;
+        if (hashVal !== "-") {
+          const currentHashVal = hash(JSON.stringify(mapStyle));
+          if (currentHashVal !== parseInt(hashVal, 10)) {
+            invalid = true;
+          }
+        }
+        if (!invalid) {
+          this.setState({selectedLayerIndex});
+        }
+      }
+      catch (err) {
+        console.warn(err);
+      }
+    }
+  }
+
   onLayerSelect = (index) => {
-    this.setState({ selectedLayerIndex: index })
+    this.setState({ selectedLayerIndex: index }, this.setStateInUrl);
   }
 
   setModal(modalName, value) {
@@ -711,7 +795,7 @@ export default class App extends React.Component {
         ...this.state.isOpen,
         [modalName]: value
       }
-    })
+    }, this.setStateInUrl)
   }
 
   toggleModal(modalName) {