Focus on TOC when TOC is opened

For: openstax/unified#2711
Also added an aria-label to HighlightsHelpInfo close button

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.tsx

@@ -65,6 +65,13 @@ export class TableOfContents extends Component<SidebarProps> {
       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;
+
+      firstItemInToc?.focus();
+    }
   }
 
   public componentWillUnmount() {

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]}