diff --git a/fixtures/watcher/check.html b/fixtures/watcher/check.html
new file mode 100644
index 0000000..6316d14
--- /dev/null
+++ b/fixtures/watcher/check.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Checkbox Change Page State</title>
+  </head>
+  <body>
+    <label for="checkbox"> Check me to change page state </label>
+
+    <input
+      data-testid="checkbox"
+      type="checkbox"
+      id="checkbox"
+      placeholder="checkbox placeholder"
+    />
+
+    <div id="content">
+      <p>This content changes when the checkbox is checked.</p>
+    </div>
+
+    <script>
+      const checkbox = document.getElementById('checkbox')
+      const content = document.getElementById('content')
+
+      checkbox.addEventListener('change', () => {
+        if (checkbox.checked) {
+          content.innerHTML = '<p>The checkbox is checked!</p>'
+        } else {
+          content.innerHTML =
+            '<p>This content changes when the checkbox is checked.</p>'
+        }
+      })
+    </script>
+  </body>
+</html>
diff --git a/fixtures/watcher/delayed-mounting.html b/fixtures/watcher/delayed-mounting.html
new file mode 100644
index 0000000..6c9a3cc
--- /dev/null
+++ b/fixtures/watcher/delayed-mounting.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Interactive Test Fixture</title>
+  </head>
+  <body>
+    <h1>Delayed Mounting Fixture</h1>
+    <section id="headers"></section>
+
+    <script>
+      const headersSection = document.getElementById('headers')
+      const addHeader = (number, text) => {
+        const header = document.createElement('h6')
+        header.id = `h6-${number}`
+        header.textContent = text
+        headersSection.appendChild(header)
+      }
+      setTimeout(() => {
+        addHeader(1, 'First')
+      }, 500)
+      setTimeout(() => {
+        addHeader(2, 'Second')
+      }, 100)
+      setTimeout(() => {
+        addHeader(3, 'Third')
+      }, 300)
+    </script>
+  </body>
+</html>
diff --git a/fixtures/watcher/dnd.html b/fixtures/watcher/dnd.html
new file mode 100644
index 0000000..c77e34b
--- /dev/null
+++ b/fixtures/watcher/dnd.html
@@ -0,0 +1,89 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Drag and Drop Test</title>
+    <style>
+      .back-link {
+        display: block;
+        margin-bottom: 10px;
+        color: blue;
+        cursor: pointer;
+      }
+
+      .drag-and-drop {
+        display: flex;
+        gap: 20px;
+      }
+
+      .small-box {
+        width: 100px;
+        height: 100px;
+        background-color: red;
+        cursor: grab;
+      }
+
+      .small-box.dragging {
+        opacity: 0.5;
+      }
+
+      .large-box {
+        width: 300px;
+        height: 300px;
+        border: 2px solid #000;
+        background-color: lightgray;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+      }
+
+      .large-box.inside {
+        background-color: lightgreen;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="drag-and-drop">
+      <div class="small-box" id="small-box" draggable="true">Drag me!</div>
+      <div class="large-box" id="large-box">Drag the small box here.</div>
+    </div>
+
+    <script>
+      const smallBox = document.getElementById('small-box')
+      const largeBox = document.getElementById('large-box')
+
+      smallBox.addEventListener('dragstart', event => {
+        event.dataTransfer.setData('text/plain', event.target.id)
+        smallBox.classList.add('dragging')
+      })
+
+      smallBox.addEventListener('dragend', () => {
+        smallBox.classList.remove('dragging')
+      })
+
+      largeBox.addEventListener('dragenter', event => {
+        event.preventDefault()
+        largeBox.classList.add('inside')
+      })
+
+      largeBox.addEventListener('dragleave', () => {
+        largeBox.classList.remove('inside')
+      })
+
+      largeBox.addEventListener('dragover', event => {
+        event.preventDefault()
+      })
+
+      largeBox.addEventListener('drop', event => {
+        event.preventDefault()
+        const data = event.dataTransfer.getData('text/plain')
+        if (data === 'small-box') {
+          largeBox.textContent = 'Success!'
+        }
+        smallBox.classList.remove('dragging')
+        largeBox.classList.add('inside')
+      })
+    </script>
+  </body>
+</html>
diff --git a/fixtures/watcher/form.html b/fixtures/watcher/form.html
new file mode 100644
index 0000000..16f5988
--- /dev/null
+++ b/fixtures/watcher/form.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Interactive Test Fixture</title>
+    <style>
+      .scrollable-div {
+        height: 50px;
+        overflow: auto;
+        border: 1px solid #000;
+        padding: 10px;
+      }
+
+      .hover-button {
+        background-color: lightgray; /* Initial background color */
+        padding: 5px 10px; /* Button padding */
+      }
+
+      .hover-button:hover {
+        background-color: gray; /* Background color on hover */
+      }
+    </style>
+  </head>
+  <body>
+    <form>
+      <label for="input">Enter text:</label>
+      <input
+        data-testid="input"
+        id="input"
+        type="text"
+        placeholder="Enter text here"
+      />
+
+      <label for="select">Select Option:</label>
+
+      <select data-testid="select" id="select">
+        <option value="option-1">Option 1</option>
+        <option value="option-2">Option 2</option>
+        <option value="option-3">Option 3</option>
+      </select>
+
+      <label for="file-input">File:</label>
+      <input
+        data-testid="file-input"
+        id="file-input"
+        type="file"
+        placeholder="file input placeholder"
+      />
+
+      <p id="select-value"></p>
+
+      <p id="input-value"></p>
+
+      <button>Submit Form</button>
+    </form>
+
+    <script>
+      const input = document.querySelector('#input')
+      const inputValue = document.querySelector('#input-value')
+
+      const select = document.querySelector('#select')
+      const selectValue = document.querySelector('#select-value')
+
+      input.addEventListener('input', e => {
+        inputValue.textContent = e.target?.value
+      })
+
+      input.removeEventListener('input', () => {
+        inputValue.textContent = ''
+      })
+
+      input.addEventListener('click', e => {
+        inputValue.textContent = 'Input was clicked'
+      })
+
+      input.removeEventListener('click', e => {
+        inputValue.textContent = ''
+      })
+
+      select.addEventListener('change', e => {
+        selectValue.textContent = e.target?.value
+      })
+
+      select.removeEventListener('change', () => {
+        selectValue.textContent = ''
+      })
+    </script>
+  </body>
+</html>
diff --git a/fixtures/watcher/frame.html b/fixtures/watcher/frame.html
new file mode 100644
index 0000000..e632f50
--- /dev/null
+++ b/fixtures/watcher/frame.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>FrameBox</title>
+  </head>
+  <body>
+    <iframe id="frame" name="frame-name"></iframe>
+    <iframe id="second-frame" name="second-frame-name"></iframe>
+
+    <button id="outer-button">Outer Button</button>
+
+    <script>
+      const frameContent = `
+        <!DOCTYPE html>
+        <html lang="en">
+          <head>
+            <title>FrameBox Content</title>
+          </head>
+          <body>
+            <button id='frame-button'>Frame Button</button>
+          </body>
+        </html>
+      `
+
+      document.querySelector('#frame').srcdoc = frameContent
+      document.querySelector('#second-frame').srcdoc = frameContent
+    </script>
+  </body>
+</html>
diff --git a/fixtures/watcher/hover.html b/fixtures/watcher/hover.html
new file mode 100644
index 0000000..0bdcb2e
--- /dev/null
+++ b/fixtures/watcher/hover.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <style>
+      /* Style for the button */
+      #hover-button {
+        padding: 10px 20px;
+        background-color: #007bff;
+        color: #fff;
+        border: none;
+        cursor: pointer;
+        font-size: 16px;
+        transition: background-color 0.3s ease;
+      }
+      /* Hover effect */
+      #hover-button:hover {
+        background-color: #0056b3;
+      }
+    </style>
+    <title>Hover Text Fixture</title>
+  </head>
+  <body>
+    <label for="hover-button">Hover label</label>
+    <button data-testid="hover-button" id="hover-button">Hover over me</button>
+
+    <img id="hover-image" alt="hover-alt" src="" />
+
+    <input id="hover-input" placeholder="Hover over me placeholder" />
+
+    <div id="content">
+      <p>This content changes when you hover over the button.</p>
+    </div>
+
+    <script>
+      const button = document.querySelector('#hover-button')
+      const img = document.querySelector('#hover-image')
+      const input = document.querySelector('#hover-input')
+
+      const content = document.getElementById('content')
+
+      function showText() {
+        content.innerHTML = '<p>Hover effect triggered!</p>'
+      }
+
+      function hideText() {
+        content.innerHTML =
+          '<p>This content changes when you hover over the button.</p>'
+      }
+
+      button.addEventListener('mouseenter', showText)
+      button.addEventListener('mouseleave', hideText)
+
+      img.addEventListener('mouseenter', showText)
+      img.addEventListener('mouseleave', hideText)
+
+      input.addEventListener('mouseenter', showText)
+      input.addEventListener('mouseleave', hideText)
+    </script>
+  </body>
+</html>
diff --git a/fixtures/watcher/include-exclude.html b/fixtures/watcher/include-exclude.html
new file mode 100644
index 0000000..8c183a6
--- /dev/null
+++ b/fixtures/watcher/include-exclude.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Include/Exclude Fixture</title>
+  </head>
+  <body>
+    <div class="include">
+      include me
+      <img src="includeOne.jpg" />
+      <div class="exclude">
+        exclude me
+        <img src="excludeOne.jpg" />
+      </div>
+    </div>
+
+    <div class="include2">
+      include me two
+      <img src="includeTwo.jpg" />
+      <div class="exclude2">
+        exclude me two
+        <img src="excludeTwo.jpg" />
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/fixtures/watcher/interactive.html b/fixtures/watcher/interactive.html
new file mode 100644
index 0000000..2fe3466
--- /dev/null
+++ b/fixtures/watcher/interactive.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Interactive Test Fixture</title>
+    <style>
+      #scrollable-div {
+        height: 50px;
+        overflow: auto;
+        border: 1px solid #000;
+        padding: 10px;
+      }
+
+      #hover-button {
+        background-color: lightgray; /* Initial background color */
+        padding: 5px 10px; /* Button padding */
+      }
+
+      #hover-button:hover {
+        background-color: gray; /* Background color on hover */
+      }
+
+      p {
+        height: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Interactive Test Fixture</h1>
+    <div data-testid="scrollable-div" id="scrollable-div">
+      Scrollable container
+      <p>Content line 1</p>
+      <p>Content line 2</p>
+      <p>Content line 3</p>
+      <p>Content line 4</p>
+      <p>Content line 5</p>
+      <p>Content line 6</p>
+      <p>Content line 7</p>
+      <p>Content line 8</p>
+      <p>Content line 9</p>
+      <p id="content-10">Content line 10</p>
+    </div>
+    <input type="text" placeholder="Enter text here" />
+    <button id="hover-button">Hover me</button>
+
+    <label for="focus-input">Focus input:</label>
+    <input
+      data-testid="focus-input"
+      type="text"
+      id="focus-input"
+      placeholder="Focus me"
+    />
+
+    <script>
+      const focusInput = document.querySelector('#focus-input')
+      const content = document.querySelector('#content-10')
+
+      focusInput.addEventListener('focus', () => {
+        content.innerHTML = '<p>The input is focused!</p>'
+      })
+
+      focusInput.removeEventListener('focus', () => {
+        content.innerHTML = '<p>Content line 10</p>'
+      })
+    </script>
+  </body>
+</html>
diff --git a/fixtures/watcher/keyboard-mouse.html b/fixtures/watcher/keyboard-mouse.html
new file mode 100644
index 0000000..a56fafb
--- /dev/null
+++ b/fixtures/watcher/keyboard-mouse.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>FrameBox</title>
+  </head>
+  <body>
+    <p id="keyboard-action-content"></p>
+
+    <p id="mouse-action-content"></p>
+
+    <script>
+      const keyboardContent = document.querySelector('#keyboard-action-content')
+      const mouseContent = document.querySelector('#mouse-action-content')
+
+      const keyevent = (event, type) => {
+        keyboardContent.textContent = `${type} event, key - ${event.key}`
+      }
+
+      document.addEventListener('keydown', event => keyevent(event, 'keydown'))
+      document.addEventListener('keypress', event =>
+        keyevent(event, 'keypress')
+      )
+      document.addEventListener('keyup', event => keyevent(event, 'keyup'))
+      document.addEventListener('input', event => keyevent(event, 'input'))
+
+      document.removeEventListener('keydown', event =>
+        keyevent(event, 'keydown')
+      )
+      document.removeEventListener('keypress', event =>
+        keyevent(event, 'keypress')
+      )
+      document.removeEventListener('input', event => keyevent(event, 'input'))
+      document.removeEventListener('keyup', event => keyevent(event, 'keyup'))
+
+      document.addEventListener('mousemove', () => {
+        mouseContent.textContent = `Mouse moving!`
+      })
+    </script>
+  </body>
+</html>
diff --git a/fixtures/watcher/redirect.html b/fixtures/watcher/redirect.html
new file mode 100644
index 0000000..1116229
--- /dev/null
+++ b/fixtures/watcher/redirect.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Redirecting to Protected Page</title>
+    <script>
+      const redirectURL = window.location.href.replace(
+        'redirect.html',
+        'tabs.html'
+      )
+      window.onload = function () {
+        setTimeout(function () {
+          window.location.href = redirectURL
+        }, 1000)
+      }
+    </script>
+  </head>
+  <body>
+    <h1>Some Redirecting mechanism</h1>
+    <p>...</p>
+  </body>
+</html>
diff --git a/fixtures/watcher/remount.html b/fixtures/watcher/remount.html
new file mode 100644
index 0000000..ede2766
--- /dev/null
+++ b/fixtures/watcher/remount.html
@@ -0,0 +1,124 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Continuous Button Remounting</title>
+    <script>
+      const urlParams = new URLSearchParams(window.location.search)
+      const unmountDuringAxe =
+        !!urlParams.get('unmountDuringAxe') &&
+        urlParams.get('unmountDuringAxe') !== 'false'
+      const remountIntervalMs =
+        parseInt(urlParams.get('remountInterval'), 10) || 0
+      const axeRunDelayMs = parseInt(urlParams.get('axeRunDelay'), 10) || 0
+
+      function onAxeInProgress() {
+        if (unmountDuringAxe) {
+          unmountButton('permanent')
+        }
+        if (axeRunDelayMs) {
+          const start = Date.now()
+          while (Date.now() - start < axeRunDelayMs) {}
+        }
+      }
+
+      function unmountButton(duration = 'temporary') {
+        const oldButton = document.getElementById('target')
+        if (oldButton) {
+          oldButton.parentNode.removeChild(oldButton)
+        }
+        if (duration === 'permanent') {
+          clearInterval(remountTimer)
+        }
+      }
+
+      let remountTimer
+      function remountButton() {
+        unmountButton('temporary')
+        const button = document.createElement('button')
+        button.setAttribute('id', 'target')
+        button.innerHTML = `Target Button (continuously remounted every ${remountIntervalMs}ms)`
+        document.getElementById('target-container').appendChild(button)
+      }
+
+      remountTimer = setInterval(remountButton, remountIntervalMs)
+      window.addEventListener('DOMContentLoaded', remountButton)
+
+      function remountScrollableParent() {
+        const oldParent = document.getElementById('remount-parent')
+        if (oldParent) {
+          oldParent.parentNode.removeChild(oldParent)
+        }
+
+        const parent = document.createElement('div')
+        parent.setAttribute('id', 'remount-parent')
+        parent.setAttribute('style', 'height: 100px; overflow: hidden;')
+        const button = document.createElement('button')
+        button.setAttribute('id', 'remount-target')
+        button.setAttribute('style', 'margin-top: 900px; height: 100px;')
+        button.innerHTML = `Scrollable Target Button (continously remounted every ${remountIntervalMs}ms)`
+        parent.appendChild(button)
+        document.getElementById('remount-container').appendChild(parent)
+      }
+
+      setInterval(remountScrollableParent, remountIntervalMs)
+      window.addEventListener('DOMContentLoaded', remountScrollableParent)
+
+      window.addEventListener('message', event => {
+        try {
+          if (JSON.parse(event.data).payload.axe === true) {
+            onAxeInProgress()
+          }
+        } catch (e) {}
+      })
+    </script>
+  </head>
+  <body>
+    <h1>Continuous Button Remounting Test Fixture</h1>
+    <p>
+      The below <code>#target</code> button will be continuously removed and
+      re-added from the DOM.
+    </p>
+    <p>
+      You can use the <code>remountInterval</code> query parameter to control
+      the remount interval:
+    </p>
+    <ul>
+      <li><a href="?remountInterval=0">0 (every animation frame)</a></li>
+      <li><a href="?remountInterval=100">100ms</a></li>
+      <li><a href="?remountInterval=1000">1000ms</a></li>
+    </ul>
+    <p>Other available query parameters are:</p>
+    <ul>
+      <li>
+        <a href="?unmountDuringAxe=1"
+          >unmountDuringAxe: causes the target button to permanently unmount
+          during the first axe.run on the page</a
+        >
+      </li>
+      <li>
+        <a href="?axeRunDelay=500"
+          >axeRunDelay: number of milliseconds to busy-loop for while axe.run
+          tries to make progress</a
+        >
+      </li>
+    </ul>
+
+    <div id="target-container"></div>
+
+    <div id="remount-container">
+      <div id="remount-parent" style="height: 100px; overflow: hidden">
+        <button
+          id="remount-target"
+          style="margin-top: 900px; height: 100px"
+        ></button>
+      </div>
+    </div>
+
+    <!--
+      This iframe causes axe.run to send window messages during axe.run, which is how
+      unmountDuringAxe and axeRunDelay are able to hook into the axe.run timing even
+      when axe.run is happening in an extension content script's isolated JavaScript world
+    -->
+    <iframe src="./static.html?violations=0"></iframe>
+  </body>
+</html>
diff --git a/fixtures/watcher/static.html b/fixtures/watcher/static.html
new file mode 100644
index 0000000..06dad09
--- /dev/null
+++ b/fixtures/watcher/static.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Static Test Fixture</title>
+  </head>
+  <style>
+    .low-contrast /* 4:1 */ {
+      background-color: #fff;
+      color: #f00;
+    }
+  </style>
+  <body>
+    <main>
+      <h1>Static Test Fixture</h1>
+
+      <p>
+        Use the <code>violations</code> query parameter to control how many
+        artificial accessibility violations are injected into the page.
+      </p>
+
+      <ul id="violations-container" class="low-contrast"></ul>
+
+      <script>
+        const urlParams = new URLSearchParams(window.location.search)
+        const violations = parseInt(urlParams.get('violations'), 10) ?? 3
+
+        const violationsContainer = document.getElementById(
+          'violations-container'
+        )
+
+        for (let i = 1; i <= violations; i++) {
+          const violationElement = document.createElement('li')
+          violationElement.id = 'violation-' + i
+          violationElement.textContent = 'color-contrast violation ' + i
+          violationsContainer.appendChild(violationElement)
+        }
+      </script>
+    </main>
+  </body>
+</html>
diff --git a/fixtures/watcher/tabs.html b/fixtures/watcher/tabs.html
new file mode 100644
index 0000000..2f2d2d3
--- /dev/null
+++ b/fixtures/watcher/tabs.html
@@ -0,0 +1,199 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title>Tabs Test Fixture</title>
+  </head>
+  <style>
+    .low-contrast /* 4:1 */ {
+      background-color: #fff;
+      color: #f00;
+    }
+
+    [role='tablist'] {
+      min-width: 100%;
+    }
+
+    [role='tab'],
+    [role='tab']:focus,
+    [role='tab']:hover {
+      display: inline-block;
+      position: relative;
+      z-index: 2;
+      top: 2px;
+      margin: 0;
+      margin-top: 4px;
+      padding: 3px 3px 4px;
+      border: 1px solid hsl(219deg 1% 72%);
+      border-bottom: 2px solid hsl(219deg 1% 72%);
+      border-radius: 5px 5px 0 0;
+      background: hsl(220deg 20% 94%);
+      outline: none;
+      font-weight: bold;
+      max-width: 22%;
+      overflow: hidden;
+      text-align: left;
+      cursor: pointer;
+    }
+
+    [role='tab'][aria-selected='true'] {
+      padding: 2px 2px 4px;
+      margin-top: 0;
+      border-width: 2px;
+      border-top-width: 6px;
+      border-top-color: rgb(36 116 214);
+      border-bottom-color: hsl(220deg 43% 99%);
+      background: hsl(220deg 43% 99%);
+    }
+
+    [role='tab'][aria-selected='false'] {
+      border-bottom: 1px solid hsl(219deg 1% 72%);
+    }
+
+    [role='tab']:focus-visible {
+      padding: 2px 4px;
+      border: 2px solid rgb(36 116 214);
+      border-radius: 3px;
+    }
+    [role='tab'][aria-selected='true']:focus-visible {
+      border-top-width: 6px;
+    }
+
+    [role='tabpanel'] {
+      padding: 5px;
+      border: 2px solid hsl(219deg 1% 72%);
+      border-radius: 0 5px 5px;
+      background: hsl(220deg 43% 99%);
+      min-height: 10em;
+      width: 100%;
+      overflow: auto;
+    }
+
+    [role='tabpanel'].is-hidden {
+      display: none;
+    }
+
+    [role='tabpanel'] p {
+      margin: 0;
+    }
+  </style>
+  <body>
+    <main>
+      <h1>Tabs Test Fixture</h1>
+
+      <p>
+        This fixture contains a tab control based on a slimmed-down version of
+        the
+        <a href="https://www.w3.org/WAI/ARIA/apg/"
+          >ARIA Authoring Practices Guide</a
+        >'s
+        <a
+          href="https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/"
+          >Example of Tabs with Manual Activation</a
+        >.
+      </p>
+
+      <p>
+        The number of tabs and of accessibility violations within each tab can
+        be controlled by the <code>tabViolations</code> query parameter, which
+        should be a comma-separated list of numbers (eg,
+        <code>tabViolations=2,3,4</code> for 3 tabs with 2, 3, and 4 violations
+        respectively).
+      </p>
+
+      <h2 id="tablist-label">Test Tab Control</h2>
+      <div
+        id="tab-container"
+        role="tablist"
+        aria-labelledby="tablist-label"
+      ></div>
+      <div id="tabpanel-container"></div>
+
+      <script>
+        const urlParams = new URLSearchParams(window.location.search)
+        const tabViolationsParam = urlParams.get('tabViolations') || '2,1,0'
+        const tabViolations = tabViolationsParam
+          .split(',')
+          .map(v => parseInt(v, 10) || 0)
+
+        const tabContainer = document.getElementById('tab-container')
+        const tabPanelContainer = document.getElementById('tabpanel-container')
+
+        function onTabClick(tabIndex) {
+          const newSelection = tabContainer.children[tabIndex]
+          for (var i = 0; i < tabContainer.children.length; i += 1) {
+            var tab = tabContainer.children[i]
+            if (newSelection === tab) {
+              tab.setAttribute('aria-selected', 'true')
+              tabPanelContainer.children[i].classList.remove('is-hidden')
+            } else {
+              tab.setAttribute('aria-selected', 'false')
+              tabPanelContainer.children[i].classList.add('is-hidden')
+            }
+          }
+        }
+
+        function onTabKeyDown(tabIndex, event) {
+          const key = event.key
+          if (key === 'ArrowRight' || key === 'ArrowLeft') {
+            let newTabIndex = key === 'ArrowRight' ? tabIndex + 1 : tabIndex - 1
+            newTabIndex =
+              (newTabIndex + tabViolations.length) % tabViolations.length
+            tabContainer.children[newTabIndex].focus()
+          } else if (key === 'Home') {
+            tabContainer.children[0].focus()
+          } else if (key === 'End') {
+            tabContainer.children[tabViolations.length - 1].focus()
+          } else {
+            return
+          }
+          event.stopPropagation()
+          event.preventDefault()
+        }
+
+        // Create tabs based on the number of tabViolations
+        for (let i = 0; i < tabViolations.length; i++) {
+          const tabLabel = 'Tab ' + (i + 1)
+          const tabId = 'tab-' + (i + 1)
+          const tabPanelId = 'tabpanel-' + (i + 1)
+
+          const tab = document.createElement('button')
+          tab.id = tabId
+          tab.setAttribute('data-testid', tabId)
+          tab.textContent = tabLabel
+          tab.setAttribute('role', 'tab')
+          tab.setAttribute('aria-controls', tabPanelId)
+          tab.setAttribute('aria-selected', 'false')
+          tab.setAttribute('tabindex', '0')
+          tab.addEventListener('click', () => onTabClick(i))
+          tab.addEventListener('keydown', e => onTabKeyDown(i, e))
+          tabContainer.appendChild(tab)
+
+          const tabPanel = document.createElement('div')
+          tabPanel.id = tabPanelId
+          tabPanel.setAttribute('role', 'tabpanel')
+          tabPanel.setAttribute('aria-labelledby', tabId)
+          tabPanel.classList.add('is-hidden')
+          tabPanelContainer.appendChild(tabPanel)
+
+          tabPanel.innerHTML = `
+          <h3>Tab ${i + 1} with ${tabViolations[i]} violations</h3>
+          <ul class="violations-container low-contrast"></ul>
+        ${i === 0 ? '<button type="button" id="show-panel-2-button" onclick="onTabClick(1)">Show Panel 2</button>' : ''}
+        `
+          const violationsContainer = tabPanel.querySelector(
+            '.violations-container'
+          )
+
+          for (let j = 1; j <= tabViolations[i]; j++) {
+            const violationElement = document.createElement('li')
+            violationElement.id = `tab-${i + 1}-violation-${j}`
+            violationElement.textContent = 'color-contrast violation ' + j
+            violationsContainer.appendChild(violationElement)
+          }
+        }
+
+        onTabClick(0)
+      </script>
+    </main>
+  </body>
+</html>
