Focus on TOC when TOC is opened

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<InnerProps>) =>
+const TOCControl = ({ message, children, ...props }: React.PropsWithChildren<InnerProps>) =>
   <OpenButton
     aria-label={useIntl().formatMessage({ id: message })}
     {...props}

src/app/content/components/TableOfContents/index.spec.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import { unmountComponentAtNode } from 'react-dom';
+import { act as reactDomAct } from 'react-dom/test-utils';
 import renderer from 'react-test-renderer';
 import ConnectedTableOfContents, { TableOfContents } from '.';
 import createTestStore from '../../../../test/createTestStore';
 import { book as archiveBook, page, shortPage } from '../../../../test/mocks/archiveLoader';
 import { mockCmsBook } from '../../../../test/mocks/osWebLoader';
 import { renderToDom } from '../../../../test/reactutils';
 import TestContainer from '../../../../test/TestContainer';
+import * as reactUtils from '../../../reactUtils';
 import { AppState, Store } from '../../../types';
 import { assertWindow } from '../../../utils';
 import * as actions from '../../actions';
 import { initialState } from '../../reducer';
 import { formatBookData } from '../../utils';
 import * as domUtils from '../../utils/domUtils';
-import * as reactUtils from '../../../reactUtils';
 
 const book = formatBookData(archiveBook, mockCmsBook);
 
@@ -76,13 +77,45 @@ describe('TableOfContents', () => {
     renderer.act(() => {
       store.dispatch(actions.closeToc());
     });
+
     expect(component.root.findByType(TableOfContents).props.isOpen).toBe(false);
+
     renderer.act(() => {
       store.dispatch(actions.openToc());
     });
     expect(component.root.findByType(TableOfContents).props.isOpen).toBe(true);
   });
 
+  it('focuses when opening', () => {
+    jest.spyOn(reactUtils, 'useMatchMobileMediumQuery')
+      .mockReturnValue(true);
+
+    const {root} = renderToDom(<TestContainer store={store}>
+      <ConnectedTableOfContents />
+    </TestContainer>);
+    const sb = root.querySelector('[data-testid="toc"]')!;
+    const firstTocItem = sb.querySelector('ol > li a, old > li summary') as HTMLElement;
+    const focusSpy = jest.spyOn(firstTocItem as any, 'focus');
+
+    reactDomAct(() => {
+      store.dispatch(actions.closeToc());
+    });
+    reactDomAct(() => {
+      sb?.dispatchEvent(new Event('transitionend'));
+    });
+
+    expect(focusSpy).not.toHaveBeenCalled();
+
+    reactDomAct(() => {
+      store.dispatch(actions.openToc());
+    });
+    reactDomAct(() => {
+      sb?.dispatchEvent(new Event('transitionend'));
+    });
+
+    expect(focusSpy).toHaveBeenCalled();
+  });
+
   it('resets toc on navigate', () => {
     const dispatchSpy = jest.spyOn(store, 'dispatch');
 
@@ -105,7 +138,7 @@ describe('TableOfContents', () => {
 
     const event = document.createEvent('UIEvents');
     event.initEvent('scroll', true, false);
-    renderer.act(() => {
+    reactDomAct(() => {
       assertWindow().dispatchEvent(event);
     });
 

src/app/content/components/TableOfContents/index.tsx

@@ -64,12 +64,32 @@ const SidebarBody = React.forwardRef<
   HTMLElement,
   React.ComponentProps<typeof SidebarPaneBody>
 >((props, ref) => {
+  const mRef = ref as MutableRefObject<HTMLElement>;
+
+  React.useEffect(
+    () => {
+      const firstItemInToc = mRef?.current?.querySelector(
+        'ol > li a, old > li summary'
+      ) as HTMLElement;
+      const el = mRef.current;
+      const transitionListener = () => {
+        firstItemInToc?.focus();
+      };
+
+      if (props.isTocOpen) {
+        el?.addEventListener('transitionend', transitionListener);
+      }
+
+      return () => el?.removeEventListener('transitionend', transitionListener);
+    },
+    [props.isTocOpen, mRef]
+  );
 
   return (
     <React.Fragment>
       {typeof window !== 'undefined' && (
         <TabTrapper
-          mRef={ref as MutableRefObject<HTMLElement>}
+          mRef={mRef}
           isTocOpen={props.isTocOpen}
         />
       )}

src/app/content/highlights/components/SummaryPopup/HighlightsHelpInfo.tsx

@@ -93,7 +93,7 @@ const HighlightsHelpInfo = () => {
 
   return <Wrapper data-analytics-region='Mobile MH help info'>
     <Message />
-    <PlainButton onClick={dismiss} data-analytics-label='close'>
+    <PlainButton onClick={dismiss} data-analytics-label='close' aria-label='dismiss'>
       <CloseIcon />
     </PlainButton>
   </Wrapper>;

src/app/content/highlights/components/SummaryPopup/__snapshots__/HighlightsHelpInfo.spec.tsx.snap

@@ -86,6 +86,7 @@ exports[`HighlightsHelpInfo matches snapshot when showed 1`] = `
     }
   />
   <button
+    aria-label="dismiss"
     className="c1"
     data-analytics-label="close"
     onClick={[Function]}