Restore first/last spans

openstax · Nov 20, 2023 · eb8e345 · eb8e345
1 parent 6bbd6bd
commit eb8e345
Show file tree

Hide file tree

Showing 2 changed files with 155 additions and 42 deletions.
diff --git a/src/__snapshots__/injectHighlightWrappers.spec.ts.snap b/src/__snapshots__/injectHighlightWrappers.spec.ts.snap
@@ -2,97 +2,126 @@
 
 exports[`inject highlight wrappers for figure with caption for highlight ending on an <img> in chrome and safari 1`] = `
 <mark
-  class="highlight text yellow"
+  class="highlight first text yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   hardware store sells 16-ft ladders and 24-ft ladders. A window is located 12 feet above the ground. A ladder needs to be purchased that will reach the window from a point on the ground 5 feet from the building.
 </mark>
 `;
 
 exports[`inject highlight wrappers for figure with caption for highlight ending on an <img> in chrome and safari 2`] = `
 <mark
-  class="highlight block yellow"
+  class="highlight block last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
     data-media-type="image/jpg"
     id="test-img"
     src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
   />
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for figure with caption for highlight ending on an <img> in firefox 1`] = `
 <mark
-  class="highlight text yellow"
+  class="highlight first text yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   hardware store sells 16-ft ladders and 24-ft ladders. A window is located 12 feet above the ground. A ladder needs to be purchased that will reach the window from a point on the ground 5 feet from the building.
 </mark>
 `;
 
 exports[`inject highlight wrappers for figure with caption for highlight ending on an <img> in firefox 2`] = `
 <mark
-  class="highlight block yellow"
+  class="highlight block last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
     data-media-type="image/jpg"
     id="test-img"
     src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
   />
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for figure with caption for highlight starting and ending on an <img> in chrome and safari 1`] = `
 <mark
-  class="highlight block yellow"
+  class="highlight first block last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
     data-media-type="image/jpg"
     id="test-img"
     src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
   />
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for figure with caption for highlight starting and ending on an <img> in firefox 1`] = `
 <mark
-  class="highlight block yellow"
+  class="highlight first block last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
     data-media-type="image/jpg"
     id="test-img"
     src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
   />
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> in chrome and safari 1`] = `
 <mark
-  class="highlight block yellow"
+  class="highlight first block yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
     data-media-type="image/jpg"
@@ -104,22 +133,28 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
 
 exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> in chrome and safari 2`] = `
 <mark
-  class="highlight text yellow"
+  class="highlight text last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
   Figure
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> in firefox 1`] = `
 <mark
-  class="highlight block yellow"
+  class="highlight first block yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
     data-media-type="image/jpg"
@@ -131,135 +166,185 @@ exports[`inject highlight wrappers for figure with caption for highlight startin
 
 exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> in firefox 2`] = `
 <mark
-  class="highlight text yellow"
+  class="highlight text last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
   Figure
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> where img is first element on page in chrome 1`] = `
 <mark
-  class="highlight block yellow"
+  class="highlight first block last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
     data-media-type="image/jpg"
     id="test-img"
     src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
   />
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> where img is first element on page in firefox 1`] = `
 <mark
-  class="highlight block yellow"
+  class="highlight first block last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
     data-media-type="image/jpg"
     id="test-img"
     src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
   />
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for figure with caption for highlight starting on an <img> where img is first element on page in safari 1`] = `
 <mark
-  class="highlight block yellow"
+  class="highlight first block last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   <img
     alt="A right triangle with a base of 5 feet, a height of 12 feet, and a hypotenuse labeled c"
     data-media-type="image/jpg"
     id="test-img"
     src="/apps/archive/20210713.205645/resources/b1b5ba97150addc831c534413ca324a72c4e374b"
   />
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for img between paragraphs in chrome and safari 1`] = `
 <mark
-  class="highlight text yellow"
+  class="highlight first text yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   the first terms, the outer terms, the inner terms, and then the last terms of each binomial.
 </mark>
 `;
 
 exports[`inject highlight wrappers for img between paragraphs in chrome and safari 2`] = `
 <mark
-  class="highlight block yellow"
+  class="highlight block last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
   <img
     alt="Two quantities in parentheses are being multiplied, the first being: a times x plus b and the second being: c times x plus d."
     data-media-type="image/jpg"
     id="test-img"
     src="/apps/archive/20210713.205645/resources/eb942bf030580de7cb1d8c7d484771addceb7da6"
   />
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for img between paragraphs in firefox 1`] = `
 <mark
-  class="highlight text yellow"
+  class="highlight first text yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   the first terms, the outer terms, the inner terms, and then the last terms of each binomial.
 </mark>
 `;
 
 exports[`inject highlight wrappers for img between paragraphs in firefox 2`] = `
 <mark
-  class="highlight block yellow"
+  class="highlight block last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
   <img
     alt="Two quantities in parentheses are being multiplied, the first being: a times x plus b and the second being: c times x plus d."
     data-media-type="image/jpg"
     id="test-img"
     src="/apps/archive/20210713.205645/resources/eb942bf030580de7cb1d8c7d484771addceb7da6"
   />
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for text followed by section in chrome and safari 1`] = `
 <mark
-  class="highlight text yellow"
+  class="highlight first text last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   How To
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;
 
 exports[`inject highlight wrappers for text followed by section in firefox 1`] = `
 <mark
-  class="highlight text yellow"
+  class="highlight first text last yellow"
   data-highlight-id="some-highlight"
   data-highlighted="true"
-  tabindex="0"
 >
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
   How To
+  <span
+    data-for-screenreaders="true"
+    data-highlight-id="some-highlight"
+  />
 </mark>
 `;