Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Focus on selected search result #2329

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Focus on selected search result #2329

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d061035
Focus on selected search result
RoyEJohnson Aug 19, 2024
ef7eeec
Merge branch 'main' into focus-on-selected-search-result
staxly[bot] Sep 17, 2024
02eea22
Merge branch 'main' into focus-on-selected-search-result
staxly[bot] Sep 17, 2024
d551421
Merge branch 'main' into focus-on-selected-search-result
staxly[bot] Sep 17, 2024
fc99ad0
Merge branch 'main' into focus-on-selected-search-result
staxly[bot] Sep 17, 2024
fd06f30
Merge branch 'main' into focus-on-selected-search-result
staxly[bot] Sep 19, 2024
ce79c2d
Merge branch 'main' into focus-on-selected-search-result
staxly[bot] Sep 23, 2024
1437ade
Merge branch 'main' into focus-on-selected-search-result
staxly[bot] Oct 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 14 additions & 0 deletions src/app/content/__snapshots__/routes.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
7 changes: 6 additions & 1 deletion src/app/content/components/Page/PageContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -148,6 +148,11 @@ export default styled(MainContent)`
background-color: unset;
}
}

[data-for-screenreaders="true"]::before {
content: attr(data-message);
${hiddenButAccessible}
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/app/content/components/Page/highlightManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/app/content/components/Page/searchHighlightManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
28 changes: 28 additions & 0 deletions src/app/content/components/__snapshots__/Content.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2366,6 +2366,20 @@ li[aria-label="Current Page"] .c61 {
.c79 .search-highlight[aria-current] .search-highlight {
background-color: unset;
}

.c78 .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) {
Expand Down Expand Up @@ -7004,6 +7018,20 @@ li[aria-label="Current Page"] .c61 {
.c79 .search-highlight[aria-current] .search-highlight {
background-color: unset;
}

.c78 .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) {
Expand Down
2 changes: 0 additions & 2 deletions src/app/content/search/components/SearchResultsSidebar/SearchResultContainers.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
);
Expand Down
6 changes: 3 additions & 3 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading