Use mark tag for highlights (#2176)

* Add start-selected marker * Format (hide) data for screenreaders For: openstax/unified#2792 * Decode highlight attributes for screenreader pseudoelements * Fix lint * Use data-start-message and data-end-message for content * Use Highlighter tag fix format goof --------- Co-authored-by: staxly[bot] <35789409+staxly[bot]@users.noreply.github.com>
openstax · Apr 11, 2024 · d9858ae · d9858ae
1 parent 82091b3
commit d9858ae
Show file tree

Hide file tree

Showing 9 changed files with 188 additions and 15 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -34,9 +34,6 @@
     } ],
     "font-family-no-duplicate-names": true,
     "font-family-no-missing-generic-family-keyword": true,
-    "function-comma-space-after": [ "always", {
-      "severity": "warning"
-    } ],
     "function-max-empty-lines": 0,
     "function-url-quotes": "always",
     "indentation": 2,
@@ -77,7 +74,7 @@
     } ],
     "unit-no-unknown": true,
     "unit-case": "lower",
-    "value-keyword-case": ["lower", ignoreKeywords: ["dummyValue"]],
+    "value-keyword-case": ["lower", {"ignoreKeywords": ["dummyValue"]}],
     "value-list-max-empty-lines": 0,
     "value-no-vendor-prefix": [ true, {
       "severity": "warning"

diff --git 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#v1.14.3",
     "@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/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -580,6 +580,29 @@ Array [
   }
 }
 
+@media screen {
+  .c4 .highlight::before,
+  .c4 .highlight::after {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  .c4 .highlight[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c4 .highlight[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+}
+
 @media screen {
   .c4 .highlight.yellow[aria-current] {
     background-color: #fed200;
@@ -667,11 +690,32 @@ Array [
     font-weight: bold;
   }
 
+  .c4 .search-highlight::before,
+  .c4 .search-highlight::after {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
   .c4 .search-highlight,
   .c4 .search-highlight .math {
     background-color: #ffea00;
   }
 
+  .c4 .search-highlight[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c4 .search-highlight[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+
   .c4 .search-highlight[aria-current],
   .c4 .search-highlight[aria-current] .math {
     background-color: #ff9e4b;

diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
@@ -7,12 +7,13 @@ import { highlightStyles } from '../../constants';
 import {
   highlightBlockPadding,
   highlightIndicatorSize,
-  highlightIndicatorSizeForBlock,
+  highlightIndicatorSizeForBlock
 } from '../../highlights/constants';
 import { contentTextWidth } from '../constants';
 
 export const contentTextStyle = css`
-  @media screen { /* full page width in print */
+  @media screen {
+    /* full page width in print */
     max-width: ${contentTextWidth}rem;
     margin: 0 auto;
   }
@@ -22,6 +23,19 @@ export const contentTextStyle = css`
 // otherwise math elements won't have full height background color
 const SELF_AND_CHILD_MATH_SELECTOR = '&, & .math';
 
+const hideBeforeAndAfter = `
+  &::before,
+  &::after {
+    clip-path: inset(100%);
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+`;
+
 export default styled(MainContent)`
   ${contentTextStyle}
   overflow: visible;
@@ -54,6 +68,18 @@ export default styled(MainContent)`
   .highlight {
     position: relative;
     z-index: 1;
+
+    @media screen {
+      ${hideBeforeAndAfter}
+
+      &[data-start-message]::before {
+        content: attr(data-start-message);
+      }
+
+      &[data-end-message]::after {
+        content: attr(data-end-message);
+      }
+    }
   }
 
   /* stylelint-disable selector-class-pattern */
@@ -63,7 +89,8 @@ export default styled(MainContent)`
   }
   /* stylelint-enable selector-class-pattern */
 
-  ${highlightStyles.map((style) => css`
+  ${highlightStyles.map(
+    style => css`
     .highlight.${style.label} {
       background-color: ${style.passive};
 
@@ -114,9 +141,10 @@ export default styled(MainContent)`
           border-bottom: 0.2rem solid ${style.focusBorder};
           padding: 0.2rem 0 0;
 
-          ${Color(style.focused).isDark() && css`
-            color: ${theme.color.text.white};
-          `}
+          ${Color(style.focused).isDark() &&
+            css`
+              color: ${theme.color.text.white};
+            `}
 
           &.block:after {
             background-color: ${style.focused};
@@ -128,16 +156,26 @@ export default styled(MainContent)`
         }
       }
     }
-  `)}
+  `
+  )}
 
   @media screen {
     .search-highlight {
+      ${hideBeforeAndAfter}
       font-weight: bold;
 
       ${SELF_AND_CHILD_MATH_SELECTOR} {
         background-color: #ffea00;
       }
 
+      &[data-start-message]::before {
+        content: attr(data-start-message);
+      }
+
+      &[data-end-message]::after {
+        content: attr(data-end-message);
+      }
+
       &[aria-current] {
         ${SELF_AND_CHILD_MATH_SELECTOR} {
           background-color: #ff9e4b;

diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -2215,6 +2215,29 @@ li[aria-label="Current Page"] .c60 {
   }
 }
 
+@media screen {
+  .c78 .highlight::before,
+  .c78 .highlight::after {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  .c78 .highlight[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c78 .highlight[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+}
+
 @media screen {
   .c78 .highlight.yellow[aria-current] {
     background-color: #fed200;
@@ -2302,11 +2325,32 @@ li[aria-label="Current Page"] .c60 {
     font-weight: bold;
   }
 
+  .c78 .search-highlight::before,
+  .c78 .search-highlight::after {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
   .c78 .search-highlight,
   .c78 .search-highlight .math {
     background-color: #ffea00;
   }
 
+  .c78 .search-highlight[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c78 .search-highlight[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+
   .c78 .search-highlight[aria-current],
   .c78 .search-highlight[aria-current] .math {
     background-color: #ff9e4b;
@@ -6766,6 +6810,29 @@ li[aria-label="Current Page"] .c60 {
   }
 }
 
+@media screen {
+  .c78 .highlight::before,
+  .c78 .highlight::after {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
+  .c78 .highlight[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c78 .highlight[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+}
+
 @media screen {
   .c78 .highlight.yellow[aria-current] {
     background-color: #fed200;
@@ -6853,11 +6920,32 @@ li[aria-label="Current Page"] .c60 {
     font-weight: bold;
   }
 
+  .c78 .search-highlight::before,
+  .c78 .search-highlight::after {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
+
   .c78 .search-highlight,
   .c78 .search-highlight .math {
     background-color: #ffea00;
   }
 
+  .c78 .search-highlight[data-start-message]::before {
+    content: attr(data-start-message);
+  }
+
+  .c78 .search-highlight[data-end-message]::after {
+    content: attr(data-end-message);
+  }
+
   .c78 .search-highlight[aria-current],
   .c78 .search-highlight[aria-current] .math {
     background-color: #ff9e4b;

diff --git a/src/app/messages/en/messages.json b/src/app/messages/en/messages.json
@@ -65,8 +65,10 @@
   "i18n:highlighter:edit-note:label": "Edit highlighted note",
   "i18n:highlighter:highlight:end": "End of {style} highlight",
   "i18n:highlighter:highlight:start": "Start {style} highlight",
+  "i18n:highlighter:highlight:start-selected": "Start selected {style} highlight",
   "i18n:highlighter:highlight:end:search": "End of search result",
   "i18n:highlighter:highlight:start:search": "Start search result",
+  "i18n:highlighter:highlight:start-selected:search": "Start selected search result",
   "i18n:highlighting:button:cancel": "Cancel",
   "i18n:highlighting:button:delete": "Delete",
   "i18n:highlighting:button:save": "Save",

diff --git a/src/app/messages/es/messages.json b/src/app/messages/es/messages.json
@@ -63,8 +63,10 @@
   "i18n:highlighter:edit-note:label": "Editar nota resaltada",
   "i18n:highlighter:highlight:end": "Final de texto resaltado {style, select, blue {azul} green {verde} pink {rosado} purple {morado} yellow {amarillo} other {{style}}}",
   "i18n:highlighter:highlight:start": "Comienzo de texto resaltado {style, select, blue {azul} green {verde} pink {rosado} purple {morado} yellow {amarillo} other {{style}}}",
+  "i18n:highlighter:highlight:start-selected": "Comienzo de texto resaltado seleccionado {style, select, blue {azul} green {verde} pink {rosado} purple {morado} yellow {amarillo} other {{style}}}",
   "i18n:highlighter:highlight:end:search": "Final de resultado de búsqueda",
   "i18n:highlighter:highlight:start:search": "Comienzo de resultado de búsqueda",
+  "i18n:highlighter:highlight:start-selected:search": "Comienzo de resultado de búsqueda seleccionado",
   "i18n:highlighting:button:cancel": "Cancelar",
   "i18n:highlighting:button:delete": "Eliminar",
   "i18n:highlighting:button:save": "Guardar",

diff --git a/src/app/messages/pl/messages.json b/src/app/messages/pl/messages.json
@@ -63,8 +63,10 @@
   "i18n:highlighter:edit-note:label": "edytuj notatkę",
   "i18n:highlighter:highlight:end": "Koniec {style, select, blue {niebieskiego} green {zielonego} pink {różowego} purple {fioletowego} yellow {żółtego} other {{style}}} zakreślenia",
   "i18n:highlighter:highlight:start": "Początek {style, select, blue {niebieskiego} green {zielonego} pink {różowego} purple {fioletowego} yellow {żółtego} other {{style}}} zakreślenia",
+  "i18n:highlighter:highlight:start-selected": "Początek {style, select, blue {niebieskiego} green {zielonego} pink {różowego} purple {fioletowego} yellow {żółtego} other {{style}}} wybranego",
   "i18n:highlighter:highlight:end:search": "Koniec zakreślenia wyniku wyszukiwania",
   "i18n:highlighter:highlight:start:search": "Początek zakreślenia wyniku wyszukiwania",
+  "i18n:highlighter:highlight:start-selected:search": "Początek wybranego wyniku wyszukiwania",
   "i18n:highlighting:button:cancel": "Anuluj",
   "i18n:highlighting:button:delete": "Usuń",
   "i18n:highlighting:button:save": "Zachowaj",

diff --git 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#v1.14.3":
+  version "1.14.0"
+  resolved "https://github.com/openstax/highlighter#fd87f0b8c40cc1bbfc1fa539adadf3cb1b6f65b5"
   dependencies:
     "@openstax/highlights-client" "0.2.3"
     change-case "^4.0.0"