diff --git a/src/web-map.js b/src/web-map.js
index 2837a9b42..8ad2c1187 100644
--- a/src/web-map.js
+++ b/src/web-map.js
@@ -667,12 +667,14 @@ export class WebMap extends HTMLMapElement {
       false
     );
 
+    let mapEl = this;
     this.parentElement.addEventListener('keyup', function (e) {
       if (
         e.keyCode === 9 &&
-        document.activeElement.nodeName === 'MAPML-VIEWER'
+        document.activeElement.className === 'mapml-web-map'
       ) {
-        document.activeElement.dispatchEvent(
+        // document.activeElement is div.mapml-web-map, not <map>
+        mapEl.dispatchEvent(
           new CustomEvent('mapfocused', { detail: { target: this } })
         );
       }
@@ -693,8 +695,8 @@ export class WebMap extends HTMLMapElement {
       }
     });
     this.parentElement.addEventListener('mousedown', function (e) {
-      if (document.activeElement.nodeName === 'MAPML-VIEWER') {
-        document.activeElement.dispatchEvent(
+      if (document.activeElement.className === 'mapml-web-map') {
+        mapEl.dispatchEvent(
           new CustomEvent('mapfocused', { detail: { target: this } })
         );
       }
diff --git a/test/e2e/core/announceMovement.test.js b/test/e2e/core/announceMovement.test.js
index 72ec7ef47..5747dbf64 100644
--- a/test/e2e/core/announceMovement.test.js
+++ b/test/e2e/core/announceMovement.test.js
@@ -8,124 +8,161 @@ test.describe('Announce movement test', () => {
     page =
       context.pages().find((page) => page.url() === 'about:blank') ||
       (await context.newPage());
-    await page.goto('mapml-viewer.html');
   });
 
   test.afterAll(async function () {
     await context.close();
   });
 
-  test('Output values are correct during regular movement', async () => {
-    await page.keyboard.press('Tab');
-    await page.waitForTimeout(500);
-    await page.keyboard.press('ArrowUp');
-    await page.waitForTimeout(1000);
-
-    const movedUp = await page.$eval(
-      'body > mapml-viewer div > output',
-      (output) => output.innerHTML
-    );
-    expect(movedUp).toEqual('zoom level 0');
-
-    for (let i = 0; i < 2; i++) {
-      await page.keyboard.press('ArrowLeft');
-      await page.waitForTimeout(1000);
-    }
-
-    const movedLeft = await page.$eval(
-      'body > mapml-viewer div > output',
-      (output) => output.innerHTML
-    );
-    expect(movedLeft).toEqual('zoom level 0');
-
-    await page.keyboard.press('Equal');
-    await page.waitForTimeout(1000);
-
-    const zoomedIn = await page.$eval(
-      'body > mapml-viewer div > output',
-      (output) => output.innerHTML
+  let mapFiles = ['web-map.html', 'mapml-viewer.html'];
+
+  for (let file of mapFiles) {
+    test(
+      file + ': Output values are correct during regular movement',
+      async () => {
+        await page.goto(file);
+        await page.keyboard.press('Tab');
+        await page.waitForTimeout(500);
+        await page.keyboard.press('ArrowUp');
+        await page.waitForTimeout(1000);
+        const map = await page.getByTestId('testviewer');
+        const movedUp = await map.evaluate((map) => {
+          let output = map.shadowRoot
+            ? map.shadowRoot.querySelector('output')
+            : map.querySelector('div').shadowRoot.querySelector('output');
+          return output.innerHTML;
+        });
+        expect(movedUp).toEqual('zoom level 0');
+
+        for (let i = 0; i < 2; i++) {
+          await page.keyboard.press('ArrowLeft');
+          await page.waitForTimeout(1000);
+        }
+
+        const movedLeft = await map.evaluate((map) => {
+          let output = map.shadowRoot
+            ? map.shadowRoot.querySelector('output')
+            : map.querySelector('div').shadowRoot.querySelector('output');
+          return output.innerHTML;
+        });
+        expect(movedLeft).toEqual('zoom level 0');
+
+        await page.keyboard.press('Equal');
+        await page.waitForTimeout(1000);
+
+        const zoomedIn = await map.evaluate((map) => {
+          let output = map.shadowRoot
+            ? map.shadowRoot.querySelector('output')
+            : map.querySelector('div').shadowRoot.querySelector('output');
+          return output.innerHTML;
+        });
+        expect(zoomedIn).toEqual('zoom level 1');
+
+        await page.keyboard.press('Minus');
+        await page.waitForTimeout(1000);
+
+        const zoomedOut = await map.evaluate((map) => {
+          let output = map.shadowRoot
+            ? map.shadowRoot.querySelector('output')
+            : map.querySelector('div').shadowRoot.querySelector('output');
+          return output.innerHTML;
+        });
+        expect(zoomedOut).toEqual(
+          'At minimum zoom level, zoom out disabled zoom level 0'
+        );
+        // testing + button
+        await page.keyboard.press('Tab');
+        await page.keyboard.press('Enter');
+        await page.waitForTimeout(1000);
+
+        const zoomedBackIn = await map.evaluate((map) => {
+          let output = map.shadowRoot
+            ? map.shadowRoot.querySelector('output')
+            : map.querySelector('div').shadowRoot.querySelector('output');
+          return output.innerHTML;
+        });
+        expect(zoomedBackIn).toEqual('zoom level 1');
+      }
     );
-    expect(zoomedIn).toEqual('zoom level 1');
-
-    await page.keyboard.press('Minus');
-    await page.waitForTimeout(1000);
 
-    const zoomedOut = await page.$eval(
-      'body > mapml-viewer div > output',
-      (output) => output.innerHTML
-    );
-    expect(zoomedOut).toEqual(
-      'At minimum zoom level, zoom out disabled zoom level 0'
+    test(
+      file + ': Output values are correct at bounds and bounces back',
+      async () => {
+        //Zoom out to min layer bound
+        await page.keyboard.press('Shift+Tab');
+        await page.keyboard.press('Minus');
+        await page.waitForTimeout(1000);
+        const map = await page.getByTestId('testviewer');
+
+        const minZoom = await map.evaluate((map) => {
+          let output = map.shadowRoot
+            ? map.shadowRoot.querySelector('output')
+            : map.querySelector('div').shadowRoot.querySelector('output');
+          return output.innerHTML;
+        });
+        expect(minZoom).toEqual(
+          'At minimum zoom level, zoom out disabled zoom level 0'
+        );
+        await page.pause();
+
+        //Pan out of west bounds, expect the map to bounce back
+        for (let i = 0; i < 4; i++) {
+          await page.waitForTimeout(1000);
+          await page.keyboard.press('ArrowLeft');
+        }
+
+        const westBound = await page.waitForFunction(
+          () => {
+            const map = document.querySelector('mapml-viewer')
+              ? document.querySelector('mapml-viewer')
+              : document.querySelector('map');
+            let output = map.shadowRoot
+              ? map.shadowRoot.querySelector('output')
+              : map.querySelector('div').shadowRoot.querySelector('output');
+            return (
+              output.innerHTML === 'Reached west bound, panning west disabled'
+            );
+          },
+          {},
+          { timeout: 1000 }
+        );
+        expect(await westBound.jsonValue()).toEqual(true);
+
+        await page.waitForTimeout(1000);
+        const bouncedBack = await map.evaluate((map) => {
+          let output = map.shadowRoot
+            ? map.shadowRoot.querySelector('output')
+            : map.querySelector('div').shadowRoot.querySelector('output');
+          return output.innerHTML;
+        });
+        expect(bouncedBack).toEqual('zoom level 0');
+
+        //Zoom in out of bounds, expect the map to zoom back
+        await page.keyboard.press('Equal');
+
+        const zoomedOutOfBounds = await page.waitForFunction(
+          () => {
+            const map = document.querySelector('mapml-viewer')
+              ? document.querySelector('mapml-viewer')
+              : document.querySelector('map');
+            let output = map.shadowRoot
+              ? map.shadowRoot.querySelector('output')
+              : map.querySelector('div').shadowRoot.querySelector('output');
+            return output.innerHTML === 'Zoomed out of bounds, returning to';
+          },
+          { timeout: 1000 }
+        );
+        expect(await zoomedOutOfBounds.jsonValue()).toEqual(true);
+
+        await page.waitForTimeout(1000);
+        const zoomedBack = await map.evaluate((map) => {
+          let output = map.shadowRoot
+            ? map.shadowRoot.querySelector('output')
+            : map.querySelector('div').shadowRoot.querySelector('output');
+          return output.innerHTML;
+        });
+        expect(zoomedBack).toEqual('zoom level 0');
+      }
     );
-    // testing + button
-    await page.keyboard.press('Tab');
-    await page.keyboard.press('Enter');
-    await page.waitForTimeout(1000);
-
-    const zoomedBackIn = await page.$eval(
-      'body > mapml-viewer div > output',
-      (output) => output.innerHTML
-    );
-    expect(zoomedBackIn).toEqual('zoom level 1');
-  });
-
-  test('Output values are correct at bounds and bounces back', async () => {
-    //Zoom out to min layer bound
-    await page.keyboard.press('Shift+Tab');
-    await page.keyboard.press('Minus');
-    await page.waitForTimeout(1000);
-
-    const minZoom = await page.$eval(
-      'body > mapml-viewer div > output',
-      (output) => output.innerHTML
-    );
-    expect(minZoom).toEqual(
-      'At minimum zoom level, zoom out disabled zoom level 0'
-    );
-
-    //Pan out of west bounds, expect the map to bounce back
-    for (let i = 0; i < 4; i++) {
-      await page.waitForTimeout(1000);
-      await page.keyboard.press('ArrowLeft');
-    }
-
-    const westBound = await page.waitForFunction(
-      () =>
-        document
-          .querySelector('body > mapml-viewer')
-          .shadowRoot.querySelector('div > output').innerHTML ===
-        'Reached west bound, panning west disabled',
-      {},
-      { timeout: 1000 }
-    );
-    expect(await westBound.jsonValue()).toEqual(true);
-
-    await page.waitForTimeout(1000);
-    const bouncedBack = await page.$eval(
-      'body > mapml-viewer div > output',
-      (output) => output.innerHTML
-    );
-    expect(bouncedBack).toEqual('zoom level 0');
-
-    //Zoom in out of bounds, expect the map to zoom back
-    await page.keyboard.press('Equal');
-
-    const zoomedOutOfBounds = await page.waitForFunction(
-      () =>
-        document
-          .querySelector('body > mapml-viewer')
-          .shadowRoot.querySelector('div > output').innerHTML ===
-        'Zoomed out of bounds, returning to',
-      {},
-      { timeout: 1000 }
-    );
-    expect(await zoomedOutOfBounds.jsonValue()).toEqual(true);
-
-    await page.waitForTimeout(1000);
-    const zoomedBack = await page.$eval(
-      'body > mapml-viewer div > output',
-      (output) => output.innerHTML
-    );
-    expect(zoomedBack).toEqual('zoom level 0');
-  });
+  }
 });
diff --git a/test/e2e/web-map/web-map.html b/test/e2e/web-map/web-map.html
new file mode 100644
index 000000000..193946a33
--- /dev/null
+++ b/test/e2e/web-map/web-map.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Basic Mapml-Viewer</title>
+    <meta charset="UTF-8">
+    <script>
+        let options = document.createElement("map-options");
+        options.innerHTML = '{"announceMovement":true}';
+        document.head.appendChild(options);
+    </script>
+    <script type="module" src="web-map.js"></script>
+    <style>
+        html {
+            height: 100%
+        }
+
+        body {
+            height: inherit
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+
+<body>
+    <map is="web-map" data-testid="testviewer" style="height: 600px;width:500px;" projection="CBMTILE" zoom="0" lat="47"
+        lon="-92" controls>
+        <layer- data-testid="testlayer" label="CBMT - INLINE" checked>
+            <map-extent units="CBMTILE" checked hidden>
+                <map-input name="zoomLevel" type="zoom" value="3" min="0" max="3"></map-input>
+                <map-input name="row" type="location" axis="row" units="tilematrix" min="14" max="21"></map-input>
+                <map-input name="col" type="location" axis="column" units="tilematrix" min="14" max="19"></map-input>
+                <map-link rel='tile' tref='/data/cbmt/{zoomLevel}/c{col}_r{row}.png'></map-link>
+            </map-extent>
+        </layer->
+    </mapml-viewer>
+    <textarea id="coord" name="message" rows="10" cols="100"></textarea>
+    <textarea id="copyGeoJSON" name="message" rows="10"
+        cols="100">{"type": "FeatureCollection","features": [{"type": "Feature","properties": {},"geometry": {"coordinates": [29.93926429273742,26.465501185936787],"type": "Point"}}]}</textarea>
+    <textarea id="invalidLink" name="message" rows="10" cols="100">http://google.com</textarea>
+    <textarea id="invalidText" name="message" rows="10" cols="100">asdasdasdadsasd</textarea>
+    <textarea id="copyLink" name="message" rows="10" cols="100">http://localhost:30001/data/query/DouglasFir</textarea>
+</body>
+
+</html>
\ No newline at end of file