Only include screenreader markers for first and last pieces of highlight

openstax · Apr 16, 2024 · c6d7583 · c6d7583
1 parent 9f4a212
commit c6d7583
Showing 1 changed file with 16 additions and 13 deletions.
diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
@@ -76,11 +76,11 @@ export default styled(MainContent)`
     @media screen {
       ${hideBeforeAndAfter}
 
-      &[data-start-message]::before {
+      &.first[data-start-message]::before {
         content: attr(data-start-message);
       }
 
-      &[data-end-message]::after {
+      &.last[data-end-message]::after {
         content: attr(data-end-message);
       }
     }
@@ -126,17 +126,20 @@ 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 {
+        :after {
+          position: absolute;
+          opacity: 0.8;
+          top: 0;
+          left: 0;
+          border-left: ${highlightIndicatorSize}em solid ${style.focused};
+          border-bottom: ${highlightIndicatorSize}em solid transparent;
+        }
+        &:not(.last):after {
+          content: "";
+          width: 0;
+          height: 0;
+        }
       }
 
       @media screen {