Format (hide) data for screenreaders

For: openstax/unified#2792
openstax · Feb 27, 2024 · aeaccfb · aeaccfb
1 parent 756888e
commit aeaccfb
Show file tree

Hide file tree

Showing 4 changed files with 192 additions and 1 deletion.
diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -292,6 +292,18 @@ Array [
   background-color: #ffff8a;
 }
 
+.c4 .highlight.yellow [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c4 .highlight.yellow.block {
   display: block;
 }
@@ -339,6 +351,18 @@ Array [
   background-color: #def99f;
 }
 
+.c4 .highlight.green [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c4 .highlight.green.block {
   display: block;
 }
@@ -386,6 +410,18 @@ Array [
   background-color: #c8f5ff;
 }
 
+.c4 .highlight.blue [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c4 .highlight.blue.block {
   display: block;
 }
@@ -433,6 +469,18 @@ Array [
   background-color: #cbcfff;
 }
 
+.c4 .highlight.purple [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c4 .highlight.purple.block {
   display: block;
 }
@@ -480,6 +528,18 @@ Array [
   background-color: #ffc5e1;
 }
 
+.c4 .highlight.pink [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c4 .highlight.pink.block {
   display: block;
 }

diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
@@ -67,6 +67,17 @@ export default styled(MainContent)`
     .highlight.${style.label} {
       background-color: ${style.passive};
 
+      /* Hide data per https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark */
+      [data-for-screenreaders="true"] {
+        height: 1px;
+        width: 1px;
+        overflow: hidden;
+        clip-path: inset(100%);
+        clip: rect(1px, 1px, 1px, 1px);
+        position: absolute;
+        white-space: nowrap;
+      }
+
       &.block {
         display: block;
 

diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -675,6 +675,18 @@ Array [
   background-color: #ffff8a;
 }
 
+.c78 .highlight.yellow [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c78 .highlight.yellow.block {
   display: block;
 }
@@ -722,6 +734,18 @@ Array [
   background-color: #def99f;
 }
 
+.c78 .highlight.green [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c78 .highlight.green.block {
   display: block;
 }
@@ -769,6 +793,18 @@ Array [
   background-color: #c8f5ff;
 }
 
+.c78 .highlight.blue [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c78 .highlight.blue.block {
   display: block;
 }
@@ -816,6 +852,18 @@ Array [
   background-color: #cbcfff;
 }
 
+.c78 .highlight.purple [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c78 .highlight.purple.block {
   display: block;
 }
@@ -863,6 +911,18 @@ Array [
   background-color: #ffc5e1;
 }
 
+.c78 .highlight.pink [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c78 .highlight.pink.block {
   display: block;
 }
@@ -5378,6 +5438,18 @@ Array [
   background-color: #ffff8a;
 }
 
+.c78 .highlight.yellow [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c78 .highlight.yellow.block {
   display: block;
 }
@@ -5425,6 +5497,18 @@ Array [
   background-color: #def99f;
 }
 
+.c78 .highlight.green [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c78 .highlight.green.block {
   display: block;
 }
@@ -5472,6 +5556,18 @@ Array [
   background-color: #c8f5ff;
 }
 
+.c78 .highlight.blue [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c78 .highlight.blue.block {
   display: block;
 }
@@ -5519,6 +5615,18 @@ Array [
   background-color: #cbcfff;
 }
 
+.c78 .highlight.purple [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c78 .highlight.purple.block {
   display: block;
 }
@@ -5566,6 +5674,18 @@ Array [
   background-color: #ffc5e1;
 }
 
+.c78 .highlight.pink [data-for-screenreaders="true"] {
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  -webkit-clip-path: inset(100%);
+  clip-path: inset(100%);
+  -webkit-clip: rect(1px,1px,1px,1px);
+  clip: rect(1px,1px,1px,1px);
+  position: absolute;
+  white-space: nowrap;
+}
+
 .c78 .highlight.pink.block {
   display: block;
 }

diff --git 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#7c69b4ff90c4919046166bacc38341d4f0dfae7f"
+  resolved "https://github.com/openstax/highlighter#73dab05f2fd59eefc312eb18f3854fd4c3432945"
   dependencies:
     "@openstax/highlights-client" "0.2.3"
     change-case "^4.0.0"