From aeaccfb0832b6800dd5cda916a3863f79b40a65c Mon Sep 17 00:00:00 2001 From: Roy Johnson Date: Tue, 27 Feb 2024 14:38:22 -0600 Subject: [PATCH] Format (hide) data for screenreaders For: https://github.com/openstax/unified/issues/2792 --- .../__snapshots__/routes.spec.tsx.snap | 60 +++++++++ .../content/components/Page/PageContent.tsx | 11 ++ .../__snapshots__/Content.spec.tsx.snap | 120 ++++++++++++++++++ yarn.lock | 2 +- 4 files changed, 192 insertions(+), 1 deletion(-) diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap index 45860a1cbd..2cd4702046 100644 --- 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 index b780df1100..8d868a6585 100644 --- 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 index bf6979a903..fb4b51eee1 100644 --- 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 index 599ac996d6..f5d048a5e1 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#7c69b4ff90c4919046166bacc38341d4f0dfae7f" + resolved "https://github.com/openstax/highlighter#73dab05f2fd59eefc312eb18f3854fd4c3432945" dependencies: "@openstax/highlights-client" "0.2.3" change-case "^4.0.0"