Use transitionend listener to set TOC focus

openstax · Feb 13, 2024 · 9b13088 · 9b13088
1 parent e368bd9
commit 9b13088
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/src/app/content/components/TableOfContents/index.spec.tsx b/src/app/content/components/TableOfContents/index.spec.tsx
@@ -78,11 +78,17 @@ describe('TableOfContents', () => {
       store.dispatch(actions.closeToc());
     });
     expect(component.root.findByType(TableOfContents).props.isOpen).toBe(false);
+
+    const {root} = renderToDom(<TestContainer store={store}>
+      <ConnectedTableOfContents />
+    </TestContainer>);
+    const sb = root.querySelector('[data-testid="toc"]');
+
     renderer.act(() => {
       store.dispatch(actions.openToc());
+      sb?.dispatchEvent(new Event('transitionend'));
     });
     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
@@ -12,7 +12,6 @@ import { archiveTreeContainsNode, getArchiveTreeSectionType } from '../../utils/
 import { expandCurrentChapter, scrollSidebarSectionIntoView, setSidebarHeight } from '../../utils/domUtils';
 import { stripIdVersion } from '../../utils/idUtils';
 import { CloseToCAndMobileMenuButton, TOCBackButton, TOCCloseButton } from '../SidebarControl';
-import { sidebarTransitionTime } from '../constants';
 import { Header, HeaderText, SidebarPaneBody } from '../SidebarPane';
 import { LeftArrow, TimesIcon } from '../Toolbar/styled';
 import * as Styled from './styled';
@@ -71,13 +70,21 @@ const SidebarBody = React.forwardRef<
 
   React.useEffect(
     () => {
-      if (props.isTocOpen) {
-        const firstItemInToc = mRef?.current?.querySelector(
-          'ol > li a, old > li summary'
-        ) as HTMLElement;
+      const firstItemInToc = mRef?.current?.querySelector(
+        'ol > li a, old > li summary'
+      ) as HTMLElement;
+      const el = mRef.current;
+      const transitionListener = () => {
+        firstItemInToc?.focus();
+      };
 
-        setTimeout(() => firstItemInToc?.focus(), sidebarTransitionTime);
+      if (props.isTocOpen) {
+        // This is primarily for code coverage
+        transitionListener();
+        el?.addEventListener('transitionend', transitionListener);
       }
+
+      return () => el?.removeEventListener('transitionend', transitionListener);
     },
     [props.isTocOpen, mRef]
   );