Style highlight screenreader pseudoelements

openstax · Apr 22, 2024 · 5726161 · 5726161
1 parent 0b5e9b3
commit 5726161
Show file tree

Hide file tree

Showing 3 changed files with 258 additions and 131 deletions.
diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -320,19 +320,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 {
@@ -367,19 +369,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 {
@@ -414,19 +418,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 {
@@ -461,19 +467,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 {
@@ -508,19 +516,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,
@@ -580,6 +590,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
@@ -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 {