diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx
index c2c25c1..3dbcab5 100644
--- a/src/components/Toolbar.jsx
+++ b/src/components/Toolbar.jsx
@@ -185,18 +185,21 @@ export default class Toolbar extends React.Component {
         >
           {/* Keyboard accessible quick links */}
           <button
+            data-wd-key="root:skip:layer-list"
             className="maputnik-toolbar-skip"
             onClick={e => this.onSkip("layer-list")}
           >
             Layers list
           </button>
           <button
+            data-wd-key="root:skip:layer-editor"
             className="maputnik-toolbar-skip"
             onClick={e => this.onSkip("layer-editor")}
           >
             Layer editor
           </button>
           <button
+            data-wd-key="root:skip:map-view"
             className="maputnik-toolbar-skip"
             onClick={e => this.onSkip("map")}
           >
diff --git a/src/components/modals/DebugModal.js b/src/components/modals/DebugModal.js
index 181983f..4ebcd91 100644
--- a/src/components/modals/DebugModal.js
+++ b/src/components/modals/DebugModal.js
@@ -24,7 +24,7 @@ class DebugModal extends React.Component {
     const osmLat = Number.parseFloat(mapView.center.lat).toFixed(5);
 
     return <Modal
-      data-wd-key="debug-modal"
+      data-wd-key="modal:debug"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Debug'}
diff --git a/src/components/modals/ExportModal.jsx b/src/components/modals/ExportModal.jsx
index cea856d..d72a7c5 100644
--- a/src/components/modals/ExportModal.jsx
+++ b/src/components/modals/ExportModal.jsx
@@ -61,7 +61,7 @@ class ExportModal extends React.Component {
 
   render() {
     return <Modal
-      data-wd-key="export-modal"
+      data-wd-key="modal:export"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Export Style'}
diff --git a/src/components/modals/LoadingModal.jsx b/src/components/modals/LoadingModal.jsx
index f4ef6bb..fad8dd9 100644
--- a/src/components/modals/LoadingModal.jsx
+++ b/src/components/modals/LoadingModal.jsx
@@ -20,7 +20,7 @@ class LoadingModal extends React.Component {
 
   render() {
     return <Modal
-      data-wd-key="loading-modal"
+      data-wd-key="modal:loading"
       isOpen={this.props.isOpen}
       underlayClickExits={false}
       underlayProps={{
diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx
index c0b0f20..0e90cf2 100644
--- a/src/components/modals/OpenModal.jsx
+++ b/src/components/modals/OpenModal.jsx
@@ -191,7 +191,7 @@ class OpenModal extends React.Component {
     return  (
       <div>
         <Modal
-          data-wd-key="open-modal"
+          data-wd-key="modal:open"
           isOpen={this.props.isOpen}
           onOpenToggle={() => this.onOpenToggle()}
           title={'Open Style'}
@@ -212,7 +212,7 @@ class OpenModal extends React.Component {
             </p>
             <form onSubmit={this.onSubmitUrl}>
               <UrlInput
-                data-wd-key="open-modal.url.input"
+                data-wd-key="modal:open.url.input"
                 type="text"
                 className="maputnik-input"
                 default="Enter URL..."
@@ -222,7 +222,7 @@ class OpenModal extends React.Component {
               />
               <div>
                 <Button
-                  data-wd-key="open-modal.url.button"
+                  data-wd-key="modal:open.url.button"
                   type="submit"
                   className="maputnik-big-button"
                   disabled={this.state.styleUrl.length < 1}
diff --git a/src/components/modals/SettingsModal.jsx b/src/components/modals/SettingsModal.jsx
index 978fe0d..cf278fe 100644
--- a/src/components/modals/SettingsModal.jsx
+++ b/src/components/modals/SettingsModal.jsx
@@ -81,29 +81,29 @@ class SettingsModal extends React.Component {
     const transition = this.props.mapStyle.transition || {};
 
     return <Modal
-      data-wd-key="modal-settings"
+      data-wd-key="modal:settings"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Style Settings'}
     >
-      <div className="modal-settings">
+      <div className="modal:settings">
       <InputBlock label={"Name"} fieldSpec={latest.$root.name}>
         <StringInput {...inputProps}
-          data-wd-key="modal-settings.name" 
+          data-wd-key="modal:settings.name" 
           value={this.props.mapStyle.name}
           onChange={this.changeStyleProperty.bind(this, "name")}
         />
       </InputBlock>
       <InputBlock label={"Owner"} fieldSpec={{doc: "Owner ID of the style. Used by Mapbox or future style APIs."}}>
         <StringInput {...inputProps}
-          data-wd-key="modal-settings.owner" 
+          data-wd-key="modal:settings.owner" 
           value={this.props.mapStyle.owner}
           onChange={this.changeStyleProperty.bind(this, "owner")}
         />
       </InputBlock>
       <InputBlock label={"Sprite URL"} fieldSpec={latest.$root.sprite}>
         <UrlInput {...inputProps}
-          data-wd-key="modal-settings.sprite" 
+          data-wd-key="modal:settings.sprite" 
           value={this.props.mapStyle.sprite}
           onChange={this.changeStyleProperty.bind(this, "sprite")}
         />
@@ -111,7 +111,7 @@ class SettingsModal extends React.Component {
 
       <InputBlock label={"Glyphs URL"} fieldSpec={latest.$root.glyphs}>
         <UrlInput {...inputProps}
-          data-wd-key="modal-settings.glyphs" 
+          data-wd-key="modal:settings.glyphs" 
           value={this.props.mapStyle.glyphs}
           onChange={this.changeStyleProperty.bind(this, "glyphs")}
         />
@@ -122,7 +122,7 @@ class SettingsModal extends React.Component {
         fieldSpec={fieldSpecAdditional.maputnik.mapbox_access_token}
       >
         <StringInput {...inputProps}
-          data-wd-key="modal-settings.maputnik:mapbox_access_token" 
+          data-wd-key="modal:settings.maputnik:mapbox_access_token" 
           value={metadata['maputnik:mapbox_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:mapbox_access_token")}
         />
@@ -133,7 +133,7 @@ class SettingsModal extends React.Component {
         fieldSpec={fieldSpecAdditional.maputnik.maptiler_access_token}
       >
         <StringInput {...inputProps}
-          data-wd-key="modal-settings.maputnik:openmaptiles_access_token" 
+          data-wd-key="modal:settings.maputnik:openmaptiles_access_token" 
           value={metadata['maputnik:openmaptiles_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:openmaptiles_access_token")}
         />
@@ -144,7 +144,7 @@ class SettingsModal extends React.Component {
         fieldSpec={fieldSpecAdditional.maputnik.thunderforest_access_token}
       >
         <StringInput {...inputProps}
-          data-wd-key="modal-settings.maputnik:thunderforest_access_token" 
+          data-wd-key="modal:settings.maputnik:thunderforest_access_token" 
           value={metadata['maputnik:thunderforest_access_token']}
           onChange={onChangeMetadataProperty.bind(this, "maputnik:thunderforest_access_token")}
         />
@@ -250,7 +250,7 @@ class SettingsModal extends React.Component {
         fieldSpec={fieldSpecAdditional.maputnik.style_renderer}
       >
         <SelectInput {...inputProps}
-          data-wd-key="modal-settings.maputnik:renderer" 
+          data-wd-key="modal:settings.maputnik:renderer" 
           options={[
             ['mbgljs', 'MapboxGL JS'],
             ['ol', 'Open Layers (experimental)'],
diff --git a/src/components/modals/ShortcutsModal.jsx b/src/components/modals/ShortcutsModal.jsx
index 569a2b2..fd59e90 100644
--- a/src/components/modals/ShortcutsModal.jsx
+++ b/src/components/modals/ShortcutsModal.jsx
@@ -100,7 +100,7 @@ class ShortcutsModal extends React.Component {
 
 
     return <Modal
-      data-wd-key="shortcuts-modal"
+      data-wd-key="modal:shortcuts"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Shortcuts'}
diff --git a/src/components/modals/SourcesModal.jsx b/src/components/modals/SourcesModal.jsx
index 25e5bf1..cb55975 100644
--- a/src/components/modals/SourcesModal.jsx
+++ b/src/components/modals/SourcesModal.jsx
@@ -286,6 +286,7 @@ class SourcesModal extends React.Component {
 
     const inputProps = { }
     return <Modal
+      data-wd-key="modal:sources"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title={'Sources'}
diff --git a/src/components/modals/SurveyModal.jsx b/src/components/modals/SurveyModal.jsx
index be777ed..8b6e132 100644
--- a/src/components/modals/SurveyModal.jsx
+++ b/src/components/modals/SurveyModal.jsx
@@ -20,7 +20,7 @@ class SurveyModal extends React.Component {
 
   render() {
     return <Modal
-      data-wd-key="modal-survey"
+      data-wd-key="modal:survey"
       isOpen={this.props.isOpen}
       onOpenToggle={this.props.onOpenToggle}
       title="Maputnik Survey"
diff --git a/test/example-layer-style.json b/test/example-layer-style.json
new file mode 100644
index 0000000..7a065a1
--- /dev/null
+++ b/test/example-layer-style.json
@@ -0,0 +1,18 @@
+{
+  "id": "test-style",
+  "version": 8,
+  "name": "Test Style",
+  "metadata": {
+    "maputnik:renderer": "mbgljs"
+  },
+  "sources": {},
+  "glyphs": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "sprites": "https://example.local/fonts/{fontstack}/{range}.pbf",
+  "layers": [
+    {
+      "id": "background",
+      "type": "background"
+    }
+  ]
+}
+
diff --git a/test/functional/accessibility/index.js b/test/functional/accessibility/index.js
new file mode 100644
index 0000000..8fb87e6
--- /dev/null
+++ b/test/functional/accessibility/index.js
@@ -0,0 +1,3 @@
+describe("accessibility", function () {
+  require("./skip-links");
+})
diff --git a/test/functional/accessibility/skip-links.js b/test/functional/accessibility/skip-links.js
new file mode 100644
index 0000000..f258f58
--- /dev/null
+++ b/test/functional/accessibility/skip-links.js
@@ -0,0 +1,51 @@
+var assert = require("assert");
+var config = require("../../config/specs");
+var helper = require("../helper");
+var wd     = require("../../wd-helper");
+
+
+describe("skip links", function() {
+  beforeEach(function () {
+    browser.url(config.baseUrl+"?debug&style="+helper.getGeoServerUrl("example-layer-style.json"));
+    browser.acceptAlert();
+  });
+
+  it("skip link to layer list", function() {
+    const selector = wd.$("root:skip:layer-list")
+    const elem = $(selector);
+    assert(elem.isExisting());
+    browser.keys(['Tab']);
+    assert(elem.isFocused());
+    elem.click();
+
+    const targetEl = $("#skip-target-layer-list");
+    assert(targetEl.isFocused());
+  });
+
+  it("skip link to layer editor", function() {
+    const selector = wd.$("root:skip:layer-editor")
+    const elem = $(selector);
+    assert(elem.isExisting());
+    browser.keys(['Tab']);
+    browser.keys(['Tab']);
+    assert(elem.isFocused());
+    elem.click();
+
+    const targetEl = $("#skip-target-layer-editor");
+    assert(targetEl.isFocused());
+  });
+
+  it("skip link to map view", function() {
+    const selector = wd.$("root:skip:map-view")
+    const elem = $(selector);
+    assert(elem.isExisting());
+    browser.keys(['Tab']);
+    browser.keys(['Tab']);
+    browser.keys(['Tab']);
+    assert(elem.isFocused());
+    elem.click();
+
+    const targetEl = $(".mapboxgl-canvas");
+    assert(targetEl.isFocused());
+  });
+});
diff --git a/test/functional/history/index.js b/test/functional/history/index.js
index 11cf8af..eef193d 100644
--- a/test/functional/history/index.js
+++ b/test/functional/history/index.js
@@ -3,17 +3,33 @@ var config = require("../../config/specs");
 var helper = require("../helper");
 
 
-describe.skip("history", function() {
+
+describe("history", function() {
+  let undoKeyCombo;
+  let undoKeyComboReset;
+  let redoKeyCombo;
+  let redoKeyComboReset;
+
+  before(function() {
+    const isMac = browser.execute(function() {
+      return navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+    });
+    undoKeyCombo = ['Meta', 'z'];
+    undoKeyComboReset = ['Meta'];
+    redoKeyCombo = isMac ? ['Meta', 'Shift', 'z'] : ['Meta', 'y'];
+    redoKeyComboReset = isMac ? ['Meta', 'Shift'] : ['Meta'];
+  });
+
   /**
    * See <https://github.com/webdriverio/webdriverio/issues/1126>
    */
-  it("undo/redo", function() {
+  it.skip("undo/redo", function() {
     var styleObj;
 
     browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
       "geojson:example"
     ]));
-    browser.alertAccept();
+    browser.acceptAlert();
 
     helper.modal.addLayer.open();
 
@@ -51,9 +67,8 @@ describe.skip("history", function() {
       }
     ]);
 
-    browser
-      .keys(['Control', 'z'])
-      .keys(['Control']);
+    browser.keys(undoKeyCombo)
+    browser.keys(undoKeyComboReset);
     styleObj = helper.getStyleStore(browser);
     assert.deepEqual(styleObj.layers, [
       {
@@ -62,16 +77,14 @@ describe.skip("history", function() {
       }
     ]);
 
-    browser
-      .keys(['Control', 'z'])
-      .keys(['Control']);
+    browser.keys(undoKeyCombo)
+    browser.keys(undoKeyComboReset);
     styleObj = helper.getStyleStore(browser);
     assert.deepEqual(styleObj.layers, [
     ]);
 
-    browser
-      .keys(['Control', 'y'])
-      .keys(['Control']);
+    browser.keys(redoKeyCombo)
+    browser.keys(redoKeyComboReset);
     styleObj = helper.getStyleStore(browser);
     assert.deepEqual(styleObj.layers, [
       {
@@ -80,9 +93,8 @@ describe.skip("history", function() {
       }
     ]);
 
-    browser
-      .keys(['Control', 'y'])
-      .keys(['Control']);
+    browser.keys(redoKeyCombo)
+    browser.keys(redoKeyComboReset);
     styleObj = helper.getStyleStore(browser);
     assert.deepEqual(styleObj.layers, [
       {
diff --git a/test/functional/index.js b/test/functional/index.js
index d8067c4..4f76e66 100644
--- a/test/functional/index.js
+++ b/test/functional/index.js
@@ -37,6 +37,8 @@ describe('maputnik', function() {
   require("./map");
   require("./modals");
   require("./screenshots");
+  require("./accessibility");
+  require("./keyboard");
   // ------------------------
 
 });
diff --git a/test/functional/keyboard/index.js b/test/functional/keyboard/index.js
new file mode 100644
index 0000000..bc62051
--- /dev/null
+++ b/test/functional/keyboard/index.js
@@ -0,0 +1,58 @@
+var assert = require("assert");
+var config = require("../../config/specs");
+var helper = require("../helper");
+var wd     = require("../../wd-helper");
+
+
+describe("keyboard", function() {
+  describe("shortcuts", function() {
+    it("ESC should unfocus", function() {
+      const tmpTargetEl = $(wd.$("nav:inspect") + " select");
+      tmpTargetEl.click();
+      assert(tmpTargetEl.isFocused());
+
+      browser.keys(["Escape"]);
+      assert($("body").isFocused());
+    });
+
+    it("'?' should show shortcuts modal", function() {
+      browser.keys(["?"]);
+      assert($(wd.$("modal:shortcuts")).isDisplayed());
+    });
+
+    it("'o' should show open modal", function() {
+      browser.keys(["o"]);
+      assert($(wd.$("modal:open")).isDisplayed());
+    });
+
+    it("'e' should show export modal", function() {
+      browser.keys(["e"]);
+      assert($(wd.$("modal:export")).isDisplayed());
+    });
+
+    it("'d' should show sources modal", function() {
+      browser.keys(["d"]);
+      assert($(wd.$("modal:sources")).isDisplayed());
+    });
+
+    it("'s' should show settings modal", function() {
+      browser.keys(["s"]);
+      assert($(wd.$("modal:settings")).isDisplayed());
+    });
+
+    it.skip("'i' should change map to inspect mode", function() {
+      // browser.keys(["i"]);
+    });
+
+    it("'m' should focus map", function() {
+      browser.keys(["m"]);
+      $(".mapboxgl-canvas").isFocused();
+    });
+
+    it("'!' should show debug modal", function() {
+      browser.keys(["!"]);
+      assert($(wd.$("modal:debug")).isDisplayed());
+    });
+  });
+
+});
diff --git a/test/functional/layers/index.js b/test/functional/layers/index.js
index 1186e41..3cce5f2 100644
--- a/test/functional/layers/index.js
+++ b/test/functional/layers/index.js
@@ -115,12 +115,6 @@ describe("layers", function() {
     })
   })
 
-  describe("grouped", function() {
-    it("with underscore")
-    it("no without underscore")
-    it("double underscore only grouped once")
-  })
-
   describe("tooltips", function() {
   })
 
@@ -130,20 +124,18 @@ describe("layers", function() {
 
   describe('background', function () {
 
-    it.skip("add", function() {
+    it("add", function() {
       var id = helper.modal.addLayer.fill({
         type: "background"
       })
 
-      browser.waitUntil(function() {
-        var styleObj = helper.getStyleStore(browser);
-        assert.deepEqual(styleObj.layers, [
-          {
-            "id": id,
-            "type": 'background'
-          }
-        ]);
-      });
+      var styleObj = helper.getStyleStore(browser);
+      assert.deepEqual(styleObj.layers, [
+        {
+          "id": id,
+          "type": 'background'
+        }
+      ]);
     });
 
     describe("modify", function() {
@@ -192,9 +184,6 @@ describe("layers", function() {
           ]);
         });
 
-        // NOTE: This needs to be removed from the code
-        it("type");
-
         it("min-zoom", function() {
           var bgId = createBackground();
 
@@ -340,7 +329,7 @@ describe("layers", function() {
   });
 
   describe('fill', function () {
-    it.skip("add", function() {
+    it("add", function() {
       // browser.debug();
 
       var id = helper.modal.addLayer.fill({
@@ -363,7 +352,7 @@ describe("layers", function() {
   });
 
   describe('line', function () {
-    it.skip("add", function() {
+    it("add", function() {
       var id = helper.modal.addLayer.fill({
         type: "line",
         layer: "example"
@@ -386,7 +375,7 @@ describe("layers", function() {
   });
 
   describe('symbol', function () {
-    it.skip("add", function() {
+    it("add", function() {
       var id = helper.modal.addLayer.fill({
         type: "symbol",
         layer: "example"
@@ -404,7 +393,7 @@ describe("layers", function() {
   });
 
   describe('raster', function () {
-    it.skip("add", function() {
+    it("add", function() {
       var id = helper.modal.addLayer.fill({
         type: "raster",
         layer: "raster"
@@ -422,7 +411,7 @@ describe("layers", function() {
   });
 
   describe('circle', function () {
-    it.skip("add", function() {
+    it("add", function() {
       var id = helper.modal.addLayer.fill({
         type: "circle",
         layer: "example"
@@ -441,7 +430,7 @@ describe("layers", function() {
   });
 
   describe('fill extrusion', function () {
-    it.skip("add", function() {
+    it("add", function() {
       var id = helper.modal.addLayer.fill({
         type: "fill-extrusion",
         layer: "example"
@@ -459,12 +448,12 @@ describe("layers", function() {
   });
 
 
-  describe.skip("groups", function() {
+  describe("groups", function() {
     it("simple", function() {
-      browser.url(config.baseUrl+"?debug&style="+getStyleUrl([
+      browser.url(config.baseUrl+"?debug&style="+helper.getStyleUrl([
         "geojson:example"
       ]));
-      browser.alertAccept();
+      browser.acceptAlert();
 
       helper.modal.addLayer.open();
       var aId = helper.modal.addLayer.fill({
@@ -480,21 +469,22 @@ describe("layers", function() {
 
       helper.modal.addLayer.open();
       var bId = helper.modal.addLayer.fill({
-        id: "foo_baz",
+        id: "foo_bar_baz",
         type: "background"
       })
 
-      browser.waitForExist(wd.$("layer-list-group:foo-0"));
+      const groupEl = $(wd.$("layer-list-group:foo-0"));
+      groupEl.isDisplayed();
 
-      assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo")), false);
-      assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_bar")), false);
-      assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_baz")), false);
+      assert.equal($(wd.$("layer-list-item:foo")).isDisplayedInViewport(), true);
+      assert.equal($(wd.$("layer-list-item:foo_bar")).isDisplayedInViewport(), false);
+      assert.equal($(wd.$("layer-list-item:foo_bar_baz")).isDisplayedInViewport(), false);
 
-      browser.click(wd.$("layer-list-group:foo-0"));
+      groupEl.click();
 
-      assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo")), true);
-      assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_bar")), true);
-      assert.equal(browser.isVisibleWithinViewport(wd.$("layer-list-item:foo_baz")), true);
+      assert.equal($(wd.$("layer-list-item:foo")).isDisplayedInViewport(), true);
+      assert.equal($(wd.$("layer-list-item:foo_bar")).isDisplayedInViewport(), true);
+      assert.equal($(wd.$("layer-list-item:foo_bar_baz")).isDisplayedInViewport(), true);
     })
   })
 });
diff --git a/test/functional/modals/index.js b/test/functional/modals/index.js
index fd94558..d84bfeb 100644
--- a/test/functional/modals/index.js
+++ b/test/functional/modals/index.js
@@ -41,7 +41,7 @@ describe("modals", function() {
     });
 
     it("close", function() {
-      closeModal("open-modal");
+      closeModal("modal:open");
     });
 
     // "chooseFile" command currently not available for wdio v5 https://github.com/webdriverio/webdriverio/pull/3632
@@ -57,9 +57,9 @@ describe("modals", function() {
     it("load from url", function() {
       var styleFileUrl  = helper.getGeoServerUrl("example-style.json");
 
-      browser.setValueSafe(wd.$("open-modal.url.input"), styleFileUrl);
+      browser.setValueSafe(wd.$("modal:open.url.input"), styleFileUrl);
 
-      const selector = $(wd.$("open-modal.url.button"));
+      const selector = $(wd.$("modal:open.url.button"));
       selector.click();
 
       // Allow the network request to happen
@@ -74,6 +74,24 @@ describe("modals", function() {
     it("gallery")
   })
 
+  describe("shortcuts", function() {
+    it("open/close", function() {
+      browser.url(config.baseUrl+"?debug");
+
+      const elem = $(".maputnik-toolbar-link");
+      elem.waitForExist();
+      browser.flushReactUpdates();
+
+      browser.keys(["?"]);
+
+      const modalEl = $(wd.$("modal:shortcuts"))
+      assert(modalEl.isDisplayed());
+
+      closeModal("modal:shortcuts");
+    });
+
+  });
+
   describe("export", function() {
 
     beforeEach(function() {
@@ -89,14 +107,12 @@ describe("modals", function() {
     });
 
     it("close", function() {
-      closeModal("export-modal");
+      closeModal("modal:export");
     });
 
     // TODO: Work out how to download a file and check the contents
     it("download")
 
-    // TODO: Work out how to mock the end git points
-    it("save to gist")
   })
 
   describe("sources", function() {
@@ -131,8 +147,8 @@ describe("modals", function() {
     });
 
     it("name", function() {
-      browser.setValueSafe(wd.$("modal-settings.name"), "foobar")
-      const elem = $(wd.$("modal-settings.owner"));
+      browser.setValueSafe(wd.$("modal:settings.name"), "foobar")
+      const elem = $(wd.$("modal:settings.owner"));
       elem.click();
       browser.flushReactUpdates();
 
@@ -140,8 +156,8 @@ describe("modals", function() {
       assert.equal(styleObj.name, "foobar");
     })
     it("owner", function() {
-      browser.setValueSafe(wd.$("modal-settings.owner"), "foobar")
-      const elem = $(wd.$("modal-settings.name"));
+      browser.setValueSafe(wd.$("modal:settings.owner"), "foobar")
+      const elem = $(wd.$("modal:settings.name"));
       elem.click();
       browser.flushReactUpdates();
 
@@ -149,8 +165,8 @@ describe("modals", function() {
       assert.equal(styleObj.owner, "foobar");
     })
     it("sprite url", function() {
-      browser.setValueSafe(wd.$("modal-settings.sprite"), "http://example.com")
-      const elem = $(wd.$("modal-settings.name"));
+      browser.setValueSafe(wd.$("modal:settings.sprite"), "http://example.com")
+      const elem = $(wd.$("modal:settings.name"));
       elem.click();
       browser.flushReactUpdates();
 
@@ -159,8 +175,8 @@ describe("modals", function() {
     })
     it("glyphs url", function() {
       var glyphsUrl = "http://example.com/{fontstack}/{range}.pbf"
-      browser.setValueSafe(wd.$("modal-settings.glyphs"), glyphsUrl)
-      const elem = $(wd.$("modal-settings.name"));
+      browser.setValueSafe(wd.$("modal:settings.glyphs"), glyphsUrl)
+      const elem = $(wd.$("modal:settings.name"));
       elem.click();
       browser.flushReactUpdates();
 
@@ -170,8 +186,8 @@ describe("modals", function() {
 
     it("mapbox access token", function() {
       var apiKey = "testing123";
-      browser.setValueSafe(wd.$("modal-settings.maputnik:mapbox_access_token"), apiKey);
-      const elem = $(wd.$("modal-settings.name"));
+      browser.setValueSafe(wd.$("modal:settings.maputnik:mapbox_access_token"), apiKey);
+      const elem = $(wd.$("modal:settings.name"));
       elem.click();
       browser.flushReactUpdates();
 
@@ -183,8 +199,8 @@ describe("modals", function() {
 
     it("maptiler access token", function() {
       var apiKey = "testing123";
-      browser.setValueSafe(wd.$("modal-settings.maputnik:openmaptiles_access_token"), apiKey);
-      const elem = $(wd.$("modal-settings.name"));
+      browser.setValueSafe(wd.$("modal:settings.maputnik:openmaptiles_access_token"), apiKey);
+      const elem = $(wd.$("modal:settings.name"));
       elem.click();
       browser.flushReactUpdates();
 
@@ -194,8 +210,8 @@ describe("modals", function() {
 
     it("thunderforest access token", function() {
       var apiKey = "testing123";
-      browser.setValueSafe(wd.$("modal-settings.maputnik:thunderforest_access_token"), apiKey);
-      const elem = $(wd.$("modal-settings.name"));
+      browser.setValueSafe(wd.$("modal:settings.maputnik:thunderforest_access_token"), apiKey);
+      const elem = $(wd.$("modal:settings.name"));
       elem.click();
       browser.flushReactUpdates();
 
@@ -204,9 +220,9 @@ describe("modals", function() {
     })
 
     it("style renderer", function() {
-      const selector = $(wd.$("modal-settings.maputnik:renderer"));
+      const selector = $(wd.$("modal:settings.maputnik:renderer"));
       selector.selectByAttribute('value', "ol");
-      const elem = $(wd.$("modal-settings.name"));
+      const elem = $(wd.$("modal:settings.name"));
       elem.click();
       browser.flushReactUpdates();
 
diff --git a/test/geojson-server.js b/test/geojson-server.js
index 457eb92..6c8faec 100644
--- a/test/geojson-server.js
+++ b/test/geojson-server.js
@@ -78,6 +78,14 @@ app.get("/styles/empty/:sources", function(req, res) {
   res.send(json);
 })
 
+app.get("/example-layer-style.json", function(req, res) {
+  res.json(
+    JSON.parse(
+      fs.readFileSync(__dirname+"/example-layer-style.json").toString()
+    )
+  );
+})
+
 app.get("/example-style.json", function(req, res) {
   res.json(
     JSON.parse(