diff --git a/lib/commons/text/form-control-value.js b/lib/commons/text/form-control-value.js
index e892781aa5..b4ef057cc0 100644
--- a/lib/commons/text/form-control-value.js
+++ b/lib/commons/text/form-control-value.js
@@ -13,7 +13,7 @@ import isHiddenForEveryone from '../dom/is-hidden-for-everyone';
 import { nodeLookup, querySelectorAll } from '../../core/utils';
 import log from '../../core/log';
 
-const controlValueRoles = [
+export const controlValueRoles = [
   'textbox',
   'progressbar',
   'scrollbar',
diff --git a/lib/commons/text/subtree-text.js b/lib/commons/text/subtree-text.js
index a3d669f342..09fbe6a581 100644
--- a/lib/commons/text/subtree-text.js
+++ b/lib/commons/text/subtree-text.js
@@ -1,8 +1,10 @@
 import accessibleTextVirtual from './accessible-text-virtual';
 import namedFromContents from '../aria/named-from-contents';
 import getOwnedVirtual from '../aria/get-owned-virtual';
+import getRole from '../aria/get-role';
 import getElementsByContentType from '../standards/get-elements-by-content-type';
 import getElementSpec from '../standards/get-element-spec';
+import { controlValueRoles } from './form-control-value';
 
 /**
  * Get the accessible text for an element that can get its name from content
@@ -16,20 +18,23 @@ function subtreeText(virtualNode, context = {}) {
   const { alreadyProcessed } = accessibleTextVirtual;
   context.startNode = context.startNode || virtualNode;
   const { strict, inControlContext, inLabelledByContext } = context;
+  const role = getRole(virtualNode);
   const { contentTypes } = getElementSpec(virtualNode, {
     noMatchAccessibleName: true
   });
   if (
     alreadyProcessed(virtualNode, context) ||
     virtualNode.props.nodeType !== 1 ||
-    contentTypes?.includes('embedded') // canvas, video, etc
+    contentTypes?.includes('embedded') || // canvas, video, etc
+    controlValueRoles.includes(role)
   ) {
     return '';
   }
 
   if (
-    !namedFromContents(virtualNode, { strict }) &&
-    !context.subtreeDescendant
+    !context.subtreeDescendant &&
+    !context.inLabelledByContext &&
+    !namedFromContents(virtualNode, { strict })
   ) {
     return '';
   }
@@ -40,6 +45,7 @@ function subtreeText(virtualNode, context = {}) {
    * chosen to ignore this, but only for direct content, not for labels / aria-labelledby.
    * That way in `a[href] > article > #text` the text is used for the accessible name,
    * See: https://github.com/dequelabs/axe-core/issues/1461
+   * See: https://github.com/w3c/accname/issues/120
    */
   if (!strict) {
     const subtreeDescendant = !inControlContext && !inLabelledByContext;
diff --git a/lib/commons/text/unsupported.js b/lib/commons/text/unsupported.js
index 04d63f1836..197b41600f 100644
--- a/lib/commons/text/unsupported.js
+++ b/lib/commons/text/unsupported.js
@@ -1,5 +1,7 @@
-const unsupported = {
-  accessibleNameFromFieldValue: ['combobox', 'listbox', 'progressbar']
+export default {
+  // Element's who's value is not consistently picked up in the accessible name
+  // Supported in Chrome 114, Firefox 115, but not Safari 16.5:
+  // <input aria-labelledby="lbl">
+  // <div id="lbl" role="progressbar" aria-valuenow="23"></div>
+  accessibleNameFromFieldValue: ['progressbar']
 };
-
-export default unsupported;
diff --git a/test/commons/text/accessible-text.js b/test/commons/text/accessible-text.js
index 3fd2ca785e..fd0552f0cd 100644
--- a/test/commons/text/accessible-text.js
+++ b/test/commons/text/accessible-text.js
@@ -1,6 +1,6 @@
 describe('text.accessibleTextVirtual', () => {
   const fixture = document.getElementById('fixture');
-  const shadowSupport = axe.testUtils.shadowSupport;
+  const { html, shadowSupport } = axe.testUtils;
 
   afterEach(() => {
     fixture.innerHTML = '';
@@ -9,26 +9,32 @@ describe('text.accessibleTextVirtual', () => {
 
   it('is called through accessibleText with a DOM node', () => {
     const accessibleText = axe.commons.text.accessibleText;
-    fixture.innerHTML = '<label><input type="button"></label>';
+    fixture.innerHTML = html` <label><input type="button" /></label> `;
     axe.testUtils.flatTreeSetup(fixture);
     const target = fixture.querySelector('input');
     assert.equal(accessibleText(target), '');
   });
 
   it('should match the first example from the ARIA spec', () => {
-    fixture.innerHTML =
-      '<ul role="menubar">' +
-      ' <!-- Rule 2A: "File" label via aria-labelledby -->' +
-      '  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel" id="rule2a">' +
-      '    <span id="fileLabel">File</span>' +
-      '    <ul role="menu">' +
-      '      <!-- Rule 2C: "New" label via Namefrom:contents -->' +
-      '      <li role="menuitem" id="rule2c">New</li>' +
-      '      <li role="menuitem">Open…</li>' +
-      '      …' +
-      '    </ul>' +
-      '  </li>' +
-      '</ul>';
+    fixture.innerHTML = html`
+      <ul role="menubar">
+        <!-- Rule 2A: "File" label via aria-labelledby -->
+        <li
+          role="menuitem"
+          aria-haspopup="true"
+          aria-labelledby="fileLabel"
+          id="rule2a"
+        >
+          <span id="fileLabel">File</span>
+          <ul role="menu">
+            <!-- Rule 2C: "New" label via Namefrom:contents -->
+            <li role="menuitem" id="rule2c">New</li>
+            <li role="menuitem">Open…</li>
+            …
+          </ul>
+        </li>
+      </ul>
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const rule2a = axe.utils.querySelectorAll(axe._tree, '#rule2a')[0];
@@ -39,29 +45,35 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should match the second example from the ARIA spec', () => {
-    fixture.innerHTML =
-      '<fieldset>' +
-      '  <legend>Meeting alarms</legend>' +
-      '  <!-- Rule 2A: "Beep" label given by native HTML label element -->' +
-      '  <input type="checkbox" id="beep"> <label for="beep">Beep</label> <br>' +
-      '  <input type="checkbox" id="mtgTitle"> <label for="mtgTitle">Display the meeting title</label> <br>' +
-      '  <!-- Rule 2B -->' +
-      '  <input type="checkbox" id="flash">' +
-      '  <label for="flash">' +
-      '    Flash the screen' +
-      '    <!-- Rule 2A: label of text input given by aria-label, "Number of times to flash screen" -->' +
-      '    <input type="text" value="3" size="2" id="numTimes" title="Number of times to flash screen">' +
-      '    times' +
-      '  </label>' +
-      '</fieldset>';
+    fixture.innerHTML = html`
+      <fieldset>
+        <legend>Meeting alarms</legend>
+        <!-- Rule 2A: "Beep" label given by native HTML label element -->
+        <input type="checkbox" id="beep" /> <label for="beep">Beep</label>
+        <br />
+        <input type="checkbox" id="mtgTitle" />
+        <label for="mtgTitle">Display the meeting title</label> <br />
+        <!-- Rule 2B -->
+        <input type="checkbox" id="flash" />
+        <label for="flash">
+          Flash the screen
+          <!-- Rule 2A: label of text input given by aria-label, "Number of times to flash screen" -->
+          <input
+            type="text"
+            value="3"
+            size="2"
+            id="numTimes"
+            title="Number of times to flash screen"
+          />
+          times
+        </label>
+      </fieldset>
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const rule2a = axe.utils.querySelectorAll(axe._tree, '#beep')[0];
     const rule2b = axe.utils.querySelectorAll(axe._tree, '#flash')[0];
     assert.equal(axe.commons.text.accessibleTextVirtual(rule2a), 'Beep');
-    // Chrome 72: "Flash the screen 3 times"
-    // Firefox 62: "Flash the screen 3 times"
-    // Safari 12.0: "Flash the screen 3 times"
     assert.equal(
       axe.commons.text.accessibleTextVirtual(rule2b),
       'Flash the screen 3 times'
@@ -69,12 +81,22 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use aria-labelledby if present', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="text" value="the value" ' +
-      'aria-labelledby="t1label" aria-label="ARIA Label" id="t1"> of <i>everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is
+        <input
+          type="text"
+          value="the value"
+          aria-labelledby="t1label"
+          aria-label="ARIA Label"
+          id="t1"
+        />
+        of <i>everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
@@ -85,12 +107,22 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use recusive aria-labelledby properly', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="text" value="the value" ' +
-      'aria-labelledby="t1 t1label" aria-label="ARIA Label" id="t1"> of <i>everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is
+        <input
+          type="text"
+          value="the value"
+          aria-labelledby="t1 t1label"
+          aria-label="ARIA Label"
+          id="t1"
+        />
+        of <i>everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
@@ -101,12 +133,15 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should include hidden text referred to with aria-labelledby', () => {
-    fixture.innerHTML =
-      '<div id="t1label" style="display:none">This is a ' +
-      '<span style="visibility:hidden">hidden </span>' +
-      '<span aria-hidden="true">secret</span></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t1" aria-labelledby="t1label">';
+    fixture.innerHTML = html`
+      <div id="t1label" style="display:none">
+        This is a
+        <span style="visibility:hidden">hidden </span>
+        <span aria-hidden="true">secret</span>
+      </div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t1" aria-labelledby="t1label" />'
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
@@ -117,8 +152,9 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should allow setting the initial includeHidden value', () => {
-    fixture.innerHTML =
-      '<label id="lbl1" style="display:none;">hidden label</label>';
+    fixture.innerHTML = html`
+      <label id="lbl1" style="display:none;">hidden label</label>
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#lbl1')[0];
@@ -138,12 +174,16 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use aria-label if present with no labelledby', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="text" value="the value" ' +
-      'aria-label="ARIA Label" id="t1"> of <i>everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is
+        <input type="text" value="the value" aria-label="ARIA Label" id="t1" />
+        of <i>everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
@@ -151,13 +191,16 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use alt on imgs with no ARIA', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="text" value="the value" ' +
-      'id="t1"> of <i>everything</i></div>' +
-      '<img alt="Alt text goes here" id="target">' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is <input type="text" value="the value" id="t1" /> of
+        <i>everything</i>
+      </div>
+      <img alt="Alt text goes here" id="target" />
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
@@ -168,13 +211,16 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use alt on image inputs with no ARIA', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="text" value="the value" ' +
-      'id="t1"> of <i>everything</i></div>' +
-      '<input type="image" alt="Alt text goes here" id="target">' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is <input type="text" value="the value" id="t1" /> of
+        <i>everything</i>
+      </div>
+      <input type="image" alt="Alt text goes here" id="target" />
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />'
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
@@ -185,13 +231,16 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use not use alt on text inputs with no ARIA', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="text" value="the value" ' +
-      'id="t1"> of <i>everything</i></div>' +
-      '<input type="text" alt="Alt text goes here" id="target">' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is <input type="text" value="the value" id="t1" /> of
+        <i>everything</i>
+      </div>
+      <input type="text" alt="Alt text goes here" id="target" />
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
@@ -199,12 +248,15 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use HTML label if no ARIA information', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="text" value="the value" ' +
-      'id="t1"> of <i>everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is <input type="text" value="the value" id="t1" /> of
+        <i>everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
@@ -212,12 +264,22 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should handle last ditch title attribute', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="text" value="the value" ' +
-      'aria-labelledby="t1label" aria-label="ARIA Label" id="t1"> of <i title="italics"></i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is
+        <input
+          type="text"
+          value="the value"
+          aria-labelledby="t1label"
+          aria-label="ARIA Label"
+          id="t1"
+        />
+        of <i title="italics"></i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t2label')[0];
@@ -228,12 +290,22 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should handle totally empty elements', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="text" value="the value" ' +
-      'aria-labelledby="t1label" aria-label="ARIA Label" id="t1"> of <i></i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is
+        <input
+          type="text"
+          value="the value"
+          aria-labelledby="t1label"
+          aria-label="ARIA Label"
+          id="t1"
+        />
+        of <i></i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t2label')[0];
@@ -244,20 +316,28 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should handle author name-from roles properly', () => {
-    fixture.innerHTML =
-      '<div id="t2label" role="heading">This is ' +
-      '  <input type="text" value="the value" ' +
-      '    aria-labelledby="t1label" aria-label="ARIA Label" id="t1">' +
-      '  of <i role="alert">everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label" role="heading">
+        This is
+        <input
+          type="text"
+          value="the value"
+          aria-labelledby="t1label"
+          aria-label="ARIA Label"
+          id="t1"
+        />
+        of <i role="alert">everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t2label')[0];
-    // Chrome 86: This is This is a label of
-    // Firefox 82: This is ARIA Label everything
-    // Safari 14.0: This is This is a label of everything
+    // Chrome 114: "This is the value of "
+    // Firefox 115: "This is ARIA Label the value everything"
+    // Safari 16.5: This is the value This is a label of everything
     assert.equal(
       axe.commons.text.accessibleTextVirtual(target),
       'This is This is a label of everything'
@@ -265,9 +345,11 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should only show each node once when label is before input', () => {
-    fixture.innerHTML =
-      '<div id="target"><label for="tb1">My form input</label>' +
-      '<input type="text" id="tb1"></div>';
+    fixture.innerHTML = html`
+      <div id="target">
+        <label for="tb1">My form input</label> <input type="text" id="tb1" />
+      </div>
+    `;
     axe.testUtils.flatTreeSetup(fixture);
     const target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
     assert.equal(
@@ -277,10 +359,12 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should only show each node once when label follows input', () => {
-    fixture.innerHTML =
-      '<div id="target">' +
-      '<input type="text" id="tb1"></div>' +
-      '<label for="tb1">My form input</label>';
+    fixture.innerHTML = html`
+      <div id="target">
+        <input type="text" id="tb1" />
+      </div>
+      <label for="tb1">My form input</label>
+    `;
     axe.testUtils.flatTreeSetup(fixture);
     const target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
     assert.equal(
@@ -290,12 +374,22 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should handle nested inputs in normal context', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="text" value="the value" ' +
-      'aria-labelledby="t1label" aria-label="ARIA Label" id="t1"> of <i>everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is
+        <input
+          type="text"
+          value="the value"
+          aria-labelledby="t1label"
+          aria-label="ARIA Label"
+          id="t1"
+        />
+        of <i>everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t2label')[0];
@@ -306,18 +400,28 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use handle nested inputs properly in labelledby context', () => {
-    // Chrome 72: This is This is a label of everything
-    // Firefox 62: This is ARIA Label the value of everything
-    // Safari 12.0: THis is This is a label of everything
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="text" value="the value" ' +
-      'aria-labelledby="t1label" aria-label="ARIA Label" id="t1"> of <i>everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is
+        <input
+          type="text"
+          value="the value"
+          aria-labelledby="t1label"
+          aria-label="ARIA Label"
+          id="t1"
+        />
+        of <i>everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t2')[0];
+    // Chrome 114: This is the value of everything
+    // Firefox 115: This is ARIA Label the value of everything
+    // Safari 16.5: THis is This is a label of everything
     assert.equal(
       axe.commons.text.accessibleTextVirtual(target),
       'This is ARIA Label of everything'
@@ -325,12 +429,15 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use ignore hidden inputs', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input type="hidden" value="the value" ' +
-      'Label" id="t1"> of <i>everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is <input type="hidden" value="the value" Label" id="t1"> of
+        <i>everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t2')[0];
@@ -341,18 +448,22 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use handle inputs with no type as if they were text inputs', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <input value="the value" ' +
-      'aria-labelledby="t1label" id="t1"> of <i>everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is
+        <input value="the value" aria-labelledby="t1label" id="t1" />
+        of <i>everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t2')[0];
-    // Chrome 70: "This is This is a label of everything"
-    // Firefox 62: "This is the value of everything"
-    // Safari 12.0: "This is This is a label of everything"
+    // Chrome 114: "This is the value of everything"
+    // Firefox 115: "This is the value of everything"
+    // Safari 16.5: "This is This is a label of everything"
     assert.equal(
       axe.commons.text.accessibleTextVirtual(target),
       'This is the value of everything'
@@ -360,39 +471,49 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use handle nested selects properly in labelledby context', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <select multiple ' +
-      'aria-labelledby="t1label" id="t1">' +
-      '<option selected>first</option><option>second</option><option selected>third</option>' +
-      '</select> of <i>everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is
+        <select multiple aria-labelledby="t1label" id="t1">
+          <option selected>first</option>
+          <option>second</option>
+          <option selected>third</option>
+        </select>
+        of <i>everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t2')[0];
-    // Chrome 70: "This is This is a label of everything"
-    // Firefox 62: "This is of everything"
-    // Safari 12.0: "This is first third label of"
+    // Chrome 114: "This is first third of everything"
+    // Firefox 115: "This is of everything"
+    // Safari 16.5: "This is first third of everything"
     assert.equal(
       axe.commons.text.accessibleTextVirtual(target),
-      'This is of everything'
+      'This is first third of everything'
     );
   });
 
   it('should use handle nested textareas properly in labelledby context', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This is <textarea ' +
-      'aria-labelledby="t1label" id="t1">the value</textarea> of <i>everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html`
+      <div id="t2label">
+        This is
+        <textarea aria-labelledby="t1label" id="t1">the value</textarea>
+        of <i>everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t2')[0];
-    // Chrome 70: "This is This is a label of everything"
-    // Firefox 62: "This is ARIA Label the value of everything"
-    // Safari 12.0: "This is This is a label of everything"
+    // Chrome 114: "This is the value of everything"
+    // Firefox 115: "This is the value of everything"
+    // Safari 16.5: "This is This is a label of everything"
     assert.equal(
       axe.commons.text.accessibleTextVirtual(target),
       'This is the value of everything'
@@ -400,13 +521,21 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use handle ARIA labels properly in labelledby context', () => {
-    fixture.innerHTML =
-      '<div id="t2label">This <span aria-label="not a span">span</span>' +
-      ' is <input type="text" value="the value" ' +
-      'aria-labelledby="t1label" id="t1"> of <i>everything</i></div>' +
-      '<div id="t1label">This is a <b>label</b></div>' +
-      '<label for="t1">HTML Label</label>' +
-      '<input type="text" id="t2" aria-labelledby="t2label">';
+    fixture.innerHTML = html` <div id="t2label">
+        This
+        <span aria-label="not a span">span</span>
+        is
+        <input
+          type="text"
+          value="the value"
+          aria-labelledby="t1label"
+          id="t1"
+        />
+        of <i>everything</i>
+      </div>
+      <div id="t1label">This is a <b>label</b></div>
+      <label for="t1">HTML Label</label>
+      <input type="text" id="t2" aria-labelledby="t2label" />`;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, '#t2')[0];
@@ -417,73 +546,82 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should come up empty if input is labeled only by select options', () => {
-    fixture.innerHTML =
-      '<label for="target">' +
-      '<select id="select">' +
-      '	<option selected="selected">Chosen</option>' +
-      '	<option>Not Selected</option>' +
-      '</select>' +
-      '</label>' +
-      '<input id="target" type="text" />';
+    fixture.innerHTML = html`
+      <label for="target">
+        <select id="select">
+          <option selected="selected">Chosen</option>
+          <option>Not Selected</option>
+        </select>
+      </label>
+      <input id="target" type="text" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
     const target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
-    // Chrome 70: ""
-    // Firefox 62: "Chosen"
-    // Safari 12.0: "Chosen"
-    assert.equal(axe.commons.text.accessibleTextVirtual(target), '');
+    // Chrome 114: "Chosen"
+    // Firefox 115: "Chosen"
+    // Safari 16.5: "Chosen"
+    assert.equal(axe.commons.text.accessibleTextVirtual(target), 'Chosen');
   });
 
   it("should be empty if input is labeled by labeled select (ref'd string labels have spotty support)", () => {
-    fixture.innerHTML =
-      '<label for="select">My Select</label>' +
-      '<label for="target">' +
-      '<select id="select">' +
-      '	<option selected="selected">Chosen</option>' +
-      '	<option>Not Selected</option>' +
-      '</select>' +
-      '</label>' +
-      '<input id="target" type="text" />';
+    fixture.innerHTML = html`
+      <label for="select">My Select</label>
+      <label for="target">
+        <select id="select">
+          <option selected="selected">Chosen</option>
+          <option>Not Selected</option>
+        </select>
+      </label>
+      <input id="target" type="text" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
     const target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
-    assert.equal(axe.commons.text.accessibleTextVirtual(target), '');
+    // Chrome 114: "Chosen"
+    // Firefox 115: "Chosen"
+    // Safari 16.5: "Chosen"
+    assert.equal(axe.commons.text.accessibleTextVirtual(target), 'Chosen');
   });
 
   it('should be empty for an empty label wrapping a select', () => {
-    fixture.innerHTML =
-      '<label>' +
-      '<span class="label"></span>' +
-      '<select id="target">' +
-      '<option value="1" selected="selected">Please choose a region</option>' +
-      '<option value="2">Coastal</option>' +
-      '<option value="3">Forest</option>' +
-      '<option value="4">Grasslands</option>' +
-      '<option value="5">Mountains</option>' +
-      '</select>' +
-      '</label>';
+    fixture.innerHTML = html`
+      <label>
+        <span class="label"></span>
+        <select id="target">
+          <option value="1" selected="selected">Please choose a region</option>
+          <option value="2">Coastal</option>
+          <option value="3">Forest</option>
+          <option value="4">Grasslands</option>
+          <option value="5">Mountains</option>
+        </select>
+      </label>
+    `;
     axe.testUtils.flatTreeSetup(fixture);
     const target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
     assert.equal(axe.commons.text.accessibleTextVirtual(target), '');
   });
 
   it('should not return select options if input is aria-labelled by a select', () => {
-    fixture.innerHTML =
-      '<label>' +
-      '<select id="select">' +
-      '	<option selected="selected">Chosen</option>' +
-      '	<option>Not Selected</option>' +
-      '</select>' +
-      '</label>' +
-      '<input aria-labelledby="select" type="text" id="target" />';
+    fixture.innerHTML = html`
+      <label>
+        <select id="select">
+          <option selected="selected">Chosen</option>
+          <option>Not Selected</option>
+        </select>
+      </label>
+      <input aria-labelledby="select" type="text" id="target" />
+    `;
     axe.testUtils.flatTreeSetup(fixture);
     const target = axe.utils.querySelectorAll(axe._tree, '#target')[0];
-    // Chrome 70: ""
-    // Firefox 62: ""
-    // Safari 12.0: "Chosen"
-    assert.equal(axe.commons.text.accessibleTextVirtual(target), '');
+    // Chrome 114: "Chosen"
+    // Firefox 115: "Chosen"
+    // Safari 16.5: "Chosen"
+    assert.equal(axe.commons.text.accessibleTextVirtual(target), 'Chosen');
   });
 
   it('shoud properly fall back to title', () => {
-    fixture.innerHTML = '<a href="#" role="presentation" title="Hello"></a>';
+    fixture.innerHTML = html`
+      <a href="#" role="presentation" title="Hello"></a>
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
@@ -491,7 +629,7 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should give text even for role=presentation on anchors', () => {
-    fixture.innerHTML = '<a href="#" role="presentation">Hello</a>';
+    fixture.innerHTML = html` <a href="#" role="presentation">Hello</a> `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
@@ -499,7 +637,7 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should give text even for role=presentation on buttons', () => {
-    fixture.innerHTML = '<button role="presentation">Hello</button>';
+    fixture.innerHTML = html` <button role="presentation">Hello</button> `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, 'button')[0];
@@ -507,21 +645,21 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should give text even for role=presentation on summary', () => {
-    fixture.innerHTML = '<summary role="presentation">Hello</summary>';
+    fixture.innerHTML = html` <summary role="presentation">Hello</summary> `;
     axe.testUtils.flatTreeSetup(fixture);
     const target = axe.utils.querySelectorAll(axe._tree, 'summary')[0];
     assert.equal(axe.commons.text.accessibleTextVirtual(target), 'Hello');
   });
 
   it('shoud properly fall back to title', () => {
-    fixture.innerHTML = '<a href="#" role="none" title="Hello"></a>';
+    fixture.innerHTML = html` <a href="#" role="none" title="Hello"></a> `;
     axe.testUtils.flatTreeSetup(fixture);
     const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
     assert.equal(axe.commons.text.accessibleTextVirtual(target), 'Hello');
   });
 
   it('should give text even for role=none on anchors', () => {
-    fixture.innerHTML = '<a href="#" role="none">Hello</a>';
+    fixture.innerHTML = html` <a href="#" role="none">Hello</a> `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
@@ -529,7 +667,7 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should give text even for role=none on buttons', () => {
-    fixture.innerHTML = '<button role="none">Hello</button>';
+    fixture.innerHTML = html` <button role="none">Hello</button> `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, 'button')[0];
@@ -537,7 +675,7 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should give text even for role=none on summary', () => {
-    fixture.innerHTML = '<summary role="none">Hello</summary>';
+    fixture.innerHTML = html` <summary role="none">Hello</summary> `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, 'summary')[0];
@@ -545,7 +683,7 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should not add extra spaces around phrasing elements', () => {
-    fixture.innerHTML = '<a href="#">Hello<span>World</span></a>';
+    fixture.innerHTML = html` <a href="#">Hello<span>World</span></a> `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
@@ -553,7 +691,12 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should add spaces around non-phrasing elements', () => {
-    fixture.innerHTML = '<a href="#">Hello<div>World</div></a>';
+    fixture.innerHTML = html`
+      <a href="#"
+        >Hello
+        <div>World</div></a
+      >
+    `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
@@ -570,7 +713,7 @@ describe('text.accessibleTextVirtual', () => {
   });
 
   it('should use <label> for input buttons', () => {
-    fixture.innerHTML = '<label><input type="button"></label>';
+    fixture.innerHTML = html` <label><input type="button" /></label> `;
     axe.testUtils.flatTreeSetup(fixture);
 
     const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -619,18 +762,29 @@ describe('text.accessibleTextVirtual', () => {
   (shadowSupport.v1 ? it : xit)(
     'should only find aria-labelledby element in the same context ',
     () => {
-      fixture.innerHTML =
-        '<div id="t2label">This is <input type="text" value="the value" ' +
-        'aria-labelledby="t1label" aria-label="ARIA Label" id="t1"> of <i>everything</i></div>' +
-        '<div id="shadow"></div>';
+      fixture.innerHTML = html`
+        <div id="t2label">
+          This is
+          <input
+            type="text"
+            value="the value"
+            aria-labelledby="t1label"
+            aria-label="ARIA Label"
+            id="t1"
+          />
+          of <i>everything</i>
+        </div>
+        <div id="shadow"></div>
+      `;
 
       const shadow = document
         .getElementById('shadow')
         .attachShadow({ mode: 'open' });
-      shadow.innerHTML =
-        '<div id="t1label">This is a <b>label</b></div>' +
-        '<label for="t1">HTML Label</label>' +
-        '<input type="text" id="t2" aria-labelledby="t2label">';
+      shadow.innerHTML = html`
+        <div id="t1label">This is a <b>label</b></div>
+        <label for="t1">HTML Label</label>
+        <input type="text" id="t2" aria-labelledby="t2label" />
+      `;
 
       axe.testUtils.flatTreeSetup(fixture);
       const target = axe.utils.querySelectorAll(axe._tree, '#t1')[0];
@@ -644,7 +798,7 @@ describe('text.accessibleTextVirtual', () => {
   (shadowSupport.v1 ? it : xit)(
     'should find attributes within a shadow tree',
     () => {
-      fixture.innerHTML = '<div id="shadow"></div>';
+      fixture.innerHTML = html` <div id="shadow"></div> `;
 
       const shadow = document
         .getElementById('shadow')
@@ -683,14 +837,15 @@ describe('text.accessibleTextVirtual', () => {
   (shadowSupport.v1 ? it : xit)(
     'should find fallback content for shadow DOM',
     () => {
-      fixture.innerHTML = '<div id="shadow"></div>';
+      fixture.innerHTML = html` <div id="shadow"></div> `;
 
       const shadow = document
         .getElementById('shadow')
         .attachShadow({ mode: 'open' });
-      shadow.innerHTML =
-        '<input type="text" id="t1">' +
-        '<label for="t1"><slot>Fallback content heroes</slot></label>';
+      shadow.innerHTML = html`
+        <input type="text" id="t1" />
+        <label for="t1"><slot>Fallback content heroes</slot></label>
+      `;
 
       axe.testUtils.flatTreeSetup(fixture);
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -703,9 +858,13 @@ describe('text.accessibleTextVirtual', () => {
 
   describe('figure', () => {
     it('should check aria-labelledby', () => {
-      fixture.innerHTML =
-        '<div id="t1">Hello</div>' +
-        '<figure aria-labelledby="t1">Not part of a11yName <figcaption>Fail</figcaption></figure>';
+      fixture.innerHTML = html`
+        <div id="t1">Hello</div>
+        <figure aria-labelledby="t1">
+          Not part of a11yName
+          <figcaption>Fail</figcaption>
+        </figure>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'figure')[0];
@@ -713,8 +872,13 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should check aria-label', () => {
-      fixture.innerHTML =
-        '<figure aria-label="Hello">Not part of a11yName <figcaption>Fail</figcaption></figure>';
+      fixture.innerHTML = html`
+        <figure aria-label="Hello">
+          Not part of a11yName
+          <figcaption>Fail</figcaption>
+        </figure>
+        ';
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'figure')[0];
@@ -740,7 +904,12 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should fall back to innerText of figure', () => {
-      fixture.innerHTML = '<figure>Hello<figcaption></figcaption></figure>';
+      fixture.innerHTML = html`
+        <figure>
+          Hello
+          <figcaption></figcaption>
+        </figure>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'figure')[0];
@@ -766,9 +935,11 @@ describe('text.accessibleTextVirtual', () => {
 
   describe('img', () => {
     it('should work with aria-labelledby attribute', () => {
-      fixture.innerHTML =
-        '<div id="t1">Hello</div><div id="t2">World</div>' +
-        '<img aria-labelledby="t1 t2">';
+      fixture.innerHTML = html`
+        <div id="t1">Hello</div>
+        <div id="t2">World</div>
+        <img aria-labelledby="t1 t2" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'img')[0];
@@ -779,7 +950,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should work with aria-label attribute', () => {
-      fixture.innerHTML = '<img aria-label="Hello World">';
+      fixture.innerHTML = html` <img aria-label="Hello World" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'img')[0];
@@ -790,7 +961,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should work with alt attribute', () => {
-      fixture.innerHTML = '<img alt="Hello World">';
+      fixture.innerHTML = html` <img alt="Hello World" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'img')[0];
@@ -801,7 +972,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should work with title attribute', () => {
-      fixture.innerHTML = '<img title="Hello World">';
+      fixture.innerHTML = html` <img title="Hello World" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'img')[0];
@@ -814,7 +985,7 @@ describe('text.accessibleTextVirtual', () => {
 
   describe('input buttons', () => {
     it('should find value for input type=button', () => {
-      fixture.innerHTML = '<input type="button" value="Hello">';
+      fixture.innerHTML = html` <input type="button" value="Hello" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -822,7 +993,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find value for input type=reset', () => {
-      fixture.innerHTML = '<input type="reset" value="Hello">';
+      fixture.innerHTML = html` <input type="reset" value="Hello" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -830,7 +1001,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find value for input type=submit', () => {
-      fixture.innerHTML = '<input type="submit" value="Hello">';
+      fixture.innerHTML = html` <input type="submit" value="Hello" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -838,7 +1009,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should provide a default value for input type="submit"', () => {
-      fixture.innerHTML = '<input type="submit">';
+      fixture.innerHTML = html` <input type="submit" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -849,7 +1020,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should provide a default value for input type="reset"', () => {
-      fixture.innerHTML = '<input type="reset">';
+      fixture.innerHTML = html` <input type="reset" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -859,7 +1030,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find title for input type=button', () => {
-      fixture.innerHTML = '<input type="button" title="Hello">';
+      fixture.innerHTML = html` <input type="button" title="Hello" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -867,7 +1038,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find title for input type=reset', () => {
-      fixture.innerHTML = '<input type="reset" title="Hello">';
+      fixture.innerHTML = html` <input type="reset" title="Hello" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -879,7 +1050,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find title for input type=submit', () => {
-      fixture.innerHTML = '<input type="submit" title="Hello">';
+      fixture.innerHTML = html` <input type="submit" title="Hello" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -893,9 +1064,11 @@ describe('text.accessibleTextVirtual', () => {
 
   describe('tables', () => {
     it('should work with aria-labelledby', () => {
-      fixture.innerHTML =
-        '<div id="t1">Hello</div><div id="t2">World</div>' +
-        '<table aria-labelledby="t1 t2"></table>';
+      fixture.innerHTML = html`
+        <div id="t1">Hello</div>
+        <div id="t2">World</div>
+        <table aria-labelledby="t1 t2"></table>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'table')[0];
@@ -906,7 +1079,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should work with aria-label', () => {
-      fixture.innerHTML = '<table aria-label="Hello World"></table>';
+      fixture.innerHTML = html` <table aria-label="Hello World"></table> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'table')[0];
@@ -929,7 +1102,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should work with the title attribute', () => {
-      fixture.innerHTML = '<table title="Hello World"></table>';
+      fixture.innerHTML = html` <table title="Hello World"></table> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'table')[0];
@@ -940,7 +1113,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should work with the summary attribute', () => {
-      fixture.innerHTML = '<table summary="Hello World"></table>';
+      fixture.innerHTML = html` <table summary="Hello World"></table> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'table')[0];
@@ -951,10 +1124,12 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should prefer summary attribute over title attribute', () => {
-      // Chrome 70: "Hello world"
-      // Firefox 62: "Hello world"
-      // Safari 12.0: "FAIL"
-      fixture.innerHTML = '<table summary="Hello World" title="FAIL"></table>';
+      // Chrome 114: "Hello world"
+      // Firefox 115: "Hello world"
+      // Safari 16.5: "Hello world"
+      fixture.innerHTML = html`
+        <table summary="Hello World" title="FAIL"></table>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'table')[0];
@@ -971,11 +1146,11 @@ describe('text.accessibleTextVirtual', () => {
     it('should find aria-labelledby', () => {
       types.forEach(function (type) {
         const t = type ? ' type="' + type + '"' : '';
-        fixture.innerHTML =
-          '<div id="t1">Hello</div><div id="t2">World</div>' +
-          '<input' +
-          t +
-          ' aria-labelledby="t1 t2">';
+        fixture.innerHTML = html`
+          <div id="t1">Hello</div>
+          <div id="t2">World</div>
+          <input ${t} aria-labelledby="t1 t2" />
+        `;
         axe.testUtils.flatTreeSetup(fixture);
 
         const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -990,7 +1165,7 @@ describe('text.accessibleTextVirtual', () => {
     it('should find aria-label', () => {
       types.forEach(function (type) {
         const t = type ? ' type="' + type + '"' : '';
-        fixture.innerHTML = '<input' + t + ' aria-label="Hello World">';
+        fixture.innerHTML = `<input ${t} aria-label="Hello World">`;
         axe.testUtils.flatTreeSetup(fixture);
 
         const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1005,8 +1180,7 @@ describe('text.accessibleTextVirtual', () => {
     it('should find an implicit label', () => {
       types.forEach(function (type) {
         const t = type ? ' type="' + type + '"' : '';
-        fixture.innerHTML =
-          '<label for="t1">Hello World' + '<input' + t + '></label>';
+        fixture.innerHTML = `<label for="t1">Hello World<input ${t}></label>`;
         axe.testUtils.flatTreeSetup(fixture);
 
         const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1021,8 +1195,7 @@ describe('text.accessibleTextVirtual', () => {
     it('should find an explicit label', () => {
       types.forEach(function (type) {
         const t = type ? ' type="' + type + '"' : '';
-        fixture.innerHTML =
-          '<label for="t1">Hello World</label>' + '<input' + t + ' id="t1">';
+        fixture.innerHTML = `<label for="t1">Hello World</label><input ${t} id="t1">`;
         axe.testUtils.flatTreeSetup(fixture);
 
         const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1037,8 +1210,7 @@ describe('text.accessibleTextVirtual', () => {
     it('should find implicit labels with id that does not match to a label', () => {
       types.forEach(function (type) {
         const t = type ? ' type="' + type + '"' : '';
-        fixture.innerHTML =
-          '<label for="t1">Hello World' + '<input' + t + ' id="foo"></label>';
+        fixture.innerHTML = `<label for="t1">Hello World<input ${t} id="foo"></label>`;
         axe.testUtils.flatTreeSetup(fixture);
 
         const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1053,7 +1225,7 @@ describe('text.accessibleTextVirtual', () => {
     it('should find a placeholder attribute', () => {
       types.forEach(function (type) {
         const t = type ? ' type="' + type + '"' : '';
-        fixture.innerHTML = '<input' + t + ' placeholder="Hello World">';
+        fixture.innerHTML = `<input ${t} placeholder="Hello World">`;
         axe.testUtils.flatTreeSetup(fixture);
 
         const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1068,7 +1240,7 @@ describe('text.accessibleTextVirtual', () => {
     it('should find a title attribute', () => {
       types.forEach(function (type) {
         const t = type ? ' type="' + type + '"' : '';
-        fixture.innerHTML = '<input' + t + ' title="Hello World">';
+        fixture.innerHTML = `<input ${t} title="Hello World">`;
         axe.testUtils.flatTreeSetup(fixture);
 
         const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1083,7 +1255,7 @@ describe('text.accessibleTextVirtual', () => {
     it('should otherwise be empty string', () => {
       types.forEach(function (type) {
         const t = type ? ' type="' + type + '"' : '';
-        fixture.innerHTML = '<input' + t + '>';
+        fixture.innerHTML = `<input ${t}>`;
         axe.testUtils.flatTreeSetup(fixture);
 
         const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1094,9 +1266,11 @@ describe('text.accessibleTextVirtual', () => {
 
   describe('textarea', () => {
     it('should find aria-labelledby', () => {
-      fixture.innerHTML =
-        '<div id="t1">Hello</div><div id="t2">World</div>' +
-        '<textarea aria-labelledby="t1 t2"></textarea>';
+      fixture.innerHTML = html`
+        <div id="t1">Hello</div>
+        <div id="t2">World</div>
+        <textarea aria-labelledby="t1 t2"></textarea>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'textarea')[0];
@@ -1107,7 +1281,9 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find aria-label', () => {
-      fixture.innerHTML = '<textarea aria-label="Hello World"></textarea>';
+      fixture.innerHTML = html`
+        <textarea aria-label="Hello World"></textarea>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'textarea')[0];
@@ -1118,8 +1294,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find an implicit label', () => {
-      fixture.innerHTML =
-        '<label for="t1">Hello World' + '<textarea></textarea></label>';
+      fixture.innerHTML = `<label for="t1">Hello World<textarea></textarea></label>`;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'textarea')[0];
@@ -1130,8 +1305,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find an explicit label', () => {
-      fixture.innerHTML =
-        '<label for="t1">Hello World</label>' + '<textarea id="t1"></textarea>';
+      fixture.innerHTML = `<label for="t1">Hello World</label><textarea id="t1"></textarea>`;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'textarea')[0];
@@ -1142,7 +1316,9 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find a placeholder attribute', () => {
-      fixture.innerHTML = '<textarea placeholder="Hello World"></textarea>';
+      fixture.innerHTML = html`
+        <textarea placeholder="Hello World"></textarea>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'textarea')[0];
@@ -1153,7 +1329,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find a title attribute', () => {
-      fixture.innerHTML = '<textarea title="Hello World"></textarea>';
+      fixture.innerHTML = html` <textarea title="Hello World"></textarea> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'textarea')[0];
@@ -1164,7 +1340,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should otherwise be empty string', () => {
-      fixture.innerHTML = '<textarea></textarea>';
+      fixture.innerHTML = html` <textarea></textarea> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'textarea')[0];
@@ -1174,9 +1350,11 @@ describe('text.accessibleTextVirtual', () => {
 
   describe('image inputs', () => {
     it('should find aria-labelledby', () => {
-      fixture.innerHTML =
-        '<div id="t1">Hello</div><div id="t2">World</div>' +
-        '<input type="image" aria-labelledby="t1 t2">';
+      fixture.innerHTML = html`
+        <div id="t1">Hello</div>
+        <div id="t2">World</div>
+        <input type="image" aria-labelledby="t1 t2" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1187,7 +1365,9 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find aria-label', () => {
-      fixture.innerHTML = '<input type="image" aria-label="Hello World">';
+      fixture.innerHTML = html`
+        <input type="image" aria-label="Hello World" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1198,7 +1378,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find an alt attribute', () => {
-      fixture.innerHTML = '<input type="image" alt="Hello World">';
+      fixture.innerHTML = html` <input type="image" alt="Hello World" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1209,7 +1389,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find a title attribute', () => {
-      fixture.innerHTML = '<input type="image" title="Hello World">';
+      fixture.innerHTML = html` <input type="image" title="Hello World" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1220,7 +1400,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should otherwise be "Submit" string', () => {
-      fixture.innerHTML = '<input type="image">';
+      fixture.innerHTML = html` <input type="image" /> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'input')[0];
@@ -1230,9 +1410,11 @@ describe('text.accessibleTextVirtual', () => {
 
   describe('a', () => {
     it('should find aria-labelledby', () => {
-      fixture.innerHTML =
-        '<div id="t1">Hello</div><div id="t2">World</div>' +
-        '<a aria-labelledby="t1 t2"></a>';
+      fixture.innerHTML = html`
+        <div id="t1">Hello</div>
+        <div id="t2">World</div>
+        <a aria-labelledby="t1 t2"></a>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
@@ -1243,7 +1425,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find aria-label', () => {
-      fixture.innerHTML = '<a aria-label="Hello World"></a>';
+      fixture.innerHTML = html` <a aria-label="Hello World"></a> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
@@ -1254,7 +1436,11 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should check subtree', () => {
-      fixture.innerHTML = '<a><span>Hello<span> World</span></span></a>';
+      fixture.innerHTML = html`
+        <a
+          ><span>Hello<span> World</span></span></a
+        >
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
@@ -1265,7 +1451,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find a title attribute', () => {
-      fixture.innerHTML = '<a title="Hello World"></a>';
+      fixture.innerHTML = html` <a title="Hello World"></a> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
@@ -1276,7 +1462,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should otherwise be empty string', () => {
-      fixture.innerHTML = '<a></a>';
+      fixture.innerHTML = html` <a></a> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
@@ -1284,16 +1470,15 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should use text from a table with a single cell and role=presentation', () => {
-      fixture.innerHTML =
-        '<a href="example.html">' +
-        '<table role="presentation">' +
-        '<tr>' +
-        '<td>' +
-        'Descriptive Link Text' +
-        '</td>' +
-        '</tr>' +
-        '</table>' +
-        '</a>';
+      fixture.innerHTML = html`
+        <a href="example.html">
+          <table role="presentation">
+            <tr>
+              <td>Descriptive Link Text</td>
+            </tr>
+          </table>
+        </a>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'a')[0];
@@ -1306,9 +1491,11 @@ describe('text.accessibleTextVirtual', () => {
 
   describe('button', () => {
     it('should find aria-labelledby', () => {
-      fixture.innerHTML =
-        '<div id="t1">Hello</div><div id="t2">World</div>' +
-        '<button aria-labelledby="t1 t2"></button>';
+      fixture.innerHTML = html`
+        <div id="t1">Hello</div>
+        <div id="t2">World</div>
+        <button aria-labelledby="t1 t2"></button>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'button')[0];
@@ -1319,7 +1506,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find aria-label', () => {
-      fixture.innerHTML = '<button aria-label="Hello World"></button>';
+      fixture.innerHTML = html` <button aria-label="Hello World"></button> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'button')[0];
@@ -1342,7 +1529,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should find a title attribute', () => {
-      fixture.innerHTML = '<button title="Hello World"></button>';
+      fixture.innerHTML = html` <button title="Hello World"></button> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'button')[0];
@@ -1353,7 +1540,7 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('should otherwise be empty string', () => {
-      fixture.innerHTML = '<button></button>';
+      fixture.innerHTML = html` <button></button> `;
       axe.testUtils.flatTreeSetup(fixture);
 
       const target = axe.utils.querySelectorAll(axe._tree, 'button')[0];
@@ -1393,7 +1580,10 @@ describe('text.accessibleTextVirtual', () => {
 
     it('should find aria-labelledby', () => {
       tags.forEach(function (tag) {
-        fixture.innerHTML = '<div id="t1">Hello</div><div id="t2">World</div>';
+        fixture.innerHTML = html`
+          <div id="t1">Hello</div>
+          <div id="t2">World</div>
+        `;
         axe.testUtils.flatTreeSetup(fixture);
 
         const elm = document.createElement(tag);
@@ -1438,7 +1628,7 @@ describe('text.accessibleTextVirtual', () => {
 
     it('should otherwise be empty string', () => {
       tags.forEach(function (tag) {
-        fixture.innerHTML = '<' + tag + '></' + tag + '>';
+        fixture.innerHTML = `<${tag}></${tag}>`;
         axe.testUtils.flatTreeSetup(fixture);
 
         const target = axe.utils.querySelectorAll(axe._tree, tag)[0];
@@ -1479,44 +1669,48 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     afterEach(() => {
-      fixture.innerHTML = '';
+      fixture.innerHTML = html``;
       axe._tree = null;
     });
 
     it('passes test 1', () => {
-      fixture.innerHTML = '<input type="button" aria-label="Rich" id="test">';
+      fixture.innerHTML = html`
+        <input type="button" aria-label="Rich" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Rich');
     });
 
     it('passes test 2', () => {
-      fixture.innerHTML =
-        '<div id="ID1">Rich\'s button</div>' +
-        '<input type="button" aria-labelledby="ID1" id="test">';
+      fixture.innerHTML = html`
+        <div id="ID1">Rich's button</div>
+        <input type="button" aria-labelledby="ID1" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), "Rich's button");
     });
 
     it('passes test 3', () => {
-      fixture.innerHTML =
-        '<div id="ID1">Rich\'s button</div>' +
-        '<input type="button" aria-label="bar" aria-labelledby="ID1" id="test"/>';
+      fixture.innerHTML = html`
+        <div id="ID1">Rich's button</div>
+        <input type="button" aria-label="bar" aria-labelledby="ID1" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), "Rich's button");
     });
 
     it('passes test 4', () => {
-      fixture.innerHTML = '<input type="reset" id="test"/>';
+      fixture.innerHTML = html` <input type="reset" id="test" /> `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Reset');
     });
 
     it('passes test 5', () => {
-      fixture.innerHTML = '<input type="button" id="test" value="foo"/>';
+      fixture.innerHTML = html` <input type="button" id="test" value="foo" /> `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
@@ -1531,61 +1725,76 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('passes test 7', () => {
-      fixture.innerHTML =
-        '<label for="test">States:</label>' + '<input type="text" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">States:</label>
+        <input type="text" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'States:');
     });
 
     it('passes test 8', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        'foo' +
-        '<input type="text" value="David"/>' +
-        '</label>' +
-        '<input type="text" id="test" value="baz"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          foo
+          <input type="text" value="David" />
+        </label>
+        <input type="text" id="test" value="baz" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo David');
     });
 
     it('passes test 9', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        'crazy' +
-        '  <select name="member" size="1" role="menu" tabindex="0">' +
-        '    <option role="menuitem" value="beard" selected="true">clown</option>' +
-        '    <option role="menuitem" value="scuba">rich</option>' +
-        '  </select>' +
-        '</label> ' +
-        '<input type="text" id="test" value="baz"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <select name="member" size="1" role="menu" tabindex="0">
+            <option role="menuitem" value="beard" selected="true">clown</option>
+            <option role="menuitem" value="scuba">rich</option>
+          </select>
+        </label>
+        <input type="text" id="test" value="baz" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy');
     });
 
     ariaValuetext('passes test 10', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '   <div role="spinbutton" aria-valuetext="Monday" aria-valuemin="1" aria-valuemax="7" aria-valuenow="4">' +
-        '   </div>' +
-        '</label>' +
-        '<input type="text" id="test" value="baz"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuetext="Monday"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="text" id="test" value="baz" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy Monday');
     });
 
     it('passes test 11', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <div role="spinbutton" aria-valuemin="1" aria-valuemax="7" aria-valuenow="4">' +
-        '  </div>' +
-        '</label>' +
-        '<input type="text" id="test" value="baz"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="text" id="test" value="baz" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy 4');
@@ -1600,31 +1809,39 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     pseudoText('passes test 13', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:before { content:"fancy "; }' +
-        '</style>' +
-        '<label for="test">fruit</label>' +
-        '<input type="text" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:before {
+            content: 'fancy ';
+          }
+        </style>
+        <label for="test">fruit</label>
+        <input type="text" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'fancy fruit');
     });
 
     pseudoText('passes test 14', () => {
-      fixture.innerHTML =
-        '<style type="text/css">' +
-        '  [data-after]:after { content: attr(data-after); }' +
-        '</style>' +
-        '<label for="test" data-after="test content"></label>' +
-        '<input type="text" id="test">';
+      fixture.innerHTML = html`
+        <style type="text/css">
+          [data-after]:after {
+            content: attr(data-after);
+          }
+        </style>
+        <label for="test" data-after="test content"></label>
+        <input type="text" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'test content');
     });
 
     it('passes test 15', () => {
-      fixture.innerHTML = '<img id="test" src="foo.jpg" aria-label="1"/>';
+      fixture.innerHTML = html`
+        <img id="test" src="foo.jpg" aria-label="1" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), '1');
@@ -1641,9 +1858,10 @@ describe('text.accessibleTextVirtual', () => {
     // To the best of my knowledge, this test is incorrect
     // Chrome and Firefox seem to return "peanuts", so does axe-core.
     xit('passes test 17', () => {
-      fixture.innerHTML =
-        '<input type="text" value="peanuts" id="test">' +
-        '<img aria-labelledby="test" src="foo.jpg"/>';
+      fixture.innerHTML = html`
+        <input type="text" value="peanuts" id="test" />
+        <img aria-labelledby="test" src="foo.jpg" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), '');
@@ -1660,9 +1878,10 @@ describe('text.accessibleTextVirtual', () => {
     // To the best of my knowledge, this test is incorrect
     // Chrome and Firefox seem to return "peanuts", so does axe-core.
     xit('passes test 19', () => {
-      fixture.innerHTML =
-        '<input type="text" value="peanuts" id="test">' +
-        '<img aria-labelledby="test" aria-label="1" src="foo.jpg"/>';
+      fixture.innerHTML = html`
+        <input type="text" value="peanuts" id="test" />
+        <img aria-labelledby="test" aria-label="1" src="foo.jpg" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), '');
@@ -1677,87 +1896,119 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('passes test 21', () => {
-      fixture.innerHTML =
-        '<input type="text" value="peanuts" id="ID1">' +
-        '<input type="text" value="popcorn" id="ID2">' +
-        '<input type="text" value="apple jacks" id="ID3">' +
-        '<img aria-labelledby="ID1 ID2 ID3" id="test" src="foo.jpg"/>';
+      fixture.innerHTML = html`
+        <input type="text" value="peanuts" id="ID1" />
+        <input type="text" value="popcorn" id="ID2" />
+        <input type="text" value="apple jacks" id="ID3" />
+        <img aria-labelledby="ID1 ID2 ID3" id="test" src="foo.jpg" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'peanuts popcorn apple jacks');
     });
 
     it('passes test 22', () => {
-      fixture.innerHTML =
-        '<input type="text" value="peanuts" id="ID1">' +
-        '<img id="test" aria-label="l" aria-labelledby="test ID1" src="foo.jpg"/>';
+      fixture.innerHTML = html`
+        <input type="text" value="peanuts" id="ID1" />
+        <img
+          id="test"
+          aria-label="l"
+          aria-labelledby="test ID1"
+          src="foo.jpg"
+        />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'l peanuts');
     });
 
     it('passes test 23', () => {
-      fixture.innerHTML =
-        '<input type="text" value="peanuts" id="ID1">' +
-        '<input type="text" value="popcorn" id="ID2">' +
-        '<img id="test" aria-label="l" aria-labelledby="test ID1 ID2" src="foo.jpg"/>';
+      fixture.innerHTML = html`
+        <input type="text" value="peanuts" id="ID1" />
+        <input type="text" value="popcorn" id="ID2" />
+        <img
+          id="test"
+          aria-label="l"
+          aria-labelledby="test ID1 ID2"
+          src="foo.jpg"
+        />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'l peanuts popcorn');
     });
 
     it('passes test 24', () => {
-      fixture.innerHTML =
-        '<input type="text" value="peanuts" id="ID1">' +
-        '<input type="text" value="popcorn" id="ID2">' +
-        '<input type="text" value="apple jacks" id="ID3">' +
-        '<img id="test" aria-label="l" aria-labelledby="test ID1 ID2 ID3" alt= "a" title="t" src="foo.jpg"/>';
+      fixture.innerHTML = html`
+        <input type="text" value="peanuts" id="ID1" />
+        <input type="text" value="popcorn" id="ID2" />
+        <input type="text" value="apple jacks" id="ID3" />
+        <img
+          id="test"
+          aria-label="l"
+          aria-labelledby="test ID1 ID2 ID3"
+          alt="a"
+          title="t"
+          src="foo.jpg"
+        />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'l peanuts popcorn apple jacks');
     });
 
     it('passes test 25', () => {
-      fixture.innerHTML =
-        '<input type="text" value="peanuts" id="ID1">' +
-        '<input type="text" value="popcorn" id="ID2">' +
-        '<input type="text" value="apple jacks" id="ID3">' +
-        '<img id="test" aria-label="" aria-labelledby="test ID1 ID2 ID3" alt="" title="t" src="foo.jpg"/>';
+      fixture.innerHTML = html`
+        <input type="text" value="peanuts" id="ID1" />
+        <input type="text" value="popcorn" id="ID2" />
+        <input type="text" value="apple jacks" id="ID3" />
+        <img
+          id="test"
+          aria-label=""
+          aria-labelledby="test ID1 ID2 ID3"
+          alt=""
+          title="t"
+          src="foo.jpg"
+        />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 't peanuts popcorn apple jacks');
     });
 
     it('passes test 26', () => {
-      fixture.innerHTML =
-        '<div id="test" aria-labelledby="ID1">foo</div>' +
-        '<span id="ID1">bar</span>';
+      fixture.innerHTML = html`
+        <div id="test" aria-labelledby="ID1">foo</div>
+        <span id="ID1">bar</span>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'bar');
     });
 
     it('passes test 27', () => {
-      fixture.innerHTML = '<div id="test" aria-label="Tag">foo</div>';
+      fixture.innerHTML = html` <div id="test" aria-label="Tag">foo</div> `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Tag');
     });
 
     it('passes test 28', () => {
-      fixture.innerHTML =
-        '<div id="test" aria-labelledby="ID1" aria-label="Tag">foo</div>' +
-        '<span id="ID1">bar</span>';
+      fixture.innerHTML = html`
+        <div id="test" aria-labelledby="ID1" aria-label="Tag">foo</div>
+        <span id="ID1">bar</span>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'bar');
     });
 
     it('passes test 29', () => {
-      fixture.innerHTML =
-        '<div id="test" aria-labelledby="ID0 ID1" aria-label="Tag">foo</div>' +
-        '<span id="ID0">bar</span>' +
-        '<span id="ID1">baz</span>';
+      fixture.innerHTML = html`
+        <div id="test" aria-labelledby="ID0 ID1" aria-label="Tag">foo</div>
+        <span id="ID0">bar</span>
+        <span id="ID1">baz</span>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'bar baz');
@@ -1765,288 +2016,373 @@ describe('text.accessibleTextVirtual', () => {
 
     // Should only pass in strict mode
     it('passes test 30', () => {
-      fixture.innerHTML = '<div id="test">Div with text</div>';
+      fixture.innerHTML = html` <div id="test">Div with text</div> `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target, { strict: true }), '');
     });
 
     it('passes test 31', () => {
-      fixture.innerHTML = '<div id="test" role="button">foo</div>';
+      fixture.innerHTML = html` <div id="test" role="button">foo</div> `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
     });
 
     it('passes test 32', () => {
-      fixture.innerHTML =
-        '<div id="test" role="button" title="Tag" style="outline:medium solid black; width:2em; height:1em;">' +
-        '</div>';
+      fixture.innerHTML = html`
+        <div
+          id="test"
+          role="button"
+          title="Tag"
+          style="outline:medium solid black; width:2em; height:1em;"
+        ></div>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Tag');
     });
 
     it('passes test 33', () => {
-      fixture.innerHTML =
-        '<div id="ID1">foo</div>' +
-        '<a id="test" href="test.html" aria-labelledby="ID1">bar</a>';
+      fixture.innerHTML = html`
+        <div id="ID1">foo</div>
+        <a id="test" href="test.html" aria-labelledby="ID1">bar</a>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
     });
 
     it('passes test 34', () => {
-      fixture.innerHTML =
-        '<a id="test" href="test.html" aria-label="Tag">ABC</a>';
+      fixture.innerHTML = html`
+        <a id="test" href="test.html" aria-label="Tag">ABC</a>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Tag');
     });
 
     it('passes test 35', () => {
-      fixture.innerHTML =
-        '<a href="test.html" id="test" aria-labelledby="ID1" aria-label="Tag">foo</a>' +
-        '<p id="ID1">bar</p>';
+      fixture.innerHTML = html`
+        <a href="test.html" id="test" aria-labelledby="ID1" aria-label="Tag"
+          >foo</a
+        >
+        <p id="ID1">bar</p>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'bar');
     });
 
     it('passes test 36', () => {
-      fixture.innerHTML =
-        '<a href="test.html" id="test" aria-labelledby="test ID1" aria-label="Tag"></a>' +
-        '<p id="ID1">foo</p>';
+      fixture.innerHTML = html`
+        <a
+          href="test.html"
+          id="test"
+          aria-labelledby="test ID1"
+          aria-label="Tag"
+        ></a>
+        <p id="ID1">foo</p>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Tag foo');
     });
 
     it('passes test 37', () => {
-      fixture.innerHTML = '<a href="test.html" id="test">ABC</a>';
+      fixture.innerHTML = html` <a href="test.html" id="test">ABC</a> `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'ABC');
     });
 
     it('passes test 38', () => {
-      fixture.innerHTML = '<a href="test.html" id="test" title="Tag"></a>';
+      fixture.innerHTML = html`
+        <a href="test.html" id="test" title="Tag"></a>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Tag');
     });
 
     it('passes test 39', () => {
-      fixture.innerHTML =
-        '<input id="test" type="text" aria-labelledby="ID1 ID2 ID3">' +
-        '<p id="ID1">foo</p>' +
-        '<p id="ID2">bar</p>' +
-        '<p id="ID3">baz</p>';
+      fixture.innerHTML = html`
+        <input id="test" type="text" aria-labelledby="ID1 ID2 ID3" />
+        <p id="ID1">foo</p>
+        <p id="ID2">bar</p>
+        <p id="ID3">baz</p>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo bar baz');
     });
 
     it('passes test 40', () => {
-      fixture.innerHTML =
-        '<input id="test" type="text" aria-label="bar" aria-labelledby="ID1 test">' +
-        '<div id="ID1">foo</label>';
+      fixture.innerHTML = html`
+        <input id="test" type="text" aria-label="bar" aria-labelledby="ID1 test">
+        <div id="ID1">foo</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo bar');
     });
 
     it('passes test 41', () => {
-      fixture.innerHTML =
-        '<input id="test" type="text"/>' + '<label for="test">foo</label>';
+      fixture.innerHTML = html`
+        <input id="test" type="text" />
+        <label for="test">foo</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
     });
 
     it('passes test 42', () => {
-      fixture.innerHTML =
-        '<input type="password" id="test">' + '<label for="test">foo</label>';
+      fixture.innerHTML = html`
+        <input type="password" id="test" />
+        <label for="test">foo</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
     });
 
     it('passes test 43', () => {
-      fixture.innerHTML =
-        '<input type="checkbox" id="test">' +
-        '<label for="test">foo</label></body>';
+      fixture.innerHTML = html`
+        <input type="checkbox" id="test">
+        <label for="test">foo</label></body>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
     });
 
     it('passes test 44', () => {
-      fixture.innerHTML =
-        '<input type="radio" id="test">' + '<label for="test">foo</label>';
+      fixture.innerHTML = html`
+        <input type="radio" id="test" />
+        <label for="test">foo</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
     });
 
     it('passes test 45', () => {
-      fixture.innerHTML =
-        '<input type="file" id="test">' + '<label for="test">foo</label>';
+      fixture.innerHTML = html`
+        <input type="file" id="test" />
+        <label for="test">foo</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
     });
 
     it('passes test 46', () => {
-      fixture.innerHTML =
-        '<input type="image" id="test">' + '<label for="test">foo</label>';
+      fixture.innerHTML = html`
+        <input type="image" id="test" />
+        <label for="test">foo</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
     });
 
     it('passes test 47', () => {
-      fixture.innerHTML =
-        '<input type="checkbox" id="test">' +
-        '<label for="test">foo<input type="text" value="bar">baz</label>';
+      fixture.innerHTML = html`
+        <input type="checkbox" id="test" />
+        <label for="test">foo<input type="text" value="bar" />baz</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo bar baz');
     });
 
     it('passes test 48', () => {
-      fixture.innerHTML =
-        '<input type="text" id="test">' +
-        '<label for="test">foo<input type="text" value="bar">baz</label>';
+      fixture.innerHTML = html`
+        <input type="text" id="test" />
+        <label for="test">foo<input type="text" value="bar" />baz</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo bar baz');
     });
 
     it('passes test 49', () => {
-      fixture.innerHTML =
-        '<input type="password" id="test">' +
-        '<label for="test">foo<input type="text" value="bar">baz</label>';
+      fixture.innerHTML = html`
+        <input type="password" id="test" />
+        <label for="test">foo<input type="text" value="bar" />baz</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo bar baz');
     });
 
     it('passes test 50', () => {
-      fixture.innerHTML =
-        '<input type="radio" id="test">' +
-        '<label for="test">foo<input type="text" value="bar">baz</label>';
+      fixture.innerHTML = html`
+        <input type="radio" id="test" />
+        <label for="test">foo<input type="text" value="bar" />baz</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo bar baz');
     });
 
     it('passes test 51', () => {
-      fixture.innerHTML =
-        '<input type="file" id="test">' +
-        '<label for="test">foo <input type="text" value="bar"> baz</label>';
+      fixture.innerHTML = html`
+        <input type="file" id="test" />
+        <label for="test">foo <input type="text" value="bar" /> baz</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo bar baz');
     });
 
     pseudoText('passes test 52', () => {
-      fixture.innerHTML =
-        '<style type="text/css">' +
-        '  label:before { content: "foo"; }' +
-        '  label:after { content: "baz"; }' +
-        '</style>' +
-        '<form>' +
-        '  <label for="test" title="bar"><input id="test" type="text" name="test" title="buz"></label> ' +
-        '</form>';
+      fixture.innerHTML = html`
+        <style type="text/css">
+          label:before {
+            content: 'foo';
+          }
+          label:after {
+            content: 'baz';
+          }
+        </style>
+        <form>
+          <label for="test" title="bar"
+            ><input id="test" type="text" name="test" title="buz"
+          /></label>
+        </form>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo bar baz');
     });
 
     pseudoText('passes test 53', () => {
-      fixture.innerHTML =
-        '<style type="text/css">' +
-        '  label:before { content: "foo"; }' +
-        '  label:after { content: "baz"; }' +
-        '</style>' +
-        '<form>' +
-        '  <label for="test" title="bar"><input id="test" type="password" name="test" title="buz"></label> ' +
-        '</form>';
+      fixture.innerHTML = html`
+        <style type="text/css">
+          label:before {
+            content: 'foo';
+          }
+          label:after {
+            content: 'baz';
+          }
+        </style>
+        <form>
+          <label for="test" title="bar"
+            ><input id="test" type="password" name="test" title="buz"
+          /></label>
+        </form>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo bar baz');
     });
 
     pseudoText('passes test 54', () => {
-      fixture.innerHTML =
-        '<style type="text/css">' +
-        '  label:before { content: "foo"; }' +
-        '  label:after { content: "baz"; }' +
-        '</style>' +
-        '<form>' +
-        '  <label for="test"><input id="test" type="checkbox" name="test" title=" bar "></label>' +
-        '</form>';
+      fixture.innerHTML = html`
+        <style type="text/css">
+          label:before {
+            content: 'foo';
+          }
+          label:after {
+            content: 'baz';
+          }
+        </style>
+        <form>
+          <label for="test"
+            ><input id="test" type="checkbox" name="test" title=" bar "
+          /></label>
+        </form>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo baz');
     });
 
     pseudoText('passes test 55', () => {
-      fixture.innerHTML =
-        '<style type="text/css">' +
-        '  label:before { content: "foo"; }' +
-        '  label:after { content: "baz"; }' +
-        '</style>' +
-        '<form>' +
-        '  <label for="test"><input id="test" type="radio" name="test" title=" bar "></label> ' +
-        '</form>';
+      fixture.innerHTML = html`
+        <style type="text/css">
+          label:before {
+            content: 'foo';
+          }
+          label:after {
+            content: 'baz';
+          }
+        </style>
+        <form>
+          <label for="test"
+            ><input id="test" type="radio" name="test" title=" bar "
+          /></label>
+        </form>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo baz');
     });
 
     pseudoText('passes test 56', () => {
-      fixture.innerHTML =
-        '<style type="text/css">' +
-        '  label:before { content: "foo"; }' +
-        '  label:after { content: "baz"; }' +
-        '</style>' +
-        '<form>' +
-        '  <label for="test"><input id="test" type="file" name="test" title="bar"></label>' +
-        '</form>';
+      fixture.innerHTML = html`
+        <style type="text/css">
+          label:before {
+            content: 'foo';
+          }
+          label:after {
+            content: 'baz';
+          }
+        </style>
+        <form>
+          <label for="test"
+            ><input id="test" type="file" name="test" title="bar"
+          /></label>
+        </form>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo baz');
     });
 
     pseudoText('passes test 57', () => {
-      fixture.innerHTML =
-        '<style type="text/css">' +
-        '  label:before { content: "foo"; }' +
-        '  label:after { content: "baz"; }' +
-        '</style>' +
-        '<form>' +
-        '  <label for="test"><input id="test" type="image" src="foo.jpg" name="test" title="bar"></label>' +
-        '</form>';
+      fixture.innerHTML = html`
+        <style type="text/css">
+          label:before {
+            content: 'foo';
+          }
+          label:after {
+            content: 'baz';
+          }
+        </style>
+        <form>
+          <label for="test"
+            ><input
+              id="test"
+              type="image"
+              src="foo.jpg"
+              name="test"
+              title="bar"
+          /></label>
+        </form>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo baz');
     });
 
     it('passes test 58', () => {
-      fixture.innerHTML =
-        '<label for="test">States:</label>' +
-        '<input type="password" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">States:</label>
+        <input type="password" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'States:');
     });
 
     it('passes test 59', () => {
-      fixture.innerHTML =
-        '<label for="test">States:</label>' +
-        '<input type="checkbox" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">States:</label>
+        <input type="checkbox" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'States:');
@@ -2054,7 +2390,7 @@ describe('text.accessibleTextVirtual', () => {
 
     it('passes test 60', () => {
       fixture.innerHTML =
-        '<label for="test">States:</label>' + '<input type="radio" id="test"/>';
+        '<label for="test">States:</label><input type="radio" id="test"/>';
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'States:');
@@ -2062,281 +2398,347 @@ describe('text.accessibleTextVirtual', () => {
 
     it('passes test 61', () => {
       fixture.innerHTML =
-        '<label for="test">File:</label>' + '<input type="file" id="test"/>';
+        '<label for="test">File:</label><input type="file" id="test"/>';
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'File:');
     });
 
     it('passes test 62', () => {
-      fixture.innerHTML =
-        '<label for="test">States:</label>' +
-        '<input type="image" id="test" src="foo.jpg"/>';
+      fixture.innerHTML = html`
+        <label for="test">States:</label>
+        <input type="image" id="test" src="foo.jpg" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'States:');
     });
 
     it('passes test 63', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  foo' +
-        '  <input type="text" value="David"/>' +
-        '</label>' +
-        '<input type="password" id="test" value="baz"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          foo
+          <input type="text" value="David" />
+        </label>
+        <input type="password" id="test" value="baz" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo David');
     });
 
     it('passes test 64', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  foo' +
-        '  <input type="text" value="David"/>' +
-        '</label>' +
-        '<input type="checkbox" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          foo
+          <input type="text" value="David" />
+        </label>
+        <input type="checkbox" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo David');
     });
 
     it('passes test 65', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  foo' +
-        '  <input type="text" value="David"/>' +
-        '</label>' +
-        '<input type="radio" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          foo
+          <input type="text" value="David" />
+        </label>
+        <input type="radio" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo David');
     });
 
     it('passes test 66', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  foo' +
-        '  <input type="text" value="David"/>' +
-        '</label>' +
-        '<input type="file" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          foo
+          <input type="text" value="David" />
+        </label>
+        <input type="file" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo David');
     });
 
     it('passes test 67', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  foo' +
-        '  <input type="text" value="David"/>' +
-        '</label>' +
-        '<input type="image" id="test" src="foo.jpg"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          foo
+          <input type="text" value="David" />
+        </label>
+        <input type="image" id="test" src="foo.jpg" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo David');
     });
 
     it('passes test 68', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <select name="member" size="1" role="menu" tabindex="0">' +
-        '    <option role="menuitem" value="beard" selected="true">clown</option>' +
-        '    <option role="menuitem" value="scuba">rich</option>' +
-        '  </select>' +
-        '</label> ' +
-        '<input type="password" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <select name="member" size="1" role="menu" tabindex="0">
+            <option role="menuitem" value="beard" selected="true">clown</option>
+            <option role="menuitem" value="scuba">rich</option>
+          </select>
+        </label>
+        <input type="password" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy');
     });
 
     it('passes test 69', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <select name="member" size="1" role="menu" tabindex="0">' +
-        '    <option role="menuitem" value="beard" selected="true">clown</option>' +
-        '    <option role="menuitem" value="scuba">rich</option>' +
-        '  </select>' +
-        '</label> ' +
-        '<input type="checkbox" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <select name="member" size="1" role="menu" tabindex="0">
+            <option role="menuitem" value="beard" selected="true">clown</option>
+            <option role="menuitem" value="scuba">rich</option>
+          </select>
+        </label>
+        <input type="checkbox" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy');
     });
 
     it('passes test 70', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <select name="member" size="1" role="menu" tabindex="0">' +
-        '    <option role="menuitem" value="beard" selected="true">clown</option>' +
-        '    <option role="menuitem" value="scuba">rich</option>' +
-        '  </select>' +
-        '</label> ' +
-        '<input type="radio" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <select name="member" size="1" role="menu" tabindex="0">
+            <option role="menuitem" value="beard" selected="true">clown</option>
+            <option role="menuitem" value="scuba">rich</option>
+          </select>
+        </label>
+        <input type="radio" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy');
     });
 
     it('passes test 71', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <select name="member" size="1" role="menu" tabindex="0">' +
-        '    <option role="menuitem" value="beard" selected="true">clown</option>' +
-        '    <option role="menuitem" value="scuba">rich</option>' +
-        '  </select>' +
-        '</label> ' +
-        '<input type="file" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <select name="member" size="1" role="menu" tabindex="0">
+            <option role="menuitem" value="beard" selected="true">clown</option>
+            <option role="menuitem" value="scuba">rich</option>
+          </select>
+        </label>
+        <input type="file" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy');
     });
 
     it('passes test 72', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <select name="member" size="1" role="menu" tabindex="0">' +
-        '    <option role="menuitem" value="beard" selected="true">clown</option>' +
-        '    <option role="menuitem" value="scuba">rich</option>' +
-        '  </select>' +
-        '</label> ' +
-        '<input type="image" id="test" src="foo.jpg"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <select name="member" size="1" role="menu" tabindex="0">
+            <option role="menuitem" value="beard" selected="true">clown</option>
+            <option role="menuitem" value="scuba">rich</option>
+          </select>
+        </label>
+        <input type="image" id="test" src="foo.jpg" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy');
     });
 
     ariaValuetext('passes test 73', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <div role="spinbutton" aria-valuetext="Monday" aria-valuemin="1" aria-valuemax="7" aria-valuenow="4">' +
-        '  </div>' +
-        '</label>' +
-        '<input type="password" value="baz" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuetext="Monday"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="password" value="baz" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy Monday');
     });
 
     ariaValuetext('passes test 74', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <div role="spinbutton" aria-valuetext="Monday"' +
-        '   aria-valuemin="1" aria-valuemax="7" aria-valuenow="4"></div>' +
-        '</label>' +
-        '<input type="checkbox" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuetext="Monday"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="checkbox" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy Monday');
     });
 
     ariaValuetext('passes test 75', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <div role="spinbutton" aria-valuetext="Monday"' +
-        '   aria-valuemin="1" aria-valuemax="7" aria-valuenow="4"></div>' +
-        '</label>' +
-        '<input type="radio" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuetext="Monday"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="radio" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy Monday');
     });
 
     ariaValuetext('passes test 76', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <div role="spinbutton" aria-valuetext="Monday"' +
-        '   aria-valuemin="1" aria-valuemax="7" aria-valuenow="4"></div>' +
-        '</label>' +
-        '<input type="file" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuetext="Monday"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="file" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy Monday');
     });
 
     ariaValuetext('passes test 77', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <div role="spinbutton" aria-valuetext="Monday" aria-valuemin="1"' +
-        '   aria-valuemax="7" aria-valuenow="4"></div>' +
-        '</label>' +
-        '<input type="image" src="foo.jpg" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuetext="Monday"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="image" src="foo.jpg" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy Monday');
     });
 
     it('passes test 78', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <div role="spinbutton" aria-valuemin="1" aria-valuemax="7" aria-valuenow="4">' +
-        '  </div>' +
-        '</label>' +
-        '<input type="password" id="test" value="baz"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="password" id="test" value="baz" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy 4');
     });
 
     it('passes test 79', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <div role="spinbutton" aria-valuemin="1" aria-valuemax="7" aria-valuenow="4">' +
-        '  </div>' +
-        '</label>' +
-        '<input type="checkbox" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="checkbox" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy 4');
     });
 
     it('passes test 80', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <div role="spinbutton" aria-valuemin="1" aria-valuemax="7" aria-valuenow="4">' +
-        '  </div>' +
-        '</label>' +
-        '<input type="radio" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="radio" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy 4');
     });
 
     it('passes test 81', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <div role="spinbutton" aria-valuemin="1" aria-valuemax="7" aria-valuenow="4">' +
-        '  </div>' +
-        '</label>' +
-        '<input type="file" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="file" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy 4');
     });
 
     it('passes test 82', () => {
-      fixture.innerHTML =
-        '<label for="test">' +
-        '  crazy' +
-        '  <div role="spinbutton" aria-valuemin="1" aria-valuemax="7" aria-valuenow="4">' +
-        '  </div>' +
-        '</label>' +
-        '<input type="image" src="foo.jpg" id="test"/>';
+      fixture.innerHTML = html`
+        <label for="test">
+          crazy
+          <div
+            role="spinbutton"
+            aria-valuemin="1"
+            aria-valuemax="7"
+            aria-valuenow="4"
+          ></div>
+        </label>
+        <input type="image" src="foo.jpg" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy 4');
@@ -2351,21 +2753,25 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('passes test 84', () => {
-      fixture.innerHTML = '<input type="checkbox" id="test" title="crazy"/>';
+      fixture.innerHTML = html`
+        <input type="checkbox" id="test" title="crazy" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy');
     });
 
     it('passes test 85', () => {
-      fixture.innerHTML = '<input type="radio" id="test" title="crazy"/>';
+      fixture.innerHTML = html`
+        <input type="radio" id="test" title="crazy" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy');
     });
 
     it('passes test 86', () => {
-      fixture.innerHTML = '<input type="file" id="test" title="crazy"/>';
+      fixture.innerHTML = html` <input type="file" id="test" title="crazy" /> `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'crazy');
@@ -2380,279 +2786,372 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     pseudoText('passes test 88', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:before { content:"fancy "; }' +
-        '</style>' +
-        '<label for="test">fruit</label>' +
-        '<input type="password" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:before {
+            content: 'fancy ';
+          }
+        </style>
+        <label for="test">fruit</label>
+        <input type="password" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'fancy fruit');
     });
 
     pseudoText('passes test 89', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:before { content:"fancy "; }' +
-        '</style>' +
-        '<label for="test">fruit</label>' +
-        '<input type="checkbox" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:before {
+            content: 'fancy ';
+          }
+        </style>
+        <label for="test">fruit</label>
+        <input type="checkbox" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'fancy fruit');
     });
 
     pseudoText('passes test 90', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:before { content:"fancy "; }' +
-        '</style>' +
-        '<label for="test">fruit</label>' +
-        '<input type="radio" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:before {
+            content: 'fancy ';
+          }
+        </style>
+        <label for="test">fruit</label>
+        <input type="radio" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'fancy fruit');
     });
 
     pseudoText('passes test 91', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:before { content:"fancy "; }' +
-        '</style>' +
-        '<label for="test">fruit</label>' +
-        '<input type="file" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:before {
+            content: 'fancy ';
+          }
+        </style>
+        <label for="test">fruit</label>
+        <input type="file" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'fancy fruit');
     });
 
     pseudoText('passes test 92', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:before { content:"fancy "; }' +
-        '</style>' +
-        '<label for="test">fruit</label>' +
-        '<input type="image" src="foo.jpg" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:before {
+            content: 'fancy ';
+          }
+        </style>
+        <label for="test">fruit</label>
+        <input type="image" src="foo.jpg" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'fancy fruit');
     });
 
     pseudoText('passes test 93', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:after { content:" fruit"; }' +
-        '</style>' +
-        '<label for="test">fancy</label>' +
-        '<input type="password" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:after {
+            content: ' fruit';
+          }
+        </style>
+        <label for="test">fancy</label>
+        <input type="password" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'fancy fruit');
     });
 
     pseudoText('passes test 94', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:after { content:" fruit"; }' +
-        '</style>' +
-        '<label for="test">fancy</label>' +
-        '<input type="checkbox" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:after {
+            content: ' fruit';
+          }
+        </style>
+        <label for="test">fancy</label>
+        <input type="checkbox" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'fancy fruit');
     });
 
     pseudoText('passes test 95', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:after { content:" fruit"; }' +
-        '</style>' +
-        '<label for="test">fancy</label>' +
-        '<input type="radio" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:after {
+            content: ' fruit';
+          }
+        </style>
+        <label for="test">fancy</label>
+        <input type="radio" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'fancy fruit');
     });
 
     pseudoText('passes test 96', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:after { content:" fruit"; }' +
-        '</style>' +
-        '<label for="test">fancy</label>' +
-        '<input type="file" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:after {
+            content: ' fruit';
+          }
+        </style>
+        <label for="test">fancy</label>
+        <input type="file" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'fancy fruit');
     });
 
     pseudoText('passes test 97', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:after { content:" fruit"; }' +
-        '</style>' +
-        '<label for="test">fancy</label>' +
-        '<input type="image" src="foo.jpg" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:after {
+            content: ' fruit';
+          }
+        </style>
+        <label for="test">fancy</label>
+        <input type="image" src="foo.jpg" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'fancy fruit');
     });
 
     it('passes test 98', () => {
-      fixture.innerHTML =
-        '<input type="checkbox" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <div role="combobox">' +
-        '    <div role="textbox"></div>' +
-        '    <ul role="listbox" style="list-style-type: none;">' +
-        '      <li role="option" aria-selected="true">1</li>' +
-        ' 	<li role="option">2</li>' +
-        ' 	<li role="option">3</li>' +
-        '    </ul>' +
-        '  </div>' +
-        '  times.' +
-        '</label>';
-      axe.testUtils.flatTreeSetup(fixture);
-      const target = fixture.querySelector('#test');
-      // Chrome 72: "Flash the screen 1 times"
-      // Safari 12.0: "Flash the screen 1 times"
-      // Firefox 62: "Flash the screen 1 times"
+      fixture.innerHTML = html`
+        <input type="checkbox" id="test" />
+        <label for="test"
+          >Flash the screen
+          <div role="combobox">
+            <div role="textbox"></div>
+            <ul role="listbox" style="list-style-type: none;">
+              <li role="option" aria-selected="true">1</li>
+              <li role="option">2</li>
+              <li role="option">3</li>
+            </ul>
+          </div>
+          times.
+        </label>
+      `;
+      axe.testUtils.flatTreeSetup(fixture);
+      const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 99', () => {
-      fixture.innerHTML =
-        '<input type="checkbox" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <span role="menu">' +
-        '    <span role="menuitem" aria-selected="true">1</span>' +
-        '      <span role="menuitem" hidden>2</span>' +
-        ' 	<span role="menuitem" hidden>3</span>' +
-        '    </span>' +
-        '    times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="checkbox" id="test" />
+        <label for="test"
+          >Flash the screen
+          <span role="menu">
+            <span role="menuitem" aria-selected="true">1</span>
+            <span role="menuitem" hidden>2</span>
+            <span role="menuitem" hidden>3</span>
+          </span>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen times.');
     });
 
     it('passes test 100', () => {
-      fixture.innerHTML =
-        '<input type="checkbox" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <select size="1">' +
-        '    <option selected="selected">1</option>' +
-        '    <option>2</option>' +
-        '    <option>3</option>' +
-        '  </select>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="checkbox" id="test" />
+        <label for="test"
+          >Flash the screen
+          <select size="1">
+            <option selected="selected">1</option>
+            <option>2</option>
+            <option>3</option>
+          </select>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 101', () => {
-      fixture.innerHTML =
-        '<input type="checkbox" id="test" />' +
-        '<label for="test">foo <input role="slider" type="range" value="5" min="1" max="10" aria-valuenow="5" aria-valuemin="1" aria-valuemax="10"> baz   	' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="checkbox" id="test" />
+        <label for="test"
+          >foo
+          <input
+            role="slider"
+            type="range"
+            value="5"
+            min="1"
+            max="10"
+            aria-valuenow="5"
+            aria-valuemin="1"
+            aria-valuemax="10"
+          />
+          baz
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo 5 baz');
     });
 
     it('passes test 102', () => {
-      fixture.innerHTML =
-        '<input type="checkbox" id="test" />' +
-        '<label for="test">foo <input role="spinbutton" type="number" value="5" min="1" max="10" aria-valuenow="5" aria-valuemin="1" aria-valuemax="10"> baz' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="checkbox" id="test" />
+        <label for="test"
+          >foo
+          <input
+            role="spinbutton"
+            type="number"
+            value="5"
+            min="1"
+            max="10"
+            aria-valuenow="5"
+            aria-valuemin="1"
+            aria-valuemax="10"
+          />
+          baz
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo 5 baz');
     });
 
     it('passes test 103', () => {
-      fixture.innerHTML = '<input type="checkbox" id="test" title="foo" />';
+      fixture.innerHTML = html`
+        <input type="checkbox" id="test" title="foo" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
     });
 
     it('passes test 104', () => {
-      fixture.innerHTML =
-        '<input type="file" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <div role="combobox">' +
-        '    <div role="textbox"></div>' +
-        '    <ul role="listbox" style="list-style-type: none;">' +
-        '      <li role="option" aria-selected="true">1 </li>' +
-        ' 	<li role="option">2 </li>' +
-        ' 	<li role="option">3 </li>' +
-        '    </ul>' +
-        '  </div>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="file" id="test" />
+        <label for="test"
+          >Flash the screen
+          <div role="combobox">
+            <div role="textbox"></div>
+            <ul role="listbox" style="list-style-type: none;">
+              <li role="option" aria-selected="true">1</li>
+              <li role="option">2</li>
+              <li role="option">3</li>
+            </ul>
+          </div>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 105', () => {
-      fixture.innerHTML =
-        '<input type="file" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <span role="menu">' +
-        '    <span role="menuitem" aria-selected="true">1</span>' +
-        '    <span role="menuitem" hidden>2</span>' +
-        '    <span role="menuitem" hidden>3</span>' +
-        '  </span>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="file" id="test" />
+        <label for="test"
+          >Flash the screen
+          <span role="menu">
+            <span role="menuitem" aria-selected="true">1</span>
+            <span role="menuitem" hidden>2</span>
+            <span role="menuitem" hidden>3</span>
+          </span>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen times.');
     });
 
     it('passes test 106', () => {
-      fixture.innerHTML =
-        '<input type="file" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <select size="1">' +
-        '    <option selected="selected">1</option>' +
-        '    <option>2</option>' +
-        '    <option>3</option>' +
-        '  </select>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="file" id="test" />
+        <label for="test"
+          >Flash the screen
+          <select size="1">
+            <option selected="selected">1</option>
+            <option>2</option>
+            <option>3</option>
+          </select>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 107', () => {
-      fixture.innerHTML =
-        '<input type="file" id="test" />' +
-        '<label for="test">foo <input role="slider" type="range" value="5" min="1" max="10" aria-valuenow="5" aria-valuemin="1" aria-valuemax="10"> baz' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="file" id="test" />
+        <label for="test"
+          >foo
+          <input
+            role="slider"
+            type="range"
+            value="5"
+            min="1"
+            max="10"
+            aria-valuenow="5"
+            aria-valuemin="1"
+            aria-valuemax="10"
+          />
+          baz
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo 5 baz');
     });
 
     it('passes test 108', () => {
-      fixture.innerHTML =
-        '<input type="file" id="test" />' +
-        '<label for="test">foo <input role="spinbutton" type="number" value="5" min="1" max="10" aria-valuenow="5" aria-valuemin="1" aria-valuemax="10"> baz' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="file" id="test" />
+        <label for="test"
+          >foo
+          <input
+            role="spinbutton"
+            type="number"
+            value="5"
+            min="1"
+            max="10"
+            aria-valuenow="5"
+            aria-valuemin="1"
+            aria-valuemax="10"
+          />
+          baz
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo 5 baz');
     });
 
     it('passes test 109', () => {
-      fixture.innerHTML = '<input type="file" id="test" title="foo" />';
+      fixture.innerHTML = html` <input type="file" id="test" title="foo" /> `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
@@ -2667,246 +3166,332 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('passes test 111', () => {
-      fixture.innerHTML =
-        '<input type="password" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <div role="combobox">' +
-        '    <div role="textbox"></div>' +
-        '    <ul role="listbox" style="list-style-type: none;">' +
-        '      <li role="option" aria-selected="true">1</li>' +
-        ' 	<li role="option">2</li>' +
-        ' 	<li role="option">3</li>' +
-        '    </ul>' +
-        '  </div>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="password" id="test" />
+        <label for="test"
+          >Flash the screen
+          <div role="combobox">
+            <div role="textbox"></div>
+            <ul role="listbox" style="list-style-type: none;">
+              <li role="option" aria-selected="true">1</li>
+              <li role="option">2</li>
+              <li role="option">3</li>
+            </ul>
+          </div>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 112', () => {
-      fixture.innerHTML =
-        '<input type="password" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <span role="menu">' +
-        '    <span role="menuitem" aria-selected="true">1</span>' +
-        '    <span role="menuitem" hidden>2</span>' +
-        '    <span role="menuitem" hidden>3</span>' +
-        '  </span>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="password" id="test" />
+        <label for="test"
+          >Flash the screen
+          <span role="menu">
+            <span role="menuitem" aria-selected="true">1</span>
+            <span role="menuitem" hidden>2</span>
+            <span role="menuitem" hidden>3</span>
+          </span>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen times.');
     });
 
     it('passes test 113', () => {
-      fixture.innerHTML =
-        '<input type="password" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <select size="1">' +
-        '    <option selected="selected">1</option>' +
-        '    <option>2</option>' +
-        '    <option>3</option>' +
-        '  </select>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="password" id="test" />
+        <label for="test"
+          >Flash the screen
+          <select size="1">
+            <option selected="selected">1</option>
+            <option>2</option>
+            <option>3</option>
+          </select>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 114', () => {
-      fixture.innerHTML =
-        '<input type="password" id="test" />' +
-        '<label for="test">foo <input role="slider" type="range" value="5" min="1" max="10" aria-valuenow="5" aria-valuemin="1" aria-valuemax="10"> baz' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="password" id="test" />
+        <label for="test"
+          >foo
+          <input
+            role="slider"
+            type="range"
+            value="5"
+            min="1"
+            max="10"
+            aria-valuenow="5"
+            aria-valuemin="1"
+            aria-valuemax="10"
+          />
+          baz
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo 5 baz');
     });
 
     it('passes test 115', () => {
-      fixture.innerHTML =
-        '<input type="password" id="test" />' +
-        '<label for="test">foo <input role="spinbutton" type="number" value="5" min="1" max="10" aria-valuenow="5" aria-valuemin="1" aria-valuemax="10"> baz' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="password" id="test" />
+        <label for="test"
+          >foo
+          <input
+            role="spinbutton"
+            type="number"
+            value="5"
+            min="1"
+            max="10"
+            aria-valuenow="5"
+            aria-valuemin="1"
+            aria-valuemax="10"
+          />
+          baz
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo 5 baz');
     });
 
     it('passes test 116', () => {
-      fixture.innerHTML = '<input type="password" id="test" title="foo" />';
+      fixture.innerHTML = html`
+        <input type="password" id="test" title="foo" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
     });
 
     it('passes test 117', () => {
-      fixture.innerHTML =
-        '<input type="radio" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <div role="combobox">' +
-        '    <div role="textbox"></div>' +
-        '    <ul role="listbox" style="list-style-type: none;">' +
-        '      <li role="option" aria-selected="true">1</li>' +
-        ' 	   <li role="option">2</li>' +
-        ' 	   <li role="option">3</li>' +
-        '    </ul>' +
-        '  </div>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="radio" id="test" />
+        <label for="test"
+          >Flash the screen
+          <div role="combobox">
+            <div role="textbox"></div>
+            <ul role="listbox" style="list-style-type: none;">
+              <li role="option" aria-selected="true">1</li>
+              <li role="option">2</li>
+              <li role="option">3</li>
+            </ul>
+          </div>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 118', () => {
-      fixture.innerHTML =
-        '<input type="radio" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <span role="menu">' +
-        '    <span role="menuitem" aria-selected="true">1</span>' +
-        '    <span role="menuitem" hidden>2</span>' +
-        '    <span role="menuitem" hidden>3</span>' +
-        '  </span>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="radio" id="test" />
+        <label for="test"
+          >Flash the screen
+          <span role="menu">
+            <span role="menuitem" aria-selected="true">1</span>
+            <span role="menuitem" hidden>2</span>
+            <span role="menuitem" hidden>3</span>
+          </span>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen times.');
     });
 
     it('passes test 119', () => {
-      fixture.innerHTML =
-        '<input type="radio" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <select size="1">' +
-        '    <option selected="selected">1</option>' +
-        '    <option>2</option>' +
-        '    <option>3</option>' +
-        '  </select>' +
-        '  times.' +
-        '</label>';
-      axe.testUtils.flatTreeSetup(fixture);
-      const target = fixture.querySelector('#test');
-      // Chrome 72: "Flash the screen 1 times"
-      // Firefox 62: "Flash the screen 1 times"
-      // Safari 12.0: "Flash the screen 1 times"
+      fixture.innerHTML = html`
+        <input type="radio" id="test" />
+        <label for="test"
+          >Flash the screen
+          <select size="1">
+            <option selected="selected">1</option>
+            <option>2</option>
+            <option>3</option>
+          </select>
+          times.
+        </label>
+      `;
+      axe.testUtils.flatTreeSetup(fixture);
+      const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 120', () => {
-      fixture.innerHTML =
-        '<input type="radio" id="test" />' +
-        '<label for="test">foo <input role="slider" type="range" value="5" min="1" max="10" aria-valuenow="5" aria-valuemin="1" aria-valuemax="10"> baz' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="radio" id="test" />
+        <label for="test"
+          >foo
+          <input
+            role="slider"
+            type="range"
+            value="5"
+            min="1"
+            max="10"
+            aria-valuenow="5"
+            aria-valuemin="1"
+            aria-valuemax="10"
+          />
+          baz
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
-      // Chrome 70: Foo 5 baz
-      // Firefox 62: Foo 5 baz
-      // Safari 12.0: Foo 5 baz
       assert.equal(accessibleText(target), 'foo 5 baz');
     });
 
     it('passes test 121', () => {
-      fixture.innerHTML =
-        '<input type="radio" id="test" />' +
-        '<label for="test">foo <input role="spinbutton"  type="number" value="5" min="1" max="10" aria-valuenow="5" aria-valuemin="1" aria-valuemax="10"> baz' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="radio" id="test" />
+        <label for="test"
+          >foo
+          <input
+            role="spinbutton"
+            type="number"
+            value="5"
+            min="1"
+            max="10"
+            aria-valuenow="5"
+            aria-valuemin="1"
+            aria-valuemax="10"
+          />
+          baz
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo 5 baz');
     });
 
     it('passes test 122', () => {
-      fixture.innerHTML = '<input type="radio" id="test" title="foo" />';
+      fixture.innerHTML = html` <input type="radio" id="test" title="foo" /> `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
     });
 
     it('passes test 123', () => {
-      fixture.innerHTML =
-        '<input type="text" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <div role="combobox">' +
-        '    <div role="textbox"></div>' +
-        '    <ul role="listbox" style="list-style-type: none;">' +
-        '      <li role="option" aria-selected="true">1</li>' +
-        ' 	   <li role="option">2</li>' +
-        ' 	   <li role="option">3</li>' +
-        '    </ul>' +
-        '  </div>' +
-        '  times.' +
-        '</label>';
-      axe.testUtils.flatTreeSetup(fixture);
-      const target = fixture.querySelector('#test');
-      // Chrome 72: "Flash the screen 1 times."
-      // Firefox 62: "Flash the screen 1 times."
-      // Safari 12.0: "Flash the screen 1 times."
+      fixture.innerHTML = html`
+        <input type="text" id="test" />
+        <label for="test"
+          >Flash the screen
+          <div role="combobox">
+            <div role="textbox"></div>
+            <ul role="listbox" style="list-style-type: none;">
+              <li role="option" aria-selected="true">1</li>
+              <li role="option">2</li>
+              <li role="option">3</li>
+            </ul>
+          </div>
+          times.
+        </label>
+      `;
+      axe.testUtils.flatTreeSetup(fixture);
+      const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 124', () => {
-      fixture.innerHTML =
-        '<input type="text" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <span role="menu">' +
-        '    <span role="menuitem" aria-selected="true">1</span>' +
-        '    <span role="menuitem" hidden>2</span>' +
-        '    <span role="menuitem" hidden>3</span>' +
-        '  </span>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="text" id="test" />
+        <label for="test"
+          >Flash the screen
+          <span role="menu">
+            <span role="menuitem" aria-selected="true">1</span>
+            <span role="menuitem" hidden>2</span>
+            <span role="menuitem" hidden>3</span>
+          </span>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen times.');
     });
 
     it('passes test 125', () => {
-      fixture.innerHTML =
-        '<input type="text" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <select size="1">' +
-        '    <option selected="selected">1</option>' +
-        '    <option>2</option>' +
-        '    <option>3</option>' +
-        '  </select>' +
-        '  times.' +
-        '</label>';
-      axe.testUtils.flatTreeSetup(fixture);
-      const target = fixture.querySelector('#test');
-      // Chrome 72: Flash the screen 1 times
-      // Firefox 62: Flash the screen 1 times
-      // Safari 12.0: Flash the screen 1 times
+      fixture.innerHTML = html`
+        <input type="text" id="test" />
+        <label for="test"
+          >Flash the screen
+          <select size="1">
+            <option selected="selected">1</option>
+            <option>2</option>
+            <option>3</option>
+          </select>
+          times.
+        </label>
+      `;
+      axe.testUtils.flatTreeSetup(fixture);
+      const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 126', () => {
-      fixture.innerHTML =
-        '<input type="text" id="test" />' +
-        '<label for="test">foo <input role="slider" type="range" value="5" min="1" max="10" aria-valuenow="5" aria-valuemin="1" aria-valuemax="10"> baz' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="text" id="test" />
+        <label for="test"
+          >foo
+          <input
+            role="slider"
+            type="range"
+            value="5"
+            min="1"
+            max="10"
+            aria-valuenow="5"
+            aria-valuemin="1"
+            aria-valuemax="10"
+          />
+          baz
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo 5 baz');
     });
 
     it('passes test 127', () => {
-      fixture.innerHTML =
-        '<input type="text" id="test" />' +
-        '<label for="test">foo <input role="spinbutton" type="number" value="5" min="1" max="10" aria-valuenow="5" aria-valuemin="1" aria-valuemax="10"> baz' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="text" id="test" />
+        <label for="test"
+          >foo
+          <input
+            role="spinbutton"
+            type="number"
+            value="5"
+            min="1"
+            max="10"
+            aria-valuenow="5"
+            aria-valuemin="1"
+            aria-valuemax="10"
+          />
+          baz
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo 5 baz');
     });
 
     it('passes test 128', () => {
-      fixture.innerHTML = '<input type="text" id="test" title="foo" />';
+      fixture.innerHTML = html` <input type="text" id="test" title="foo" /> `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'foo');
@@ -2915,35 +3500,42 @@ describe('text.accessibleTextVirtual', () => {
     // Skip from 128 - 138 as those are name description cases
 
     it('passes test 139', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  .hidden { display: none; }' +
-        '</style>' +
-        '<div id="test" role="link" tabindex="0">' +
-        '  <span aria-hidden="true"><i> Hello, </i></span>' +
-        '  <span>My</span> name is' +
-        '  <div><img src="file.jpg" title="Bryan" alt="" role="presentation" /></div>' +
-        '  <span role="presentation" aria-label="Eli">' +
-        '    <span aria-label="Garaventa">Zambino</span>' +
-        '  </span>' +
-        '  <span>the weird.</span>' +
-        '  (QED)' +
-        '  <span  class="hidden"><i><b>and don\'t you forget it.</b></i></span>' +
-        '  <table>' +
-        '    <tr>' +
-        '      <td>Where</td>' +
-        '      <td style="visibility:hidden;"><div>in</div></td>' +
-        '      <td><div style="display:none;">the world</div></td>' +
-        '      <td>are my marbles?</td>' +
-        '    </tr>' +
-        '  </table>' +
-        '</div>';
-
-      axe.testUtils.flatTreeSetup(fixture);
-      const target = fixture.querySelector('#test');
-      // Chrome 72: "My name is Eli the weird. (QED) Where are my marbles?"
-      // Safari 12.0: "My name is Eli the weird. (QED) Where are my marbles?"
-      // Firefox 62: "Hello, My name is Eli the weird. (QED)"
+      fixture.innerHTML = html`
+        <style>
+          .hidden {
+            display: none;
+          }
+        </style>
+        <div id="test" role="link" tabindex="0">
+          <span aria-hidden="true"><i> Hello, </i></span>
+          <span>My</span> name is
+          <div>
+            <img src="file.jpg" title="Bryan" alt="" role="presentation" />
+          </div>
+          <span role="presentation" aria-label="Eli">
+            <span aria-label="Garaventa">Zambino</span>
+          </span>
+          <span>the weird.</span>
+          (QED)
+          <span class="hidden"
+            ><i><b>and don't you forget it.</b></i></span
+          >
+          <table>
+            <tr>
+              <td>Where</td>
+              <td style="visibility:hidden;"><div>in</div></td>
+              <td><div style="display:none;">the world</div></td>
+              <td>are my marbles?</td>
+            </tr>
+          </table>
+        </div>
+      `;
+
+      axe.testUtils.flatTreeSetup(fixture);
+      const target = fixture.querySelector('#test');
+      // Chrome 114: "My name is Garaventa the weird. (QED) Where are my marbles?""
+      // Firefox 115: "My name is Bryan Eli the weird. (QED) Where are my marbles?"
+      // Safari 16.5: "My name is Eli the weird. (QED) Where are my marbles?"
       assert.equal(
         accessibleText(target),
         'My name is Eli the weird. (QED) Where are my marbles?'
@@ -2951,30 +3543,37 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('passes test 140', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  .hidden { display: none; }' +
-        '</style>' +
-        '<input id="test" type="text" aria-labelledby="lblId" />' +
-        '<div id="lblId" >' +
-        '  <span aria-hidden="true"><i> Hello, </i></span>' +
-        '  <span>My</span> name is' +
-        '  <div><img src="file.jpg" title="Bryan" alt="" role="presentation" /></div>' +
-        '  <span role="presentation" aria-label="Eli">' +
-        '    <span aria-label="Garaventa">Zambino</span>' +
-        '  </span>' +
-        '  <span>the weird.</span>' +
-        '  (QED)' +
-        '  <span class="hidden"><i><b>and don\'t you forget it.</b></i></span>' +
-        '  <table>' +
-        '    <tr>' +
-        '      <td>Where</td>' +
-        '      <td style="visibility:hidden;"><div>in</div></td>' +
-        '      <td><div style="display:none;">the world</div></td>' +
-        '      <td>are my marbles?</td>' +
-        '    </tr>' +
-        '  </table>' +
-        '</div>';
+      fixture.innerHTML = html`
+        <style>
+          .hidden {
+            display: none;
+          }
+        </style>
+        <input id="test" type="text" aria-labelledby="lblId" />
+        <div id="lblId">
+          <span aria-hidden="true"><i> Hello, </i></span>
+          <span>My</span> name is
+          <div>
+            <img src="file.jpg" title="Bryan" alt="" role="presentation" />
+          </div>
+          <span role="presentation" aria-label="Eli">
+            <span aria-label="Garaventa">Zambino</span>
+          </span>
+          <span>the weird.</span>
+          (QED)
+          <span class="hidden"
+            ><i><b>and don't you forget it.</b></i></span
+          >
+          <table>
+            <tr>
+              <td>Where</td>
+              <td style="visibility:hidden;"><div>in</div></td>
+              <td><div style="display:none;">the world</div></td>
+              <td>are my marbles?</td>
+            </tr>
+          </table>
+        </div>
+      `;
 
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
@@ -2987,30 +3586,37 @@ describe('text.accessibleTextVirtual', () => {
     // Disabling this, axe has a buggy implicitName computation
     //  shouldn't be a big deal
     xit('passes test 141', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  .hidden { display: none; }' +
-        '</style>' +
-        '<input type="text" id="test" />' +
-        '<label for="test" id="label">' +
-        '  <span aria-hidden="true"><i> Hello, </i></span>' +
-        '  <span>My</span> name is' +
-        '  <div><img src="file.jpg" title="Bryan" alt="" role="presentation" /></div>' +
-        '  <span role="presentation" aria-label="Eli">' +
-        '    <span aria-label="Garaventa">Zambino</span>' +
-        ' </span>' +
-        ' <span>the weird.</span>' +
-        ' (QED)' +
-        ' <span class="hidden"><i><b>and don\'t you forget it.</b></i></span>' +
-        ' <table>' +
-        '   <tr>' +
-        '     <td>Where</td>' +
-        '     <td style="visibility:hidden;"><div>in</div></td>' +
-        '     <td><div style="display:none;">the world</div></td>' +
-        '     <td>are my marbles?</td>' +
-        '  </tr>' +
-        ' </table>' +
-        '</label>';
+      fixture.innerHTML = html`
+        <style>
+          .hidden {
+            display: none;
+          }
+        </style>
+        <input type="text" id="test" />
+        <label for="test" id="label">
+          <span aria-hidden="true"><i> Hello, </i></span>
+          <span>My</span> name is
+          <div>
+            <img src="file.jpg" title="Bryan" alt="" role="presentation" />
+          </div>
+          <span role="presentation" aria-label="Eli">
+            <span aria-label="Garaventa">Zambino</span>
+          </span>
+          <span>the weird.</span>
+          (QED)
+          <span class="hidden"
+            ><i><b>and don't you forget it.</b></i></span
+          >
+          <table>
+            <tr>
+              <td>Where</td>
+              <td style="visibility:hidden;"><div>in</div></td>
+              <td><div style="display:none;">the world</div></td>
+              <td>are my marbles?</td>
+            </tr>
+          </table>
+        </label>
+      `;
 
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
@@ -3021,40 +3627,52 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('passes test 143', () => {
-      fixture.innerHTML =
-        '  <style>' +
-        '    .hidden { display: none; }' +
-        '  </style>' +
-        '  <div>' +
-        '    <input id="test" type="text" aria-labelledby="lbl1 lbl2" aria-describedby="descId" />' +
-        '    <span>' +
-        '      <span aria-hidden="true" id="lbl1">Important</span>' +
-        '      <span class="hidden">' +
-        '        <span aria-hidden="true" id="lbl2">stuff</span>' +
-        '      </span>' +
-        '    </span>' +
-        '  </div>' +
-        '  <div class="hidden">' +
-        '    <div id="descId">' +
-        '      <span aria-hidden="true"><i> Hello, </i></span>' +
-        '      <span>My</span> name is' +
-        '      <div><img src="file.jpg" title="Bryan" alt="" role="presentation" /></div>' +
-        '      <span role="presentation" aria-label="Eli">' +
-        '        <span aria-label="Garaventa">Zambino</span>' +
-        '      </span>' +
-        '      <span>the weird.</span>' +
-        '      (QED)' +
-        '      <span class="hidden"><i><b>and don\'t you forget it.</b></i></span>' +
-        '      <table>' +
-        '        <tr>' +
-        '          <td>Where</td>' +
-        '          <td style="visibility:hidden;"><div>in</div></td>' +
-        '          <td><div style="display:none;">the world</div></td>' +
-        '          <td>are my marbles?</td>' +
-        '        </tr>' +
-        '      </table>' +
-        '    </div>' +
-        '  </div>';
+      fixture.innerHTML = html`
+        <style>
+          .hidden {
+            display: none;
+          }
+        </style>
+        <div>
+          <input
+            id="test"
+            type="text"
+            aria-labelledby="lbl1 lbl2"
+            aria-describedby="descId"
+          />
+          <span>
+            <span aria-hidden="true" id="lbl1">Important</span>
+            <span class="hidden">
+              <span aria-hidden="true" id="lbl2">stuff</span>
+            </span>
+          </span>
+        </div>
+        <div class="hidden">
+          <div id="descId">
+            <span aria-hidden="true"><i> Hello, </i></span>
+            <span>My</span> name is
+            <div>
+              <img src="file.jpg" title="Bryan" alt="" role="presentation" />
+            </div>
+            <span role="presentation" aria-label="Eli">
+              <span aria-label="Garaventa">Zambino</span>
+            </span>
+            <span>the weird.</span>
+            (QED)
+            <span class="hidden"
+              ><i><b>and don't you forget it.</b></i></span
+            >
+            <table>
+              <tr>
+                <td>Where</td>
+                <td style="visibility:hidden;"><div>in</div></td>
+                <td><div style="display:none;">the world</div></td>
+                <td>are my marbles?</td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Important stuff');
@@ -3069,175 +3687,227 @@ describe('text.accessibleTextVirtual', () => {
     });
 
     it('passes test 145', () => {
-      fixture.innerHTML =
-        '<div id="test" role="combobox" tabindex="0" title="Choose your language.">' +
-        '  <span> English </span>' +
-        '</div>';
+      fixture.innerHTML = html`
+        <div
+          id="test"
+          role="combobox"
+          tabindex="0"
+          title="Choose your language."
+        >
+          <span> English </span>
+        </div>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Choose your language.');
     });
 
     it('passes test 147', () => {
-      fixture.innerHTML =
-        '<input type="checkbox" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <ul role="listbox" style="list-style-type: none;">' +
-        '    <li role="option" aria-selected="true">1</li>' +
-        '    <li role="option">2</li>' +
-        '    <li role="option">3</li>' +
-        '  </ul>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="checkbox" id="test" />
+        <label for="test"
+          >Flash the screen
+          <ul role="listbox" style="list-style-type: none;">
+            <li role="option" aria-selected="true">1</li>
+            <li role="option">2</li>
+            <li role="option">3</li>
+          </ul>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     pseudoText('passes test 148', () => {
-      fixture.innerHTML =
-        '<input type="checkbox" id="test" />' +
-        '<label for="test">Flash the screen ' +
-        '  <div role="textbox" contenteditable>1</div>' +
-        '  times.' +
-        '</label>';
+      fixture.innerHTML = html`
+        <input type="checkbox" id="test" />
+        <label for="test"
+          >Flash the screen
+          <div role="textbox" contenteditable>1</div>
+          times.
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 149', () => {
-      fixture.innerHTML =
-        '<label for="test">a test</label>' +
-        '<label>This <input type="checkbox" id="test" /> is</label>';
+      fixture.innerHTML = html`
+        <label for="test">a test</label>
+        <label>This <input type="checkbox" id="test" /> is</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'a test This is');
     });
 
     it('passes test 150', () => {
-      fixture.innerHTML =
-        '<label>This <input type="checkbox" id="test" /> is</label>' +
-        '<label for="test">a test</label>';
+      fixture.innerHTML = html`
+        <label>This <input type="checkbox" id="test" /> is</label>
+        <label for="test">a test</label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'This is a test');
     });
 
     it('passes test 151', () => {
-      fixture.innerHTML =
-        '<input type="file" id="test" />' +
-        '<label for="test">W<i>h<b>a</b></i>t<br>is<div>your<div>name<b>?</b></div></div></label>';
+      fixture.innerHTML = html`
+        <input type="file" id="test" />
+        <label for="test"
+          >W<i>h<b>a</b></i
+          >t<br />is
+          <div>
+            your
+            <div>name<b>?</b></div>
+          </div></label
+        >
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'What is your name?');
     });
 
     pseudoText('passes test 152', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  label:before { content: "This"; display: block; }' +
-        '  label:after { content: "."; }' +
-        '</style>' +
-        '<label for="test">is a test</label>' +
-        '<input type="text" id="test"/>';
+      fixture.innerHTML = html`
+        <style>
+          label:before {
+            content: 'This';
+            display: block;
+          }
+          label:after {
+            content: '.';
+          }
+        </style>
+        <label for="test">is a test</label>
+        <input type="text" id="test" />
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'This is a test.');
     });
 
     it('passes test 153', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  .hidden { display: none; }' +
-        '</style>' +
-        '<input type="file" id="test" />' +
-        '<label for="test">' +
-        '  <span class="hidden">1</span><span>2</span>' +
-        '  <span style="visibility: hidden;">3</span><span>4</span>' +
-        '  <span hidden>5</span><span>6</span>' +
-        '  <span aria-hidden="true">7</span><span>8</span>' +
-        '  <span aria-hidden="false" class="hidden">9</span><span>10</span>' +
-        '</label>';
+      fixture.innerHTML = html`
+        <style>
+          .hidden {
+            display: none;
+          }
+        </style>
+        <input type="file" id="test" />
+        <label for="test">
+          <span class="hidden">1</span><span>2</span>
+          <span style="visibility: hidden;">3</span><span>4</span>
+          <span hidden>5</span><span>6</span> <span aria-hidden="true">7</span
+          ><span>8</span> <span aria-hidden="false" class="hidden">9</span
+          ><span>10</span>
+        </label>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), '2 4 6 8 10');
     });
 
     it('passes test 154', () => {
-      fixture.innerHTML =
-        '<input type="file" id="test" />' +
-        '<label for="test">Flash <span aria-owns="id1">the screen</span> times.</label>' +
-        '<div>' +
-        '  <div id="id1" role="combobox" aria-owns="id2">' +
-        '    <div role="textbox"></div>' +
-        '  </div>' +
-        '</div>' +
-        '<div>' +
-        '  <ul id="id2" role="listbox" style="list-style-type: none;">' +
-        '    <li role="option" >1 </li>' +
-        '    <li role="option" aria-selected="true">2 </li>' +
-        '    <li role="option">3 </li>' +
-        '  </ul>' +
-        '</div>';
+      fixture.innerHTML = html`
+        <input type="file" id="test" />
+        <label for="test"
+          >Flash <span aria-owns="id1">the screen</span> times.</label
+        >
+        <div>
+          <div id="id1" role="combobox" aria-owns="id2">
+            <div role="textbox"></div>
+          </div>
+        </div>
+        <div>
+          <ul id="id2" role="listbox" style="list-style-type: none;">
+            <li role="option">1</li>
+            <li role="option" aria-selected="true">2</li>
+            <li role="option">3</li>
+          </ul>
+        </div>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 2 times.');
     });
 
     it('passes test 155', () => {
-      fixture.innerHTML =
-        '<input type="file" id="test" />' +
-        '<label for="test">Flash <span aria-owns="id1">the screen</span> times.</label>' +
-        '<div id="id1">' +
-        '  <div role="combobox">' +
-        '    <div role="textbox"></div>' +
-        '    <ul role="listbox" style="list-style-type: none;">' +
-        '      <li role="option" aria-selected="true">1 </li>' +
-        ' 	<li role="option">2 </li>' +
-        ' 	<li role="option">3 </li>' +
-        '    </ul>' +
-        '  </div>' +
-        '</div>';
+      fixture.innerHTML = html`
+        <input type="file" id="test" />
+        <label for="test"
+          >Flash <span aria-owns="id1">the screen</span> times.</label
+        >
+        <div id="id1">
+          <div role="combobox">
+            <div role="textbox"></div>
+            <ul role="listbox" style="list-style-type: none;">
+              <li role="option" aria-selected="true">1</li>
+              <li role="option">2</li>
+              <li role="option">3</li>
+            </ul>
+          </div>
+        </div>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Flash the screen 1 times.');
     });
 
     it('passes test 156', () => {
-      fixture.innerHTML =
-        '<style>' +
-        '  .hidden { display: none; }' +
-        '</style>' +
-        '<div id="test" role="link" tabindex="0">' +
-        '  <span aria-hidden="true"><i> Hello, </i></span>' +
-        '  <span>My</span> name is' +
-        '  <div><img src="file.jpg" title="Bryan" alt="" role="presentation" /></div>' +
-        '  <span role="presentation" aria-label="Eli"><span aria-label="Garaventa">Zambino</span></span>' +
-        '  <span>the weird.</span>' +
-        '  (QED)' +
-        '  <span class="hidden"><i><b>and don\'t you forget it.</b></i></span>' +
-        '</div>';
+      fixture.innerHTML = html`
+        <style>
+          .hidden {
+            display: none;
+          }
+        </style>
+        <div id="test" role="link" tabindex="0">
+          <span aria-hidden="true"><i> Hello, </i></span>
+          <span>My</span> name is
+          <div>
+            <img src="file.jpg" title="Bryan" alt="" role="presentation" />
+          </div>
+          <span role="presentation" aria-label="Eli"
+            ><span aria-label="Garaventa">Zambino</span></span
+          >
+          <span>the weird.</span>
+          (QED)
+          <span class="hidden"
+            ><i><b>and don't you forget it.</b></i></span
+          >
+        </div>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'My name is Eli the weird. (QED)');
     });
 
     it('passes test 158', () => {
-      fixture.innerHTML =
-        '<a id="test" href="#" aria-label="California"' +
-        ' title="San Francisco">United States</a>';
+      fixture.innerHTML = html`
+        <a id="test" href="#" aria-label="California" title="San Francisco">
+          United States
+        </a>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'California');
     });
 
     it('passes test 159', () => {
-      fixture.innerHTML =
-        '<h2 id="test">' +
-        'Country of origin:' +
-        '<input role="combobox" type="text" title="Choose your country." value="United States">' +
-        '</h2>';
+      fixture.innerHTML = html`
+        <h2 id="test">
+          Country of origin:
+          <input
+            role="combobox"
+            type="text"
+            title="Choose your country."
+            value="United States"
+          />
+        </h2>
+      `;
       axe.testUtils.flatTreeSetup(fixture);
       const target = fixture.querySelector('#test');
       assert.equal(accessibleText(target), 'Country of origin: United States');
diff --git a/test/commons/text/form-control-value.js b/test/commons/text/form-control-value.js
index 758a117369..96552ec352 100644
--- a/test/commons/text/form-control-value.js
+++ b/test/commons/text/form-control-value.js
@@ -1,8 +1,6 @@
 describe('text.formControlValue', () => {
   const formControlValue = axe.commons.text.formControlValue;
-  const queryFixture = axe.testUtils.queryFixture;
-  const fixtureSetup = axe.testUtils.fixtureSetup;
-  const injectIntoFixture = axe.testUtils.injectIntoFixture;
+  const { queryFixture, fixtureSetup, injectIntoFixture, html } = axe.testUtils;
   const fixture = document.querySelector('#fixture');
 
   function getNodeType(node) {
@@ -17,9 +15,9 @@ describe('text.formControlValue', () => {
   }
 
   it('returns the first truthy result from text.formControlValueMethods', () => {
-    const target = queryFixture(
-      '<div id="target" role="textbox" value="foo">bar</div>'
-    );
+    const target = queryFixture(html`
+      <div id="target" role="textbox" value="foo">bar</div>
+    `);
     const vNode = axe.utils.querySelectorAll(axe._tree, '#fixture')[0];
     assert.equal(formControlValue(target, { startNode: vNode }), 'bar');
   });
@@ -29,16 +27,48 @@ describe('text.formControlValue', () => {
     assert.equal(formControlValue(target, { startNode: target }), '');
   });
 
-  it('returns `` when accessibleNameFromFieldValue says the role is unsupported', () => {
-    const target = queryFixture(
-      '<input id="target" value="foo" role="combobox"/>'
-    );
-    assert.equal(formControlValue(target), '');
+  describe('unsupported accessibleNameFromFieldValue', () => {
+    it('returns `` for unsupported progressbar role', () => {
+      const target = queryFixture(html`
+        <div id="target" role="progressbar" aria-value="foo"></div>
+      `);
+      assert.equal(formControlValue(target), '');
+    });
+
+    it('returns the value for supported textbox role', () => {
+      const target = queryFixture(html`
+        <div id="target" role="textbox">bar</div>
+      `);
+      assert.equal(formControlValue(target), 'bar');
+    });
+
+    it('returns the value for supported listbox role', () => {
+      const target = queryFixture(html`
+        <div id="target" role="listbox">
+          <div role="option">foo</div>
+          <div role="option" aria-selected="true">bar</div>
+          <div role="option">baz</div>
+        </div>
+      `);
+      assert.equal(formControlValue(target), 'bar');
+    });
+
+    it('returns the value for supported combobox role', () => {
+      const target = queryFixture(html`
+        <div id="target" role="combobox">
+          <div role="textbox" id="text">nope</div>
+          <div role="listbox" id="list">
+            <div role="option">foo</div>
+            <div role="option" aria-selected="true">bar</div>
+          </div>
+        </div>
+      `);
+      assert.equal(formControlValue(target), 'bar');
+    });
   });
 
   describe('nativeTextboxValue', () => {
-    const nativeTextboxValue =
-      axe.commons.text.formControlValueMethods.nativeTextboxValue;
+    const { nativeTextboxValue } = axe.commons.text.formControlValueMethods;
 
     it('returns the value of textarea elements', () => {
       const target = queryFixture('<textarea>foo</textarea>', 'textarea');
@@ -60,15 +90,8 @@ describe('text.formControlValue', () => {
         week: '2018-W46'
       };
       fixtureSetup(
-        Object.keys(formData).reduce(function (html, fieldType) {
-          return (
-            html +
-            '<input type="' +
-            fieldType +
-            '" value="' +
-            formData[fieldType] +
-            '">'
-          );
+        Object.keys(formData).reduce((code, fieldType) => {
+          return `${code}<input type="${fieldType}" value="${formData[fieldType]}">`;
         }, '')
       );
       axe.utils
@@ -86,18 +109,18 @@ describe('text.formControlValue', () => {
     });
 
     it('returns `` for non-text input elements', () => {
-      fixtureSetup(
-        '<input type="button" value="foo">' +
-          '<input type="checkbox" value="foo">' +
-          '<input type="file" value="foo">' +
-          '<input type="hidden" value="foo">' +
-          '<input type="image" value="foo">' +
-          '<input type="password" value="foo">' +
-          '<input type="radio" value="foo">' +
-          '<input type="reset" value="foo">' +
-          '<input type="submit" value="foo">' +
-          '<input type="color" value="#000000">'
-      );
+      fixtureSetup(html`
+        <input type="button" value="foo" />
+        <input type="checkbox" value="foo" />
+        <input type="file" value="foo" />
+        <input type="hidden" value="foo" />
+        <input type="image" value="foo" />
+        <input type="password" value="foo" />
+        <input type="radio" value="foo" />
+        <input type="reset" value="foo" />
+        <input type="submit" value="foo" />
+        <input type="color" value="#000000" />
+      `);
       axe.utils
         .querySelectorAll(axe._tree[0], '#fixture input')
         .forEach(function (target) {
@@ -137,73 +160,72 @@ describe('text.formControlValue', () => {
   });
 
   describe('nativeSelectValue', () => {
-    const nativeSelectValue =
-      axe.commons.text.formControlValueMethods.nativeSelectValue;
+    const { nativeSelectValue } = axe.commons.text.formControlValueMethods;
 
     it('returns the selected option text', () => {
-      const target = queryFixture(
-        '<select id="target">' +
-          '  <option>foo</option>' +
-          '  <option value="bar" selected>baz</option>' +
-          '</select>'
-      );
+      const target = queryFixture(html`
+        <select id="target">
+          <option>foo</option>
+          <option value="bar" selected>baz</option>
+        </select>
+      `);
       assert.equal(nativeSelectValue(target), 'baz');
     });
 
     it('returns the selected option text after selection', () => {
-      injectIntoFixture(
-        '<select id="target">' +
-          '  <option value="foo" selected>foo</option>' +
-          '  <option value="bar">baz</option>' +
-          '</select>'
-      );
+      injectIntoFixture(html`
+        <select id="target">
+          <option value="foo" selected>foo</option>
+          <option value="bar">baz</option>
+        </select>
+      `);
       fixture.querySelector('#target').value = 'bar';
       const rootNode = axe.setup(fixture);
       const target = axe.utils.querySelectorAll(rootNode, '#target')[0];
       assert.equal(nativeSelectValue(target), 'baz');
     });
 
-    it('returns multiple options, space seperated', () => {
+    it('returns multiple options, space separated', () => {
       // Can't apply multiple "selected" props without setting "multiple"
-      const target = queryFixture(
-        '<select id="target" multiple>' +
-          '  <option>oof</option>' +
-          '  <option selected>foo</option>' +
-          '  <option>rab</option>' +
-          '  <option selected>bar</option>' +
-          '  <option>zab</option>' +
-          '  <option selected>baz</option>' +
-          '</select>'
-      );
+      const target = queryFixture(html`
+        <select id="target" multiple>
+          <option>oof</option>
+          <option selected>foo</option>
+          <option>rab</option>
+          <option selected>bar</option>
+          <option>zab</option>
+          <option selected>baz</option>
+        </select>
+      `);
       assert.equal(nativeSelectValue(target), 'foo bar baz');
     });
 
     it('returns options from within optgroup elements', () => {
-      const target = queryFixture(
-        '<select id="target" multiple>' +
-          '  <option>oof</option>' +
-          '  <option selected>foo</option>' +
-          '  <optgroup>' +
-          '    <option>rab</option>' +
-          '    <option selected>bar</option>' +
-          '  </optgroup>' +
-          '  <optgroup>' +
-          '    <option>zab</option>' +
-          '    <option selected>baz</option>' +
-          '  </optgroup>' +
-          '</select>'
-      );
+      const target = queryFixture(html`
+        <select id="target" multiple>
+          <option>oof</option>
+          <option selected>foo</option>
+          <optgroup>
+            <option>rab</option>
+            <option selected>bar</option>
+          </optgroup>
+          <optgroup>
+            <option>zab</option>
+            <option selected>baz</option>
+          </optgroup>
+        </select>
+      `);
       assert.equal(nativeSelectValue(target), 'foo bar baz');
     });
 
     it('returns the first option when there are no selected options', () => {
       // Browser automatically selectes the first option
-      const target = queryFixture(
-        '<select id="target">' +
-          '  <option>foo</option>' +
-          '  <option>baz</option>' +
-          '</select>'
-      );
+      const target = queryFixture(html`
+        <select id="target">
+          <option>foo</option>
+          <option>baz</option>
+        </select>
+      `);
       assert.equal(nativeSelectValue(target), 'foo');
     });
 
@@ -236,48 +258,58 @@ describe('text.formControlValue', () => {
     });
 
     it('ignores text hidden with CSS', () => {
-      const target = queryFixture(
-        '<div id="target" role="textbox">' +
-          '<span>foo</span>' +
-          '<span style="display: none;">bar</span>' +
-          '<span style="visibility: hidden;">baz</span>' +
-          '</div>'
-      );
+      const target = queryFixture(html`
+        <div id="target" role="textbox">
+          <span>foo</span>
+          <span style="display: none;">bar</span>
+          <span style="visibility: hidden;">baz</span>
+        </div>
+      `);
       assert.equal(ariaTextboxValue(target), 'foo');
     });
 
     it('ignores elements with hidden content', () => {
-      const target = queryFixture(
-        '<div id="target" role="textbox">' +
-          '<span>span</span>' +
-          '<style>style</style>' +
-          '<template>template</template>' +
-          '<script>script</script>' +
-          '<!-- comment -->' +
-          '<h1>h1</h1>' +
-          '</div>'
-      );
-      assert.equal(ariaTextboxValue(target), 'spanh1');
+      const target = queryFixture(html`
+        <div id="target" role="textbox">
+          <span>span</span>
+          <style>
+            style {
+            }
+          </style>
+          <template>template</template>
+          <script>
+            script;
+          </script>
+          <!-- comment -->
+          <h1>h1</h1>
+        </div>
+      `);
+      assert.equal(ariaTextboxValue(target), 'span h1');
     });
 
     it('does not return HTML or comments', () => {
-      const target = queryFixture(
-        '<div id="target" role="textbox">' +
-          '<i>foo</i>' +
-          '<!-- comment -->' +
-          '</div>'
-      );
+      const target = queryFixture(html`
+        <div id="target" role="textbox">
+          <i>foo</i>
+          <!-- comment -->
+        </div>
+      `);
       assert.equal(ariaTextboxValue(target), 'foo');
     });
 
     it('returns the entire text content if the textbox is hidden', () => {
-      const target = queryFixture(
-        '<div id="target" role="textbox" style="display:none">' +
-          // Yes, this is how it works in browsers :-(
-          '<style>[role=texbox] { display: none }</style>' +
-          '</div>'
-      );
-      assert.equal(ariaTextboxValue(target), '[role=texbox] { display: none }');
+      // Yes, this is how it works in browsers :-(
+      const target = queryFixture(html`
+        <div id="target" role="textbox" style="display:none">
+          <style>
+            [role='texbox'] {
+              display: none;
+            }
+          </style>
+        </div>
+      `);
+      const text = ariaTextboxValue(target).replace(/\s+/g, ' ').trim();
+      assert.equal(text, "[role='texbox'] { display: none; }");
     });
   });
 
@@ -286,147 +318,152 @@ describe('text.formControlValue', () => {
       axe.commons.text.formControlValueMethods.ariaListboxValue;
 
     it('returns the selected option when the element is a listbox', () => {
-      const target = queryFixture(
-        '<div id="target" role="listbox">' +
-          '  <div role="option">foo</div>' +
-          '  <div role="option" aria-selected="true">bar</div>' +
-          '  <div role="option">baz</div>' +
-          '</div>'
-      );
+      const target = queryFixture(html`
+        <div id="target" role="listbox">
+          <div role="option">foo</div>
+          <div role="option" aria-selected="true">bar</div>
+          <div role="option">baz</div>
+        </div>
+      `);
       assert.equal(ariaListboxValue(target), 'bar');
     });
 
     it('returns `` when the element is not a listbox', () => {
-      const target = queryFixture(
-        '<div id="target" role="combobox">' +
-          '  <div role="option">foo</div>' +
-          '  <div role="option" aria-selected="true">bar</div>' +
-          '  <div role="option">baz</div>' +
-          '</div>'
-      );
+      const target = queryFixture(html`
+        <div id="target" role="combobox">
+          <div role="option">foo</div>
+          <div role="option" aria-selected="true">bar</div>
+          <div role="option">baz</div>
+        </div>
+      `);
       assert.equal(ariaListboxValue(target), '');
     });
 
     it('returns `` when there is no selected option', () => {
-      const target = queryFixture(
-        '<div id="target" role="listbox">' +
-          '  <div role="option">foo</div>' +
-          '  <div role="option">bar</div>' +
-          '  <div role="option">baz</div>' +
-          '</div>'
-      );
+      const target = queryFixture(html`
+        <div id="target" role="listbox">
+          <div role="option">foo</div>
+          <div role="option">bar</div>
+          <div role="option">baz</div>
+        </div>
+      `);
       assert.equal(ariaListboxValue(target), '');
     });
 
     it('returns `` when aria-selected is not true option', () => {
-      const target = queryFixture(
-        '<div id="target" role="listbox">' +
-          '  <div role="option" aria-selected="false">foo</div>' +
-          '  <div role="option" aria-selected="TRUE">bar</div>' +
-          '  <div role="option" aria-selected="yes">baz</div>' +
-          '  <div role="option" aria-selected="selected">fiz</div>' +
-          '</div>'
-      );
+      const target = queryFixture(html`
+        <div id="target" role="listbox">
+          <div role="option" aria-selected="false">foo</div>
+          <div role="option" aria-selected="TRUE">bar</div>
+          <div role="option" aria-selected="yes">baz</div>
+          <div role="option" aria-selected="selected">fiz</div>
+        </div>
+      `);
       assert.equal(ariaListboxValue(target), '');
     });
 
     it('returns selected options from aria-owned', () => {
-      const target = queryFixture(
-        '<div id="target" role="listbox" aria-owns="opt1 opt2 opt3"></div>' +
-          '<div role="option" id="opt1">foo</div>' +
-          '<div role="option" id="opt2" aria-selected="true">bar</div>' +
-          '<div role="option" id="opt3">baz</div>'
-      );
+      const target = queryFixture(html`
+        <div id="target" role="listbox" aria-owns="opt1 opt2 opt3"></div>
+        <div role="option" id="opt1">foo</div>
+        <div role="option" id="opt2" aria-selected="true">bar</div>
+        <div role="option" id="opt3">baz</div>
+      `);
       assert.equal(ariaListboxValue(target), 'bar');
     });
 
     it('ignores aria-selected for elements that are not options', () => {
-      const target = queryFixture(
-        '<div id="target" role="listbox" aria-owns="opt1 opt2 opt3"></div>' +
-          '<div id="opt1">foo</div>' +
-          '<div id="opt2" aria-selected="true">bar</div>' +
-          '<div id="opt3">baz</div>'
-      );
+      const target = queryFixture(html`
+        <div id="target" role="listbox" aria-owns="opt1 opt2 opt3"></div>
+        <div id="opt1">foo</div>
+        <div id="opt2" aria-selected="true">bar</div>
+        <div id="opt3">baz</div>
+      `);
       assert.equal(ariaListboxValue(target), '');
     });
 
     describe('with multiple aria-selected', () => {
       it('returns the first selected option from children', () => {
-        const target = queryFixture(
-          '<div id="target" role="listbox">' +
-            '  <div role="option">foo</div>' +
-            '  <div role="option" aria-selected="true">bar</div>' +
-            '  <div role="option" aria-selected="true">baz</div>' +
-            '</div>'
-        );
+        const target = queryFixture(html`
+          <div id="target" role="listbox">
+            <div role="option">foo</div>
+            <div role="option" aria-selected="true">bar</div>
+            <div role="option" aria-selected="true">baz</div>
+          </div>
+        `);
         assert.equal(ariaListboxValue(target), 'bar');
       });
 
       it('returns the first selected option in aria-owned (as opposed to in the DOM order)', () => {
-        const target = queryFixture(
-          '<div id="target" role="listbox" aria-owns="opt3 opt2 opt1"></div>' +
-            '<div role="option" id="opt1" aria-selected="true">foo</div>' +
-            '<div role="option" id="opt2" aria-selected="true">bar</div>' +
-            '<div role="option" id="opt3">baz</div>'
-        );
+        const target = queryFixture(html`
+          <div id="target" role="listbox" aria-owns="opt3 opt2 opt1"></div>
+          <div role="option" id="opt1" aria-selected="true">foo</div>
+          <div role="option" id="opt2" aria-selected="true">bar</div>
+          <div role="option" id="opt3">baz</div>
+        `);
         assert.equal(ariaListboxValue(target), 'bar');
       });
 
       it('returns the a selected child before a selected aria-owned element', () => {
-        const target = queryFixture(
-          '<div id="target" role="listbox" aria-owns="opt2 opt3">' +
-            '  <div role="option" aria-selected="true">foo</div>' +
-            '</div>' +
-            '<div role="option" id="opt2" aria-selected="true">bar</div>' +
-            '<div role="option" id="opt3">baz</div>'
-        );
+        const target = queryFixture(html`
+          <div id="target" role="listbox" aria-owns="opt2 opt3">
+            <div role="option" aria-selected="true">foo</div>
+          </div>
+          <div role="option" id="opt2" aria-selected="true">bar</div>
+          <div role="option" id="opt3">baz</div>
+        `);
         assert.equal(ariaListboxValue(target), 'foo');
       });
 
       it('ignores aria-multiselectable=true', () => {
         // aria-multiselectable doesn't add additional content to the accessible name
-        const target = queryFixture(
-          '<div id="target" role="listbox" aria-owns="opt2 opt3" aria-multiselectable="true">' +
-            '  <div role="option" aria-selected="true">foo</div>' +
-            '</div>' +
-            '<div  role="option" id="opt2" aria-selected="true">bar</div>' +
-            '<div  role="option" id="opt3" aria-selected="true">baz</div>'
-        );
+        const target = queryFixture(html`
+          <div
+            id="target"
+            role="listbox"
+            aria-owns="opt2 opt3"
+            aria-multiselectable="true"
+          >
+            <div role="option" aria-selected="true">foo</div>
+          </div>
+          <div role="option" id="opt2" aria-selected="true">bar</div>
+          <div role="option" id="opt3" aria-selected="true">baz</div>
+        `);
         assert.equal(ariaListboxValue(target), 'foo');
       });
     });
   });
 
   describe('ariaComboboxValue', () => {
-    const ariaComboboxValue =
-      axe.commons.text.formControlValueMethods.ariaComboboxValue;
+    const { ariaComboboxValue } = axe.commons.text.formControlValueMethods;
 
-    const comboboxContent =
-      '<div role="textbox" id="text">nope</div>' +
-      '<div role="listbox" id="list">' +
-      '  <div role="option">foo</div>' +
-      '  <div role="option" aria-selected="true">bar</div>' +
-      '</div>';
+    const comboboxContent = html`
+      <div role="textbox" id="text">nope</div>
+      <div role="listbox" id="list">
+        <div role="option">foo</div>
+        <div role="option" aria-selected="true">bar</div>
+      </div>
+    `;
 
     it('returns the text of role=combobox elements', () => {
-      const target = queryFixture(
-        '<div id="target" role="combobox">' + comboboxContent + '</div>'
-      );
+      const target = queryFixture(html`
+        <div id="target" role="combobox">${comboboxContent}</div>
+      `);
       assert.equal(ariaComboboxValue(target), 'bar');
     });
 
     it('returns `` for elements without role=combobox', () => {
       const target = queryFixture(
-        '<div role="combobox">' + comboboxContent + '</div>',
+        `<div role="combobox">${comboboxContent}</div>`,
         '[role=listbox]'
       );
       assert.equal(ariaComboboxValue(target), '');
     });
 
     it('passes child listbox to `ariaListboxValue` and returns its result', () => {
-      const target = queryFixture(
-        '<div id="target" role="combobox">' + comboboxContent + '</div>'
-      );
+      const target = queryFixture(html`
+        <div id="target" role="combobox">${comboboxContent}</div>
+      `);
       assert.equal(ariaComboboxValue(target), 'bar');
     });
 
@@ -452,36 +489,30 @@ describe('text.formControlValue', () => {
     rangeRoles.forEach(function (role) {
       describe('with ' + role, () => {
         it('returns the result of aria-valuenow', () => {
-          const target = queryFixture(
-            '<div id="target" role="' +
-              role +
-              '" aria-valuenow="+123">foo</div>'
-          );
+          const target = queryFixture(html`
+            <div id="target" role="${role}" aria-valuenow="+123">foo</div>
+          `);
           assert.equal(ariaRangeValue(target), '123');
         });
 
         it('returns `0` if aria-valuenow is not a number', () => {
-          const target = queryFixture(
-            '<div id="target" role="' + role + '" aria-valuenow="abc">foo</div>'
-          );
+          const target = queryFixture(html`
+            <div id="target" role="${role}" aria-valuenow="abc">foo</div>
+          `);
           assert.equal(ariaRangeValue(target), '0');
         });
 
         it('returns decimal numbers', () => {
-          const target = queryFixture(
-            '<div id="target" role="' +
-              role +
-              '" aria-valuenow="1.5678">foo</div>'
-          );
+          const target = queryFixture(html`
+            <div id="target" role="${role}" aria-valuenow="1.5678">foo</div>
+          `);
           assert.equal(ariaRangeValue(target), '1.5678');
         });
 
         it('returns negative numbers', () => {
-          const target = queryFixture(
-            '<div id="target" role="' +
-              role +
-              '" aria-valuenow="-1.0">foo</div>'
-          );
+          const target = queryFixture(html`
+            <div id="target" role="${role}" aria-valuenow="-1.0">foo</div>
+          `);
           assert.equal(ariaRangeValue(target), '-1');
         });
       });
diff --git a/test/commons/text/subtree-text.js b/test/commons/text/subtree-text.js
index a38d05e4bd..09b5cc41d3 100644
--- a/test/commons/text/subtree-text.js
+++ b/test/commons/text/subtree-text.js
@@ -1,20 +1,20 @@
-describe('text.subtreeText', function () {
-  var fixtureSetup = axe.testUtils.fixtureSetup;
-  var subtreeText = axe.commons.text.subtreeText;
+describe('text.subtreeText', () => {
+  const fixtureSetup = axe.testUtils.fixtureSetup;
+  const subtreeText = axe.commons.text.subtreeText;
 
-  it('concatinated the accessible name for child elements', function () {
+  it('concatinated the accessible name for child elements', () => {
     fixtureSetup('<span>foo</span> <span>bar</span> <span>baz</span>');
-    var fixture = axe.utils.querySelectorAll(axe._tree[0], '#fixture')[0];
+    const fixture = axe.utils.querySelectorAll(axe._tree[0], '#fixture')[0];
     assert.equal(subtreeText(fixture), 'foo bar baz');
   });
 
-  it('returns `` when the element is not named from contents', function () {
+  it('returns `` when the element is not named from contents', () => {
     fixtureSetup('<main>foo bar baz</main>');
-    var main = axe.utils.querySelectorAll(axe._tree[0], 'main')[0];
+    const main = axe.utils.querySelectorAll(axe._tree[0], 'main')[0];
     assert.equal(subtreeText(main), '');
   });
 
-  it('adds spacing around "block-like" elements', function () {
+  it('adds spacing around "block-like" elements', () => {
     fixtureSetup(
       '<div>foo</div>' +
         '<h1>bar</h1>' +
@@ -22,19 +22,19 @@ describe('text.subtreeText', function () {
         '<blockquote>fizz</blockquote>' +
         '<pre>buzz</pre>'
     );
-    var fixture = axe.utils.querySelectorAll(axe._tree[0], '#fixture')[0];
+    const fixture = axe.utils.querySelectorAll(axe._tree[0], '#fixture')[0];
     assert.equal(subtreeText(fixture), 'foo bar baz fizz buzz ');
   });
 
-  it('does not add spacing around "inline-like" elements', function () {
+  it('does not add spacing around "inline-like" elements', () => {
     fixtureSetup(
       '<a>foo</a>' + '<b>bar</b>' + '<i>baz</i>' + '<s>fizz</s>' + '<u>buzz</u>'
     );
-    var fixture = axe.utils.querySelectorAll(axe._tree[0], '#fixture')[0];
+    const fixture = axe.utils.querySelectorAll(axe._tree[0], '#fixture')[0];
     assert.equal(subtreeText(fixture), 'foobarbazfizzbuzz');
   });
 
-  it('returns `` for embedded content', function () {
+  it('returns `` for embedded content', () => {
     fixtureSetup(
       '<video>foo</video>' +
         '<audio>foo</audio>' +
@@ -42,37 +42,67 @@ describe('text.subtreeText', function () {
         '<iframe>foo</iframe>' +
         '<svg>foo</svg>'
     );
-    var children = axe._tree[0].children;
+    const children = axe._tree[0].children;
     assert.lengthOf(children, 5);
     children.forEach(function (embeddedContent) {
       assert.equal(subtreeText(embeddedContent), '');
     });
   });
 
-  describe('context.processed', function () {
-    beforeEach(function () {
+  describe('name from author', () => {
+    it('returns `` with default context', () => {
+      fixtureSetup('<main>foo</main>');
+      const div = axe.utils.querySelectorAll(axe._tree[0], 'main')[0];
+      const context = {};
+      assert.equal(subtreeText(div, context), '');
+    });
+
+    it('returns content with { inLabelledByContext: true }', () => {
+      fixtureSetup('<main>foo</main>');
+      const div = axe.utils.querySelectorAll(axe._tree[0], 'main')[0];
+      const context = { inLabelledByContext: true };
+      assert.equal(subtreeText(div, context), 'foo');
+    });
+
+    it('returns content with { subtreeDescendant: true }', () => {
+      fixtureSetup('<main>foo</main>');
+      const div = axe.utils.querySelectorAll(axe._tree[0], 'main')[0];
+      const context = { subtreeDescendant: true };
+      assert.equal(subtreeText(div, context), 'foo');
+    });
+
+    it('returns `` for roles that have a value, even with inLabelledByContext and subtreeDescendant', () => {
+      fixtureSetup('<select><option>foo</option</select>');
+      const div = axe.utils.querySelectorAll(axe._tree[0], 'select')[0];
+      const context = { inLabelledByContext: true, subtreeDescendant: true };
+      assert.equal(subtreeText(div, context), '');
+    });
+  });
+
+  describe('context.processed', () => {
+    beforeEach(() => {
       fixtureSetup('<h1>foo</h1>');
     });
 
-    it('appends the element to context.processed to prevent duplication', function () {
-      var h1 = axe.utils.querySelectorAll(axe._tree[0], 'h1')[0];
-      var text = h1.children[0];
-      var context = { processed: [] };
+    it('appends the element to context.processed to prevent duplication', () => {
+      const h1 = axe.utils.querySelectorAll(axe._tree[0], 'h1')[0];
+      const text = h1.children[0];
+      const context = { processed: [] };
       subtreeText(h1, context);
       assert.deepEqual(context.processed, [h1, text]);
     });
 
-    it('sets context.processed when it is undefined', function () {
-      var h1 = axe.utils.querySelectorAll(axe._tree[0], 'h1')[0];
-      var text = h1.children[0];
-      var emptyContext = {};
+    it('sets context.processed when it is undefined', () => {
+      const h1 = axe.utils.querySelectorAll(axe._tree[0], 'h1')[0];
+      const text = h1.children[0];
+      const emptyContext = {};
       subtreeText(h1, emptyContext);
       assert.deepEqual(emptyContext.processed, [h1, text]);
     });
 
-    it('returns `` when the element is in the `processed` array', function () {
-      var h1 = axe.utils.querySelectorAll(axe._tree[0], 'h1')[0];
-      var context = {
+    it('returns `` when the element is in the `processed` array', () => {
+      const h1 = axe.utils.querySelectorAll(axe._tree[0], 'h1')[0];
+      const context = {
         processed: [h1]
       };
       assert.equal(subtreeText(h1, context), '');
diff --git a/test/integration/rules/aria-dialog-name/aria-dialog-name.html b/test/integration/rules/aria-dialog-name/aria-dialog-name.html
index bcfdce3ef0..2052a0501a 100644
--- a/test/integration/rules/aria-dialog-name/aria-dialog-name.html
+++ b/test/integration/rules/aria-dialog-name/aria-dialog-name.html
@@ -19,6 +19,9 @@ <h2 id="alertdialog-heading">Cookies</h2>
 <div id="pass9" role="alertdialog" aria-labelledby="alertdialog-div-heading">
   <h2 id="alertdialog-div-heading">Cookies</h2>
 </div>
+<div id="pass10" role="dialog" aria-labelledby="pass10-heading">
+  <header id="pass10-heading">Named from author element</header>
+</div>
 
 <!-- FAIL -->
 <div id="fail1" role="dialog"></div>
diff --git a/test/integration/rules/aria-dialog-name/aria-dialog-name.json b/test/integration/rules/aria-dialog-name/aria-dialog-name.json
index ebda19ffdc..e2171ce49a 100644
--- a/test/integration/rules/aria-dialog-name/aria-dialog-name.json
+++ b/test/integration/rules/aria-dialog-name/aria-dialog-name.json
@@ -10,7 +10,8 @@
     ["#pass6"],
     ["#pass7"],
     ["#pass8"],
-    ["#pass9"]
+    ["#pass9"],
+    ["#pass10"]
   ],
   "violations": [
     ["#fail1"],
diff --git a/test/integration/rules/label/label.html b/test/integration/rules/label/label.html
index a9a5d99b3d..d83f720578 100644
--- a/test/integration/rules/label/label.html
+++ b/test/integration/rules/label/label.html
@@ -5,67 +5,85 @@
   <input type="submit" id="na4" />
   <input type="reset" id="na5" />
   <input type="text" id="fail1" />
-  <textarea id="fail3"></textarea>
+  <textarea id="fail2"></textarea>
   <input type="text" aria-label="label" id="pass1" />
-  <textarea aria-label="label" id="pass3"></textarea>
-  <input type="text" aria-labelledby="label" id="pass4" />
-  <textarea aria-labelledby="label" id="pass6"></textarea>
+  <textarea aria-label="label" id="pass2"></textarea>
+  <input type="text" aria-labelledby="label" id="pass3" />
+  <textarea aria-labelledby="label" id="pass4"></textarea>
   <div id="label">Label</div>
-  <label>Label <input type="text" id="pass7" /></label>
-  <label>Label <textarea id="pass9"></textarea></label>
+  <label>Label <input type="text" id="pass5" /></label>
+  <label>Label <textarea id="pass6"></textarea></label>
 
-  <label><input type="text" id="fail4" /></label>
-  <label><textarea id="fail6"></textarea></label>
-  <label for="fail7"></label><input type="text" id="fail7" />
-  <label for="fail9"></label><textarea id="fail9"></textarea>
+  <label><input type="text" id="fail3" /></label>
+  <label><textarea id="fail4"></textarea></label>
+  <label for="fail5"></label><input type="text" id="fail5" />
+  <label for="fail6"></label><textarea id="fail6"></textarea>
 
-  <label for="fail11" style="display: none">Text</label
-  ><input type="text" id="fail11" /> <label for="pass10">Label</label
-  ><input type="text" id="pass10" /> <label for="pass12">Label</label
-  ><textarea id="pass12"></textarea>
+  <label for="fail7" style="display: none">Text</label
+  ><input type="text" id="fail7" /> <label for="pass7">Label</label
+  ><input type="text" id="pass7" /><label for="pass8">Label</label
+  ><textarea id="pass8"></textarea>
 
-  <input id="pass13" title="Label" />
-  <textarea id="pass15" title="Label"></textarea>
+  <input id="pass9" title="Label" />
+  <textarea id="pass10" title="Label"></textarea>
 
   <label
-    ><label><input type="text" id="fail22" /></label
+    ><label><input type="text" id="fail8" /></label
   ></label>
 
   <div>
-    <label>
-      <select id="fail24">
-        <option selected="selected">Chosen</option>
-        <option>Not Selected</option>
-      </select>
-    </label>
-    <input aria-labelledby="fail24" type="text" id="fail25" />
+    <select id="pass11-label">
+      <option selected="selected">Chosen</option>
+      <option>Not Selected</option>
+    </select>
+    <input aria-labelledby="pass11-label" type="text" id="pass11" />
   </div>
 
   <div>
-    <label for="fail27">
-      <select id="fail26">
+    <label for="pass12">
+      <select>
         <option selected="selected">Chosen</option>
         <option>Not Selected</option>
       </select>
     </label>
-    <input type="text" id="fail27" />
+    <input type="text" id="pass12" />
   </div>
 
   <div>
-    <label for="pass-gh1176" style="display: none"> Hello world </label>
-    <input id="pass-gh1176" title="Hi" />
+    <label for="pass13" style="display: none"> Hello world </label>
+    <input id="pass13" title="Hi" />
   </div>
 
-  <input id="pass16" role="none" disabled />
-  <input id="pass17" role="presentation" disabled />
+  <input id="pass14" role="none" disabled />
+  <input id="pass15" role="presentation" disabled />
 
   <div id="hiddenlabel" aria-hidden="true">Hidden label</div>
-  <input type="text" id="pass18" aria-labelledby="hiddenlabel" />
+  <input type="text" id="pass16" aria-labelledby="hiddenlabel" />
+
+  <label> <input id="fail9" value="val" /></label>
+  <label for="fail10"> <input id="fail10" value="val" /></label>
+  <div id="lbl-f13">
+    <input id="fail11" value="val" aria-labelledby="lbl-f13" />
+  </div>
+  <label><textarea id="fail12"> value</textarea></label>
+
+  <table>
+    <tr>
+      <th id="pass17-label">Named from author elm</th>
+      <td><input id="pass17" aria-labelledby="pass17-label" /></td>
+    </tr>
+  </table>
+
+  <div id="fail13-label">
+    <span role="progressbar" aria-valuenow="23">23%</span>
+  </div>
+  <input type="text" id="fail13" aria-labelledby="fail13-label" />
 
-  <label> <input id="fail28" value="val" /></label>
-  <label for="fail29"> <input id="fail29" value="val" /></label>
-  <div id="lbl-f30">
-    <input id="fail30" value="val" aria-labelledby="lbl-f30" />
+  <div id="fail14-label">
+    <select>
+      <option selected></option>
+      <option>Option 2</option>
+    </select>
   </div>
-  <label><textarea id="fail31"> value</textarea></label>
+  <input type="text" id="fail14" aria-labelledby="fail14-label" />
 </form>
diff --git a/test/integration/rules/label/label.json b/test/integration/rules/label/label.json
index abccc763b6..1f99651df3 100644
--- a/test/integration/rules/label/label.json
+++ b/test/integration/rules/label/label.json
@@ -3,34 +3,37 @@
   "rule": "label",
   "violations": [
     ["#fail1"],
+    ["#fail2"],
     ["#fail3"],
     ["#fail4"],
+    ["#fail5"],
     ["#fail6"],
     ["#fail7"],
+    ["#fail8"],
     ["#fail9"],
+    ["#fail10"],
     ["#fail11"],
-    ["#fail22"],
-    ["#fail25"],
-    ["#fail27"],
-    ["#fail28"],
-    ["#fail29"],
-    ["#fail30"],
-    ["#fail31"]
+    ["#fail12"],
+    ["#fail13"],
+    ["#fail14"]
   ],
   "passes": [
     ["#pass1"],
+    ["#pass2"],
     ["#pass3"],
     ["#pass4"],
+    ["#pass5"],
     ["#pass6"],
     ["#pass7"],
+    ["#pass8"],
     ["#pass9"],
     ["#pass10"],
+    ["#pass11"],
     ["#pass12"],
     ["#pass13"],
+    ["#pass14"],
     ["#pass15"],
     ["#pass16"],
-    ["#pass17"],
-    ["#pass-gh1176"],
-    ["#pass18"]
+    ["#pass17"]
   ]
 }
diff --git a/test/testutils.js b/test/testutils.js
index 3af022ebf9..cd0e16fe1b 100644
--- a/test/testutils.js
+++ b/test/testutils.js
@@ -688,6 +688,18 @@ var commons;
     return fixtureNode.querySelector('#target');
   };
 
+  /**
+   * Enables test code like html` <img /> ` to get code highlighting
+   * @param {array} strings
+   * @param  {...any} values
+   * @returns {string}
+   */
+  testUtils.html = (strings, ...values) => {
+    return strings.reduce((total, string, i) => {
+      return total + string + (values[i] ?? '');
+    }, '');
+  };
+
   function appendHtml(fixtureNode, htmlCode) {
     const tmp = document.createElement('div');
     tmp.innerHTML = htmlCode;