Fix note indicator and tabbability

openstax · Apr 15, 2024 · 262eb1a · 262eb1a
1 parent ffaa8cf
commit 262eb1a
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 30 deletions.
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.3",
+    "@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/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -583,17 +583,20 @@ 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::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c4 .highlight[data-start-message]::before {
     content: attr(data-start-message);
   }
@@ -692,17 +695,20 @@ Array [
 
   .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::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c4 .search-highlight,
   .c4 .search-highlight .math {
     background-color: #ffea00;

diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
@@ -23,17 +23,21 @@ export const contentTextStyle = css`
 // otherwise math elements won't have full height background color
 const SELF_AND_CHILD_MATH_SELECTOR = '&, & .math';
 
+// after would normally also have clips, but the note indicator
+// corner color needs not to be hidden
 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;
   }
+  &::before {
+    clip-path: inset(100%);
+    clip: rect(1px, 1px, 1px, 1px);
+  }
 `;
 
 export default styled(MainContent)`

diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -2218,17 +2218,20 @@ 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::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c78 .highlight[data-start-message]::before {
     content: attr(data-start-message);
   }
@@ -2327,17 +2330,20 @@ li[aria-label="Current Page"] .c60 {
 
   .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::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c78 .search-highlight,
   .c78 .search-highlight .math {
     background-color: #ffea00;
@@ -6813,17 +6819,20 @@ 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::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c78 .highlight[data-start-message]::before {
     content: attr(data-start-message);
   }
@@ -6922,17 +6931,20 @@ li[aria-label="Current Page"] .c60 {
 
   .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::before {
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-clip: rect(1px,1px,1px,1px);
+    clip: rect(1px,1px,1px,1px);
+  }
+
   .c78 .search-highlight,
   .c78 .search-highlight .math {
     background-color: #ffea00;

diff --git a/src/app/content/highlights/components/Note.tsx b/src/app/content/highlights/components/Note.tsx
@@ -84,7 +84,7 @@ const Note = ({onChange, onFocus, note, textareaRef, edit = false}: Props) => {
   React.useEffect(setTextAreaHeight, [note, setTextAreaHeight]);
 
   return (
-    <WrapperLabel for='note-textarea'>
+    <WrapperLabel htmlFor='note-textarea'>
       <TextArea
         id='note-textarea'
         ref={textareaRef}

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.3":
+"@openstax/highlighter@https://github.com/openstax/highlighter#use-mark-dist-branch":
   version "1.14.0"
-  resolved "https://github.com/openstax/highlighter#fd87f0b8c40cc1bbfc1fa539adadf3cb1b6f65b5"
+  resolved "https://github.com/openstax/highlighter#4dedeb4943139ce1050f3c2bf53c6b335eeb18db"
   dependencies:
     "@openstax/highlights-client" "0.2.3"
     change-case "^4.0.0"