From 3871dc3517463a09672bf5379c48636d6cb0eebd Mon Sep 17 00:00:00 2001 From: Roy Johnson Date: Fri, 5 Jan 2024 16:37:40 -0600 Subject: [PATCH 1/6] Focus on TOC when TOC is opened For: https://github.com/openstax/unified/issues/2711 Also added an aria-label to HighlightsHelpInfo close button Update index.spec.tsx Delay setting focus Add space after comma in css --- src/app/content/components/SidebarControl.tsx | 2 +- .../components/TableOfContents/index.spec.tsx | 2 ++ .../content/components/TableOfContents/index.tsx | 13 +++++++++++++ .../components/SummaryPopup/HighlightsHelpInfo.tsx | 2 +- .../__snapshots__/HighlightsHelpInfo.spec.tsx.snap | 1 + 5 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/app/content/components/SidebarControl.tsx b/src/app/content/components/SidebarControl.tsx index 8d8806d340..64f296a36b 100644 --- a/src/app/content/components/SidebarControl.tsx +++ b/src/app/content/components/SidebarControl.tsx @@ -122,7 +122,7 @@ export const CloseToCAndMobileMenuButton = styled((props) => { `; // tslint:disable-next-line:variable-name -export const TOCControl = ({ message, children, ...props }: React.PropsWithChildren) => +const TOCControl = ({ message, children, ...props }: React.PropsWithChildren) => { expect(scrollSidebarSectionIntoView).toHaveBeenCalledTimes(2); }); + jest.useFakeTimers(); it('opens and closes', () => { jest.spyOn(reactUtils, 'useMatchMobileQuery') .mockReturnValue(true); @@ -81,6 +82,7 @@ describe('TableOfContents', () => { store.dispatch(actions.openToc()); }); expect(component.root.findByType(TableOfContents).props.isOpen).toBe(true); + jest.runAllTimers(); }); it('resets toc on navigate', () => { diff --git a/src/app/content/components/TableOfContents/index.tsx b/src/app/content/components/TableOfContents/index.tsx index c9d485a737..cfe39a2436 100644 --- a/src/app/content/components/TableOfContents/index.tsx +++ b/src/app/content/components/TableOfContents/index.tsx @@ -207,6 +207,19 @@ export class TableOfContents extends Component { expandCurrentChapter(this.activeSection.current); this.scrollToSelectedPage(); } + if (this.props.isOpen && !prevProps.isOpen) { + const firstItemInToc = this.sidebar.current?.querySelector( + 'ol > li a, old > li summary' + ) as HTMLElement; + + // Something else affects focus; wait for it to pass + assertWindow().setTimeout( + () => { + firstItemInToc?.focus(); + }, + 100 + ); + } } public componentWillUnmount() { diff --git a/src/app/content/highlights/components/SummaryPopup/HighlightsHelpInfo.tsx b/src/app/content/highlights/components/SummaryPopup/HighlightsHelpInfo.tsx index af88333868..b5131119c0 100644 --- a/src/app/content/highlights/components/SummaryPopup/HighlightsHelpInfo.tsx +++ b/src/app/content/highlights/components/SummaryPopup/HighlightsHelpInfo.tsx @@ -93,7 +93,7 @@ const HighlightsHelpInfo = () => { return - + ; diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/HighlightsHelpInfo.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/HighlightsHelpInfo.spec.tsx.snap index a6c98076f3..8cf8143db7 100644 --- a/src/app/content/highlights/components/SummaryPopup/__snapshots__/HighlightsHelpInfo.spec.tsx.snap +++ b/src/app/content/highlights/components/SummaryPopup/__snapshots__/HighlightsHelpInfo.spec.tsx.snap @@ -86,6 +86,7 @@ exports[`HighlightsHelpInfo matches snapshot when showed 1`] = ` } />