From 1838b76cb09c61aa34d3723c516cfa67276c3143 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Fri, 5 Jan 2024 16:37:40 -0600
Subject: [PATCH] Focus on TOC when TOC is opened

For: https://github.com/openstax/unified/issues/2711
Also added an aria-label to HighlightsHelpInfo close button
---
 src/app/content/components/SidebarControl.tsx              | 2 +-
 src/app/content/components/TableOfContents/index.tsx       | 7 +++++++
 .../components/SummaryPopup/HighlightsHelpInfo.tsx         | 2 +-
 .../__snapshots__/HighlightsHelpInfo.spec.tsx.snap         | 1 +
 4 files changed, 10 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<InnerProps>) =>
+const TOCControl = ({ message, children, ...props }: React.PropsWithChildren<InnerProps>) =>
   <OpenButton
     aria-label={useIntl().formatMessage({ id: message })}
     {...props}
diff --git a/src/app/content/components/TableOfContents/index.tsx b/src/app/content/components/TableOfContents/index.tsx
index 94d39206bd..7fb9f95d03 100644
--- a/src/app/content/components/TableOfContents/index.tsx
+++ b/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() {
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 <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>;
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`] = `
     }
   />
   <button
+    aria-label="dismiss"
     className="c1"
     data-analytics-label="close"
     onClick={[Function]}