From 6759b7f412e1cf49db908aee50de5dec6da6a8e6 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Wed, 17 Apr 2024 10:09:18 -0500
Subject: [PATCH 1/7] Use new highlighter branch

---
 package.json | 2 +-
 yarn.lock    | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 020c3dd526..48cb5e739f 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "@craco/craco": "<7",
     "@formatjs/intl-pluralrules": "^5.2.3",
     "@openstax/event-capture-client": "^2.0.2",
-    "@openstax/highlighter": "https://github.com/openstax/highlighter#v1.14.2",
+    "@openstax/highlighter": "https://github.com/openstax/highlighter#use-mark-dist-branch",
     "@openstax/open-search-client": "0.1.0-build.7",
     "@openstax/ts-utils": "1.6.0",
     "@openstax/ui-components": "https://github.com/openstax/ui-components#1.3.4-post2",
diff --git a/yarn.lock b/yarn.lock
index 5876231132..fc3054f56a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5083,9 +5083,9 @@
   dependencies:
     uuid "^8.3.2"
 
-"@openstax/highlighter@https://github.com/openstax/highlighter#v1.14.2":
-  version "1.14.1"
-  resolved "https://github.com/openstax/highlighter#fcd259e1642e243de6ed95771d0b97249ff2d162"
+"@openstax/highlighter@https://github.com/openstax/highlighter#use-mark-dist-branch":
+  version "1.14.0"
+  resolved "https://github.com/openstax/highlighter#3da1c3824b59477b79d180f04b711b144b964c2c"
   dependencies:
     "@openstax/highlights-client" "0.2.3"
     change-case "^4.0.0"

From ca2f9badffdcb0942d9068937f7aa1eb76978111 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Wed, 17 Apr 2024 10:39:10 -0500
Subject: [PATCH 2/7] Style highlight screenreader pseudoelements

---
 .../__snapshots__/routes.spec.tsx.snap        | 113 +++++----
 .../content/components/Page/PageContent.tsx   |  50 +++-
 .../__snapshots__/Content.spec.tsx.snap       | 226 +++++++++++-------
 3 files changed, 258 insertions(+), 131 deletions(-)

diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
index e35265bff3..94e1981882 100644
--- a/src/app/content/__snapshots__/routes.spec.tsx.snap
+++ b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -321,19 +321,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.yellow.first.text.has-note:after {
+.c4 .highlight.yellow.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.yellow.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #fed200;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.green {
@@ -368,19 +370,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.green.first.text.has-note:after {
+.c4 .highlight.green.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.green.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #92d101;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.blue {
@@ -415,19 +419,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.blue.first.text.has-note:after {
+.c4 .highlight.blue.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.blue.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #00c3ed;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.purple {
@@ -462,19 +468,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.purple.first.text.has-note:after {
+.c4 .highlight.purple.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.purple.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #545ec8;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .highlight.pink {
@@ -509,19 +517,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c4 .highlight.pink.first.text.has-note:after {
+.c4 .highlight.pink.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c4 .highlight.pink.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #de017e;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c4 .os-figure,
@@ -581,6 +591,29 @@ Array [
   }
 }
 
+@media screen {
+  .c4 .highlight[data-start-message]::before,
+  .c4 .highlight[data-end-message]::after {
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
+  .c4 .highlight.first[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c4 .highlight.last[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+}
+
 @media screen {
   .c4 .highlight.yellow[aria-current] {
     background-color: #fed200;
diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
index b780df1100..d05395ae74 100644
--- a/src/app/content/components/Page/PageContent.tsx
+++ b/src/app/content/components/Page/PageContent.tsx
@@ -21,6 +21,15 @@ export const contentTextStyle = css`
 // Search and key term highlights need to target .math as well,
 // otherwise math elements won't have full height background color
 const SELF_AND_CHILD_MATH_SELECTOR = '&, & .math';
+const screenreaderOnly = `
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+`;
 
 export default styled(MainContent)`
   ${contentTextStyle}
@@ -54,6 +63,21 @@ export default styled(MainContent)`
   .highlight {
     position: relative;
     z-index: 1;
+
+    @media screen {
+      &[data-start-message]::before,
+      &[data-end-message]::after {
+        ${screenreaderOnly}
+      }
+
+      &.first[data-start-message]::before {
+        content: attr(data-start-message);
+      }
+
+      &.last[data-end-message]::after {
+        content: attr(data-end-message);
+      }
+    }
   }
 
   /* stylelint-disable selector-class-pattern */
@@ -95,17 +119,21 @@ export default styled(MainContent)`
         }
       }
 
-      &.first.text.has-note:after {
-        position: absolute;
-        top: 0;
-        left: 0;
-        content: "";
-        width: 0;
-        height: 0;
-        opacity: 0.8;
-        border-left: ${highlightIndicatorSize}em solid ${style.focused};
-        border-top: ${highlightIndicatorSize}em solid transparent;
-        transform: rotate(90deg);
+      &.first.text.has-note {
+        &:not(.last)::before {
+          content: "";
+        }
+
+        ::before {
+          position: absolute;
+          top: 0;
+          left: 0;
+          clip-path: initial;
+          clip: initial;
+          opacity: 0.8;
+          border-left: ${highlightIndicatorSize}em solid ${style.focused};
+          border-bottom: ${highlightIndicatorSize}em solid transparent;
+        }
       }
 
       @media screen {
diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
index da08515acd..08423e2911 100644
--- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap
+++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -741,19 +741,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.yellow.first.text.has-note:after {
+.c78 .highlight.yellow.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.yellow.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #fed200;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.green {
@@ -788,19 +790,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.green.first.text.has-note:after {
+.c78 .highlight.green.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.green.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #92d101;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.blue {
@@ -835,19 +839,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.blue.first.text.has-note:after {
+.c78 .highlight.blue.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.blue.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #00c3ed;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.purple {
@@ -882,19 +888,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.purple.first.text.has-note:after {
+.c78 .highlight.purple.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.purple.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #545ec8;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.pink {
@@ -929,19 +937,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.pink.first.text.has-note:after {
+.c78 .highlight.pink.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.pink.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #de017e;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .os-figure,
@@ -2252,6 +2262,29 @@ li[aria-label="Current Page"] .c60 {
   }
 }
 
+@media screen {
+  .c78 .highlight[data-start-message]::before,
+  .c78 .highlight[data-end-message]::after {
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
+  .c78 .highlight.first[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c78 .highlight.last[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+}
+
 @media screen {
   .c78 .highlight.yellow[aria-current] {
     background-color: #fed200;
@@ -5515,19 +5548,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.yellow.first.text.has-note:after {
+.c78 .highlight.yellow.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.yellow.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #fed200;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.green {
@@ -5562,19 +5597,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.green.first.text.has-note:after {
+.c78 .highlight.green.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.green.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #92d101;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.blue {
@@ -5609,19 +5646,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.blue.first.text.has-note:after {
+.c78 .highlight.blue.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.blue.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #00c3ed;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.purple {
@@ -5656,19 +5695,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.purple.first.text.has-note:after {
+.c78 .highlight.purple.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.purple.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #545ec8;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .highlight.pink {
@@ -5703,19 +5744,21 @@ Array [
   border-bottom: 1.2em solid transparent;
 }
 
-.c78 .highlight.pink.first.text.has-note:after {
+.c78 .highlight.pink.first.text.has-note:not(.last)::before {
+  content: "";
+}
+
+.c78 .highlight.pink.first.text.has-note::before {
   position: absolute;
   top: 0;
   left: 0;
-  content: "";
-  width: 0;
-  height: 0;
+  -webkit-clip-path: initial;
+  clip-path: initial;
+  -webkit-clip: initial;
+  clip: initial;
   opacity: 0.8;
   border-left: 0.9em solid #de017e;
-  border-top: 0.9em solid transparent;
-  -webkit-transform: rotate(90deg);
-  -ms-transform: rotate(90deg);
-  transform: rotate(90deg);
+  border-bottom: 0.9em solid transparent;
 }
 
 .c78 .os-figure,
@@ -6873,6 +6916,29 @@ li[aria-label="Current Page"] .c60 {
   }
 }
 
+@media screen {
+  .c78 .highlight[data-start-message]::before,
+  .c78 .highlight[data-end-message]::after {
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
+  .c78 .highlight.first[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c78 .highlight.last[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+}
+
 @media screen {
   .c78 .highlight.yellow[aria-current] {
     background-color: #fed200;

From 9b2fe48f914d08c33a3e8e13d425239242a24406 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Fri, 26 Apr 2024 16:43:10 -0500
Subject: [PATCH 3/7] Put screenreaderOnly style in theme

---
 src/app/content/components/Page/PageContent.tsx | 11 +----------
 src/app/theme.ts                                | 10 ++++++++++
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
index d05395ae74..6a9299a926 100644
--- a/src/app/content/components/Page/PageContent.tsx
+++ b/src/app/content/components/Page/PageContent.tsx
@@ -2,7 +2,7 @@ import Color from 'color';
 import styled, { css } from 'styled-components/macro';
 import MainContent from '../../../components/MainContent';
 import { MAIN_CONTENT_ID } from '../../../context/constants';
-import theme from '../../../theme';
+import theme, { screenreaderOnly } from '../../../theme';
 import { highlightStyles } from '../../constants';
 import {
   highlightBlockPadding,
@@ -21,15 +21,6 @@ export const contentTextStyle = css`
 // Search and key term highlights need to target .math as well,
 // otherwise math elements won't have full height background color
 const SELF_AND_CHILD_MATH_SELECTOR = '&, & .math';
-const screenreaderOnly = `
-  height: 1px;
-  width: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  clip-path: inset(100%);
-  clip: rect(1px, 1px, 1px, 1px);
-`;
 
 export default styled(MainContent)`
   ${contentTextStyle}
diff --git a/src/app/theme.ts b/src/app/theme.ts
index a53b137f7e..9c0ed3de62 100644
--- a/src/app/theme.ts
+++ b/src/app/theme.ts
@@ -2,6 +2,16 @@ import { FlattenSimpleInterpolation } from 'styled-components';
 import { css } from 'styled-components/macro';
 // based on https://sketchviewer.com/sketches/59766aabb57e8900114c89ce/latest/
 
+export const screenreaderOnly = `
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+`;
+
 export interface ColorSet {
   base: string;
   foreground: string;

From 73efc7a9b4c78ca8f6df028d5202e5c9aa240eb8 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Thu, 30 May 2024 16:11:12 -0500
Subject: [PATCH 4/7] Fix highlighter branch

---
 yarn.lock | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/yarn.lock b/yarn.lock
index fc3054f56a..0291226639 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5085,7 +5085,7 @@
 
 "@openstax/highlighter@https://github.com/openstax/highlighter#use-mark-dist-branch":
   version "1.14.0"
-  resolved "https://github.com/openstax/highlighter#3da1c3824b59477b79d180f04b711b144b964c2c"
+  resolved "https://github.com/openstax/highlighter#0ef7228f54270372f7c67da80e716df58fbfc643"
   dependencies:
     "@openstax/highlights-client" "0.2.3"
     change-case "^4.0.0"

From fc8236969c2b5cfa7f0e37ec8a60c48c5d3da925 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Fri, 31 May 2024 12:55:08 -0500
Subject: [PATCH 5/7] Current highlight is .focus

---
 src/app/content/components/Page/PageContent.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
index 6a9299a926..474fcedb33 100644
--- a/src/app/content/components/Page/PageContent.tsx
+++ b/src/app/content/components/Page/PageContent.tsx
@@ -128,7 +128,7 @@ export default styled(MainContent)`
       }
 
       @media screen {
-        &[aria-current] {
+        &.focus {
           background-color: ${style.focused};
           border-bottom: 0.2rem solid ${style.focusBorder};
           padding: 0.2rem 0 0;
@@ -157,7 +157,7 @@ export default styled(MainContent)`
         background-color: #ffea00;
       }
 
-      &[aria-current] {
+      &.focus {
         ${SELF_AND_CHILD_MATH_SELECTOR} {
           background-color: #ff9e4b;
           padding: 0.2rem 0;

From 15251495a5af84a791df427d3a848d4cfdb961bc Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Fri, 31 May 2024 13:12:58 -0500
Subject: [PATCH 6/7] snaps

---
 .../__snapshots__/routes.spec.tsx.snap        | 36 +++++-----
 .../__snapshots__/Content.spec.tsx.snap       | 72 +++++++++----------
 2 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
index 94e1981882..2f2e5c16b6 100644
--- a/src/app/content/__snapshots__/routes.spec.tsx.snap
+++ b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -615,83 +615,83 @@ Array [
 }
 
 @media screen {
-  .c4 .highlight.yellow[aria-current] {
+  .c4 .highlight.yellow.focus {
     background-color: #fed200;
     border-bottom: 0.2rem solid #8f7700;
     padding: 0.2rem 0 0;
   }
 
-  .c4 .highlight.yellow[aria-current].block:after {
+  .c4 .highlight.yellow.focus.block:after {
     background-color: #fed200;
   }
 
-  .c4 .highlight.yellow[aria-current].first.text.has-note:after {
+  .c4 .highlight.yellow.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c4 .highlight.green[aria-current] {
+  .c4 .highlight.green.focus {
     background-color: #92d101;
     border-bottom: 0.2rem solid #4e6f01;
     padding: 0.2rem 0 0;
   }
 
-  .c4 .highlight.green[aria-current].block:after {
+  .c4 .highlight.green.focus.block:after {
     background-color: #92d101;
   }
 
-  .c4 .highlight.green[aria-current].first.text.has-note:after {
+  .c4 .highlight.green.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c4 .highlight.blue[aria-current] {
+  .c4 .highlight.blue.focus {
     background-color: #00c3ed;
     border-bottom: 0.2rem solid #006880;
     padding: 0.2rem 0 0;
   }
 
-  .c4 .highlight.blue[aria-current].block:after {
+  .c4 .highlight.blue.focus.block:after {
     background-color: #00c3ed;
   }
 
-  .c4 .highlight.blue[aria-current].first.text.has-note:after {
+  .c4 .highlight.blue.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c4 .highlight.purple[aria-current] {
+  .c4 .highlight.purple.focus {
     background-color: #545ec8;
     border-bottom: 0.2rem solid #141a3e;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c4 .highlight.purple[aria-current].block:after {
+  .c4 .highlight.purple.focus.block:after {
     background-color: #545ec8;
   }
 
-  .c4 .highlight.purple[aria-current].first.text.has-note:after {
+  .c4 .highlight.purple.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c4 .highlight.pink[aria-current] {
+  .c4 .highlight.pink.focus {
     background-color: #de017e;
     border-bottom: 0.2rem solid #560131;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c4 .highlight.pink[aria-current].block:after {
+  .c4 .highlight.pink.focus.block:after {
     background-color: #de017e;
   }
 
-  .c4 .highlight.pink[aria-current].first.text.has-note:after {
+  .c4 .highlight.pink.focus.first.text.has-note:after {
     display: none;
   }
 }
@@ -706,13 +706,13 @@ Array [
     background-color: #ffea00;
   }
 
-  .c4 .search-highlight[aria-current],
-  .c4 .search-highlight[aria-current] .math {
+  .c4 .search-highlight.focus,
+  .c4 .search-highlight.focus .math {
     background-color: #ff9e4b;
     padding: 0.2rem 0;
   }
 
-  .c4 .search-highlight[aria-current] .search-highlight {
+  .c4 .search-highlight.focus .search-highlight {
     background-color: unset;
   }
 }
diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
index 08423e2911..7892d2eb65 100644
--- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap
+++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -2286,83 +2286,83 @@ li[aria-label="Current Page"] .c60 {
 }
 
 @media screen {
-  .c78 .highlight.yellow[aria-current] {
+  .c78 .highlight.yellow.focus {
     background-color: #fed200;
     border-bottom: 0.2rem solid #8f7700;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.yellow[aria-current].block:after {
+  .c78 .highlight.yellow.focus.block:after {
     background-color: #fed200;
   }
 
-  .c78 .highlight.yellow[aria-current].first.text.has-note:after {
+  .c78 .highlight.yellow.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.green[aria-current] {
+  .c78 .highlight.green.focus {
     background-color: #92d101;
     border-bottom: 0.2rem solid #4e6f01;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.green[aria-current].block:after {
+  .c78 .highlight.green.focus.block:after {
     background-color: #92d101;
   }
 
-  .c78 .highlight.green[aria-current].first.text.has-note:after {
+  .c78 .highlight.green.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.blue[aria-current] {
+  .c78 .highlight.blue.focus {
     background-color: #00c3ed;
     border-bottom: 0.2rem solid #006880;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.blue[aria-current].block:after {
+  .c78 .highlight.blue.focus.block:after {
     background-color: #00c3ed;
   }
 
-  .c78 .highlight.blue[aria-current].first.text.has-note:after {
+  .c78 .highlight.blue.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.purple[aria-current] {
+  .c78 .highlight.purple.focus {
     background-color: #545ec8;
     border-bottom: 0.2rem solid #141a3e;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c78 .highlight.purple[aria-current].block:after {
+  .c78 .highlight.purple.focus.block:after {
     background-color: #545ec8;
   }
 
-  .c78 .highlight.purple[aria-current].first.text.has-note:after {
+  .c78 .highlight.purple.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.pink[aria-current] {
+  .c78 .highlight.pink.focus {
     background-color: #de017e;
     border-bottom: 0.2rem solid #560131;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c78 .highlight.pink[aria-current].block:after {
+  .c78 .highlight.pink.focus.block:after {
     background-color: #de017e;
   }
 
-  .c78 .highlight.pink[aria-current].first.text.has-note:after {
+  .c78 .highlight.pink.focus.first.text.has-note:after {
     display: none;
   }
 }
@@ -2377,13 +2377,13 @@ li[aria-label="Current Page"] .c60 {
     background-color: #ffea00;
   }
 
-  .c78 .search-highlight[aria-current],
-  .c78 .search-highlight[aria-current] .math {
+  .c78 .search-highlight.focus,
+  .c78 .search-highlight.focus .math {
     background-color: #ff9e4b;
     padding: 0.2rem 0;
   }
 
-  .c78 .search-highlight[aria-current] .search-highlight {
+  .c78 .search-highlight.focus .search-highlight {
     background-color: unset;
   }
 }
@@ -6940,83 +6940,83 @@ li[aria-label="Current Page"] .c60 {
 }
 
 @media screen {
-  .c78 .highlight.yellow[aria-current] {
+  .c78 .highlight.yellow.focus {
     background-color: #fed200;
     border-bottom: 0.2rem solid #8f7700;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.yellow[aria-current].block:after {
+  .c78 .highlight.yellow.focus.block:after {
     background-color: #fed200;
   }
 
-  .c78 .highlight.yellow[aria-current].first.text.has-note:after {
+  .c78 .highlight.yellow.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.green[aria-current] {
+  .c78 .highlight.green.focus {
     background-color: #92d101;
     border-bottom: 0.2rem solid #4e6f01;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.green[aria-current].block:after {
+  .c78 .highlight.green.focus.block:after {
     background-color: #92d101;
   }
 
-  .c78 .highlight.green[aria-current].first.text.has-note:after {
+  .c78 .highlight.green.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.blue[aria-current] {
+  .c78 .highlight.blue.focus {
     background-color: #00c3ed;
     border-bottom: 0.2rem solid #006880;
     padding: 0.2rem 0 0;
   }
 
-  .c78 .highlight.blue[aria-current].block:after {
+  .c78 .highlight.blue.focus.block:after {
     background-color: #00c3ed;
   }
 
-  .c78 .highlight.blue[aria-current].first.text.has-note:after {
+  .c78 .highlight.blue.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.purple[aria-current] {
+  .c78 .highlight.purple.focus {
     background-color: #545ec8;
     border-bottom: 0.2rem solid #141a3e;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c78 .highlight.purple[aria-current].block:after {
+  .c78 .highlight.purple.focus.block:after {
     background-color: #545ec8;
   }
 
-  .c78 .highlight.purple[aria-current].first.text.has-note:after {
+  .c78 .highlight.purple.focus.first.text.has-note:after {
     display: none;
   }
 }
 
 @media screen {
-  .c78 .highlight.pink[aria-current] {
+  .c78 .highlight.pink.focus {
     background-color: #de017e;
     border-bottom: 0.2rem solid #560131;
     padding: 0.2rem 0 0;
     color: #fff;
   }
 
-  .c78 .highlight.pink[aria-current].block:after {
+  .c78 .highlight.pink.focus.block:after {
     background-color: #de017e;
   }
 
-  .c78 .highlight.pink[aria-current].first.text.has-note:after {
+  .c78 .highlight.pink.focus.first.text.has-note:after {
     display: none;
   }
 }
@@ -7031,13 +7031,13 @@ li[aria-label="Current Page"] .c60 {
     background-color: #ffea00;
   }
 
-  .c78 .search-highlight[aria-current],
-  .c78 .search-highlight[aria-current] .math {
+  .c78 .search-highlight.focus,
+  .c78 .search-highlight.focus .math {
     background-color: #ff9e4b;
     padding: 0.2rem 0;
   }
 
-  .c78 .search-highlight[aria-current] .search-highlight {
+  .c78 .search-highlight.focus .search-highlight {
     background-color: unset;
   }
 }

From 5b0238f1e5acf059c2aeaa9dbf36e42bea0fa8be Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Fri, 31 May 2024 14:36:49 -0500
Subject: [PATCH 7/7] Pad highlight with note to help keep note indicator on
 the same line

---
 src/app/content/components/Page/PageContent.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
index 474fcedb33..60246d0e7b 100644
--- a/src/app/content/components/Page/PageContent.tsx
+++ b/src/app/content/components/Page/PageContent.tsx
@@ -115,6 +115,8 @@ export default styled(MainContent)`
           content: "";
         }
 
+        padding-left: 0.5rem;
+
         ::before {
           position: absolute;
           top: 0;