Merge branch 'main' into make-color-picker-a-radio-group

openstax · Oct 15, 2024 · 73b40eb · 73b40eb
2 parents c3f8784 + 31b0456
commit 73b40eb
Show file tree

Hide file tree

Showing 9 changed files with 54 additions and 11 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.2",
+    "@openstax/highlighter": "https://github.com/openstax/highlighter#release-1.14.3",
     "@openstax/open-search-client": "0.1.0-build.7",
     "@openstax/ts-utils": "1.6.0",
     "@openstax/ui-components": "openstax/ui-components#1.6.4",

diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -682,6 +682,20 @@ Array [
   .c4 .search-highlight[aria-current] .search-highlight {
     background-color: unset;
   }
+
+  .c4 .search-highlight [data-for-screenreaders="true"]::before {
+    content: attr(data-message);
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    -webkit-clip: rect(0,0,0,0);
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    border: 0;
+  }
 }
 
 @media screen and (max-width:90em) {

diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
@@ -2,7 +2,7 @@ import Color from 'color';
 import styled, { css } from 'styled-components/macro';
 import MainContent from '../../../components/MainContent';
 import { MAIN_CONTENT_ID } from '../../../context/constants';
-import theme from '../../../theme';
+import theme, { hiddenButAccessible } from '../../../theme';
 import { highlightStyles } from '../../constants';
 import {
   highlightBlockPadding,
@@ -148,6 +148,11 @@ export default styled(MainContent)`
           background-color: unset;
         }
       }
+
+      [data-for-screenreaders="true"]::before {
+        content: attr(data-message);
+        ${hiddenButAccessible}
+      }
     }
   }
 

diff --git a/src/app/content/components/Page/highlightManager.ts b/src/app/content/components/Page/highlightManager.ts
@@ -68,7 +68,7 @@ const onFocusHighlight = (
   highlightManagerServices.getProp().focus(highlight.id);
 });
 
-// Without defer when user focus highlight with TAB and then click on the card the activeElement
+// Without defer, when user focus highlight with TAB and then click on the card the activeElement
 // will be set to a <body> element for some reason
 const onFocusOutHighlight = (props: HighlightProp) => defer(() => {
   // Do not clear focus from highlight if it was moved to the Card component or to another highlight

diff --git a/src/app/content/components/Page/searchHighlightManager.ts b/src/app/content/components/Page/searchHighlightManager.ts
@@ -74,7 +74,7 @@ const selectResult = (services: Services, previous: HighlightProp | null, curren
     allImagesLoaded(services.container).then(
       () => {
         const target = selectedElements[0] as HTMLElement;
-        const focusTarget: HTMLElement | null = target.querySelector('[tabindex="0"]');
+        const focusTarget: HTMLElement | null = target.querySelector('[tabindex="0"],[tabindex="-1"]');
 
         focusTarget?.focus();
       }

diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -2366,6 +2366,20 @@ li[aria-label="Current Page"] .c61 {
   .c79 .search-highlight[aria-current] .search-highlight {
     background-color: unset;
   }
+
+  .c79 .search-highlight [data-for-screenreaders="true"]::before {
+    content: attr(data-message);
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    -webkit-clip: rect(0,0,0,0);
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    border: 0;
+  }
 }
 
 @media screen and (max-width:50em) {
@@ -7004,6 +7018,20 @@ li[aria-label="Current Page"] .c61 {
   .c79 .search-highlight[aria-current] .search-highlight {
     background-color: unset;
   }
+
+  .c79 .search-highlight [data-for-screenreaders="true"]::before {
+    content: attr(data-message);
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    -webkit-clip: rect(0,0,0,0);
+    clip: rect(0,0,0,0);
+    white-space: nowrap;
+    border: 0;
+  }
 }
 
 @media screen and (max-width:50em) {

diff --git a/src/app/content/search/components/SearchResultsSidebar/RelatedKeyTerms.tsx b/src/app/content/search/components/SearchResultsSidebar/RelatedKeyTerms.tsx
@@ -29,8 +29,6 @@ const RelatedKeyTerms = ({ book, keyTermHits, selectedResult }: {
       getPage={(hit: SearchResultHit) => assertDefined(findArchiveTreeNodeById(book.tree, hit.source.pageId), 'hit has to be in a book')}
       onClick={() => {
         dispatch(closeSearchResultsMobile());
-        // Timeout may not be necessary after #2221 is merged
-        setTimeout(() => document?.querySelector('main')?.focus(), 20);
       }}
       selectedResult={selectedResult}
     />

diff --git a/src/app/content/search/components/SearchResultsSidebar/SearchResultContainers.tsx b/src/app/content/search/components/SearchResultsSidebar/SearchResultContainers.tsx
@@ -69,8 +69,6 @@ const SearchResult = (props: {
   const selectResultAndFocus = React.useCallback(
     (result: SelectedResult) => {
       props.selectResult(result);
-      // Timeout may not be necessary after #2221 is merged
-      setTimeout(() => document?.querySelector('main')?.focus(), 20);
     },
     [props]
   );

diff --git a/yarn.lock b/yarn.lock
@@ -5133,9 +5133,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#release-1.14.3":
+  version "1.14.3"
+  resolved "https://github.com/openstax/highlighter#b9418d54bc705cde42c2e628958bf1837bea4459"
   dependencies:
     "@openstax/highlights-client" "0.2.3"
     change-case "^4.0.0"