diff --git a/package.json b/package.json index 796a867d93..02e593b899 100644 --- 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 index e35265bff3..7db3791614 100644 --- 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 index b780df1100..4d1179453e 100644 --- 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 index 090cda9021..e017945410 100644 --- 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 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 index 4511f2699a..fe4dac9320 100644 --- 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 index 661f685e36..a7ad86049e 100644 --- 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 index 388505de9a..44fa6a6b6d 100644 --- 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 index 01024c86f9..27cec8ba6a 100644 --- 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 index ac8cb97a43..f08362b420 100644 --- 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"