From eca02a63a0f87bf3e9ae623e205c277493a2c5f7 Mon Sep 17 00:00:00 2001
From: Nick B <nicholas.blumberg@gmail.com>
Date: Fri, 18 Oct 2024 21:47:24 -0700
Subject: [PATCH 01/12] Conversion of ids to classes where those ids can be
 duplicated (to prevent invalid HTML, prevent accessibility issues with
 certain readers and prevent down-the-line JS issues if we rely on the ids).

---
 static/css/base.scss                                      | 2 +-
 static/js/apps/base/components/header_bar/header_logo.tsx | 2 +-
 static/js/components/content/media_text.tsx               | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/css/base.scss b/static/css/base.scss
index 3a79adf932..d05e60d3f3 100644
--- a/static/css/base.scss
+++ b/static/css/base.scss
@@ -160,7 +160,7 @@ $headings-font-family: $font-family-sans-serif;
   background: var(--gm-3-white);
 }
 
-#main-header #main-header-logo {
+#main-header .main-header-logo {
   display: flex;
   align-items: center;
   img {
diff --git a/static/js/apps/base/components/header_bar/header_logo.tsx b/static/js/apps/base/components/header_bar/header_logo.tsx
index 36ff0eb619..ffa2e81d23 100644
--- a/static/js/apps/base/components/header_bar/header_logo.tsx
+++ b/static/js/apps/base/components/header_bar/header_logo.tsx
@@ -51,7 +51,7 @@ const HeaderLogo = ({
   return (
     <div className="navbar-brand">
       {logoPath && (
-        <div id="main-header-logo">
+        <div className="main-header-logo">
           <a
             href={routes["static.homepage"]}
             aria-label={labels["Back to homepage"]}
diff --git a/static/js/components/content/media_text.tsx b/static/js/components/content/media_text.tsx
index 4b393afeb6..bb8b21220a 100644
--- a/static/js/components/content/media_text.tsx
+++ b/static/js/components/content/media_text.tsx
@@ -38,7 +38,7 @@ const MediaText = ({
   children,
 }: MediaTextProps): ReactElement => {
   return (
-    <section id="text-images" className="text-images">
+    <section className="text-images">
       <div className="container">
         {title && (
           <div className="header">

From 840081535ebcee784e3defb5975d5967f20a3a85 Mon Sep 17 00:00:00 2001
From: Nick B <nicholas.blumberg@gmail.com>
Date: Fri, 18 Oct 2024 21:48:27 -0700
Subject: [PATCH 02/12] Added comments and copyright to a file that was missing
 them.

---
 static/js/shared/hooks/escape_key_handler.tsx | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/static/js/shared/hooks/escape_key_handler.tsx b/static/js/shared/hooks/escape_key_handler.tsx
index 12847bf1dd..7914dbf5ca 100644
--- a/static/js/shared/hooks/escape_key_handler.tsx
+++ b/static/js/shared/hooks/escape_key_handler.tsx
@@ -1,3 +1,24 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * A hook to provide a handler for the escape key press event triggering the
+ * provided handler function whenever the "Escape" key is pressed.
+ */
+
 import { useEffect } from "react";
 
 export default function useEscapeKeyInputHandler(handler: () => void): void {

From 052ba8446793a04a2eb27ee04e76d8d153fcec23 Mon Sep 17 00:00:00 2001
From: Nick B <nicholas.blumberg@gmail.com>
Date: Fri, 18 Oct 2024 22:27:50 -0700
Subject: [PATCH 03/12] There is functionality associated with an id in the
 search box (which cannot yet be updated). In the long term, we could look at
 changing this so that it is no longer id based, but for now, there should
 only be one search box on the screen at the same time.

So rather than simply hiding the desktop search box in mobile view, and vice versa, we are now selectively rendering the header in the containing React component.

To facilitate this, this push also adds in a breakpoints hook that allows us to apply Bootstrap-like media queries on the TypeScript side (this hook may be more generally useful).
---
 static/css/base.scss                          |   2 +-
 .../base/components/header_bar/header_bar.tsx |  11 +-
 .../header_bar/header_bar_search.tsx          |  10 +-
 static/js/apps/base/utilities/utilities.ts    |  17 ---
 .../components/content/sample_questions.tsx   |   2 +-
 static/js/shared/hooks/breakpoints.tsx        | 115 ++++++++++++++++++
 6 files changed, 134 insertions(+), 23 deletions(-)
 create mode 100644 static/js/shared/hooks/breakpoints.tsx

diff --git a/static/css/base.scss b/static/css/base.scss
index d05e60d3f3..62a73e6ecf 100644
--- a/static/css/base.scss
+++ b/static/css/base.scss
@@ -38,7 +38,7 @@ $headings-font-weight: 600;
 
 /*
   If the grid-breakpoints change, the TypeScript equivalent should be updated:
-  `static/js/apps/base/utilities/utilities.ts`, `export const BREAKPOINTS`
+  `static/js/shared/hooks/breakpoints.tsx`, `export const BREAKPOINTS`
  */
 $grid-breakpoints: (
   xs: 0,
diff --git a/static/js/apps/base/components/header_bar/header_bar.tsx b/static/js/apps/base/components/header_bar/header_bar.tsx
index a8d1730e0c..a63af4d951 100644
--- a/static/js/apps/base/components/header_bar/header_bar.tsx
+++ b/static/js/apps/base/components/header_bar/header_bar.tsx
@@ -20,6 +20,7 @@
 
 import React, { ReactElement } from "react";
 
+import useBreakpoints from "../../../../shared/hooks/breakpoints";
 import { HeaderMenu, Labels, Routes } from "../../../../shared/types/base";
 import HeaderBarSearch from "./header_bar_search";
 import HeaderLogo from "./header_logo";
@@ -52,6 +53,8 @@ const HeaderBar = ({
   labels,
   routes,
 }: HeaderBarProps): ReactElement => {
+  const { up, down } = useBreakpoints();
+
   return (
     <div id="main-header-container">
       <nav id="main-nav">
@@ -63,7 +66,9 @@ const HeaderBar = ({
             labels={labels}
             routes={routes}
           />
-          {showHeaderSearchBar && <HeaderBarSearch />}
+          {showHeaderSearchBar && up("lg") && (
+            <HeaderBarSearch inputId={"query-search-input-desktop"} />
+          )}
           <MenuDesktop menu={menu} labels={labels} routes={routes} />
         </div>
         <div className="navbar-menu-mobile">
@@ -74,7 +79,9 @@ const HeaderBar = ({
             labels={labels}
             routes={routes}
           />
-          {showHeaderSearchBar && <HeaderBarSearch />}
+          {showHeaderSearchBar && down("md") && (
+            <HeaderBarSearch inputId={"query-search-input-mobile"} />
+          )}
           <MenuMobile menu={menu} labels={labels} routes={routes} />
         </div>
       </nav>
diff --git a/static/js/apps/base/components/header_bar/header_bar_search.tsx b/static/js/apps/base/components/header_bar/header_bar_search.tsx
index d1752c1349..fb0894fd1c 100644
--- a/static/js/apps/base/components/header_bar/header_bar_search.tsx
+++ b/static/js/apps/base/components/header_bar/header_bar_search.tsx
@@ -27,11 +27,17 @@ import {
   triggerGAEvent,
 } from "../../../../shared/ga_events";
 
-const HeaderBarSearch = (): ReactElement => {
+interface HeaderBarSearchProps {
+  inputId?: string;
+}
+
+const HeaderBarSearch = ({
+  inputId = "query-search-input",
+}: HeaderBarSearchProps): ReactElement => {
   return (
     <NlSearchBar
       variant="header-inline"
-      inputId="query-search-input"
+      inputId={inputId}
       onSearch={(q): void => {
         triggerGAEvent(GA_EVENT_NL_SEARCH, {
           [GA_PARAM_QUERY]: q,
diff --git a/static/js/apps/base/utilities/utilities.ts b/static/js/apps/base/utilities/utilities.ts
index c9ee36ed95..1478abac6c 100644
--- a/static/js/apps/base/utilities/utilities.ts
+++ b/static/js/apps/base/utilities/utilities.ts
@@ -139,20 +139,3 @@ export const extractLabels = (elementId = "metadata-labels"): Labels => {
 
   return labels;
 };
-
-/*
-  A breakpoints constant object for responsiveness, for access on the TypeScript side.
-  These are the default breakpoints for a page that does not have custom breakpoints and are
-  applied in: `static/css/base.scss`
-
-  If a page does not use default breakpoints and those breakpoints are required on
-  the TypeScript side, a separate breakpoint object should be created.
-*/
-export const BREAKPOINTS = {
-  xs: 0,
-  sm: 576,
-  md: 768,
-  lg: 1068,
-  xl: 1350,
-  xxl: 1400,
-};
diff --git a/static/js/components/content/sample_questions.tsx b/static/js/components/content/sample_questions.tsx
index 5112eb016f..df46350bb3 100644
--- a/static/js/components/content/sample_questions.tsx
+++ b/static/js/components/content/sample_questions.tsx
@@ -20,13 +20,13 @@
 
 import React, { ReactElement, useEffect, useState } from "react";
 
-import { BREAKPOINTS } from "../../apps/base/utilities/utilities";
 import {
   GA_EVENT_HOMEPAGE_CLICK,
   GA_PARAM_ID,
   GA_PARAM_QUERY,
   triggerGAEvent,
 } from "../../shared/ga_events";
+import { BREAKPOINTS } from "../../shared/hooks/breakpoints";
 import { SampleQuestionCategory } from "../../shared/types/homepage";
 import SlideCarousel from "../elements/slide_carousel";
 
diff --git a/static/js/shared/hooks/breakpoints.tsx b/static/js/shared/hooks/breakpoints.tsx
new file mode 100644
index 0000000000..37af3952bd
--- /dev/null
+++ b/static/js/shared/hooks/breakpoints.tsx
@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+/*
+  A breakpoints constant object for responsiveness, for access on the TypeScript side.
+  These are the default breakpoints for a page that does not have custom breakpoints and are
+  applied in: `static/css/base.scss`
+
+  If a page does not use default breakpoints and those breakpoints are required on
+  the TypeScript side, a separate breakpoint object should be created.
+*/
+export const BREAKPOINTS = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 1068,
+  xl: 1350,
+  xxl: 1400,
+};
+
+type Breakpoints = Record<string, number>;
+
+/*
+ For all comparison functions (up, down, only), the given size ("md", "lg", etc.) refers to
+ the screen size range, not just a single breakpoint. This aligns with the equivalent Bootstrap media queries.
+
+ - `up("md")`: Returns true if the window is at least in the "md" screen size range (768px or larger by default).
+ - `down("md")`: Returns true if the window is in the "md" screen size range or smaller (i.e., smaller than the "lg" screen size).
+ - `only("md")`: Returns true if the window is within the "md" screen size range (768px or larger and smaller than 1068px).
+ */
+
+interface BreakpointInterface<B extends Breakpoints = Breakpoints> {
+  // Returns true if the current window size is greater than or equal to the size given (such as "md")
+  up: (key: keyof B) => boolean;
+  // Returns true if the current window size is less than or equal to the size given (such as "md")
+  down: (key: keyof B) => boolean;
+  // Returns true if the current window size is the size given (such as "md")
+  only: (key: keyof B) => boolean;
+}
+
+function useBreakpoints<B extends Breakpoints = typeof BREAKPOINTS>(
+  customBreakpoints?: B
+): BreakpointInterface<B> {
+  const breakpoints = customBreakpoints ?? (BREAKPOINTS as unknown as B);
+
+  const isClient = typeof window !== "undefined";
+  const [windowWidth, setWindowWidth] = useState<number>(
+    isClient ? window.innerWidth : 0
+  );
+
+  useEffect(() => {
+    if (!isClient) return;
+
+    const handleResize = (): void => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [isClient]);
+
+  const sortedBreakpoints = useMemo(() => {
+    return Object.entries(breakpoints)
+      .sort(([, sizeA], [, sizeB]) => sizeA - sizeB)
+      .map(([name]) => name as keyof B);
+  }, [breakpoints]);
+
+  const up = useCallback(
+    (key: keyof B): boolean => {
+      const breakpointValue = breakpoints[key];
+      return windowWidth >= breakpointValue;
+    },
+    [windowWidth, breakpoints]
+  );
+
+  const down = useCallback(
+    (key: keyof B): boolean => {
+      const index = sortedBreakpoints.indexOf(key);
+
+      if (index + 1 >= sortedBreakpoints.length) {
+        return true;
+      }
+
+      const nextBreakpoint = sortedBreakpoints[index + 1];
+      const nextBreakpointValue = breakpoints[nextBreakpoint];
+
+      return windowWidth < nextBreakpointValue;
+    },
+    [windowWidth, breakpoints, sortedBreakpoints]
+  );
+
+  const only = useCallback(
+    (key: keyof B): boolean => {
+      const index = sortedBreakpoints.indexOf(key);
+
+      const currentBreakpointValue = breakpoints[key];
+      const nextBreakpointValue =
+        index + 1 < sortedBreakpoints.length
+          ? breakpoints[sortedBreakpoints[index + 1]]
+          : Infinity;
+
+      return (
+        windowWidth >= currentBreakpointValue &&
+        windowWidth < nextBreakpointValue
+      );
+    },
+    [windowWidth, breakpoints, sortedBreakpoints]
+  );
+
+  return { up, down, only };
+}
+
+export default useBreakpoints;

From eaa782d7ff9e43af6db5ff5c9e61b51d0539514c Mon Sep 17 00:00:00 2001
From: Nick B <nicholas.blumberg@gmail.com>
Date: Fri, 18 Oct 2024 22:48:15 -0700
Subject: [PATCH 04/12] The MediaText component now has an alt prop, with
 either the alt or the title being required (both are fine). If provided, alt
 will be used as the alt for the image; otherwise the title will be used.

---
 static/js/build/one_data_commons.tsx        |  1 +
 static/js/components/content/media_text.tsx | 12 ++++++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/static/js/build/one_data_commons.tsx b/static/js/build/one_data_commons.tsx
index e26a08302f..f179e960a6 100644
--- a/static/js/build/one_data_commons.tsx
+++ b/static/js/build/one_data_commons.tsx
@@ -8,6 +8,7 @@ const OneDataCommons = (): ReactElement => {
     return [
       <MediaText
         key={0}
+        alt={"One Data Commons Website Screenshot"}
         mediaType="image"
         mediaSource="images/content/build/ONEData.png"
       >
diff --git a/static/js/components/content/media_text.tsx b/static/js/components/content/media_text.tsx
index bb8b21220a..e1aa92d744 100644
--- a/static/js/components/content/media_text.tsx
+++ b/static/js/components/content/media_text.tsx
@@ -20,21 +20,25 @@
 
 import React, { ReactElement } from "react";
 
-interface MediaTextProps {
+interface BaseMediaTextProps {
   //the type of media that will be displayed - either a video or an image, with a video representing a YouTube video
   mediaType: "video" | "image";
   //the source of the media - for video, this will be the video id, and for an image this will be the url
   mediaSource: string;
-  //the title that renders at the top of the component
-  title?: string;
   //the text (or other) content, given as the children of the component
   children: ReactElement;
 }
 
+//title: the title that renders at the top of the component. If an alt is not provided, the title is required.
+//alt: the alt text for the image. If the title is not provided, the alt is required.
+type MediaTextProps = BaseMediaTextProps &
+  ({ title: string; alt?: string } | { title?: string; alt: string });
+
 const MediaText = ({
   mediaType,
   mediaSource,
   title,
+  alt,
   children,
 }: MediaTextProps): ReactElement => {
   return (
@@ -48,7 +52,7 @@ const MediaText = ({
         <div className="media">
           {mediaType === "image" ? (
             <figure>
-              <img src={mediaSource} alt={title} />
+              <img src={mediaSource} alt={alt ?? title} />
             </figure>
           ) : (
             <div className="video-player">

From 23e51b870d24ff66dd972fdc8a6c6d8215796039 Mon Sep 17 00:00:00 2001
From: Jennifer Blumberg <jjblumberg@gmail.com>
Date: Wed, 16 Oct 2024 22:16:28 -0700
Subject: [PATCH 05/12] Ensures that the aria-labelledby attribute is correctly
 linking the button and the corresponding submenu. Adds aria-controls and
 aria-expanded to the button for better accessibility compliance

---
 .../components/header_bar/menu_desktop.tsx    | 123 ++++++++++--------
 1 file changed, 66 insertions(+), 57 deletions(-)

diff --git a/static/js/apps/base/components/header_bar/menu_desktop.tsx b/static/js/apps/base/components/header_bar/menu_desktop.tsx
index 8075326e38..6e375dec9e 100644
--- a/static/js/apps/base/components/header_bar/menu_desktop.tsx
+++ b/static/js/apps/base/components/header_bar/menu_desktop.tsx
@@ -93,68 +93,77 @@ const MenuDesktop = ({
   return (
     <div className="header-menu" ref={menuContainerRef}>
       <ul className="header-menu-list">
-        {menu.map((menuItem, index) => (
-          <li key={menuItem.label}>
-            {menuItem.url ? (
-              <a
-                className="menu-main-link"
-                href={resolveHref(menuItem.url, routes)}
-                onClick={() => {
-                  triggerGAEvent(GA_EVENT_HEADER_CLICK, {
-                    [GA_PARAM_ID]: `desktop main ${menuItem.id}`,
-                    [GA_PARAM_URL]: menuItem.url,
-                  });
-                  return true;
-                }}
-              >
-                {labels[menuItem.label]}
-              </a>
-            ) : (
-              <>
-                <button
-                  className="menu-main-button"
-                  onClick={(): void => {
+        {menu.map((menuItem, index) => {
+          const buttonId = slugify(`nav-${menuItem.label}-button`);
+          const dropdownId = slugify(`nav-${menuItem.label}-dropdown`);
+
+          return (
+            <li key={menuItem.label}>
+              {menuItem.url ? (
+                <a
+                  className="menu-main-link"
+                  href={resolveHref(menuItem.url, routes)}
+                  onClick={() => {
                     triggerGAEvent(GA_EVENT_HEADER_CLICK, {
-                      [GA_PARAM_ID]: `desktop ${menuItem.id}`,
+                      [GA_PARAM_ID]: `desktop main ${menuItem.id}`,
+                      [GA_PARAM_URL]: menuItem.url,
                     });
-                    return !menuItem.url && toggleMenu(index);
-                  }}
-                  onTouchEnd={(e): void => {
-                    if (!menuItem.url) itemMenuTouch(e, index);
+                    return true;
                   }}
                 >
-                  <span className="menu-main-label">
-                    {labels[menuItem.label]}
-                  </span>
-                  <span
-                    className={`material-icons-outlined menu-arrow-icon ${
-                      openMenu === index ? "open" : ""
-                    }`}
+                  {labels[menuItem.label]}
+                </a>
+              ) : (
+                <>
+                  <button
+                    id={buttonId}
+                    className="menu-main-button"
+                    onClick={(): void => {
+                      triggerGAEvent(GA_EVENT_HEADER_CLICK, {
+                        [GA_PARAM_ID]: `desktop ${menuItem.id}`,
+                      });
+                      return !menuItem.url && toggleMenu(index);
+                    }}
+                    onTouchEnd={(e): void => {
+                      if (!menuItem.url) itemMenuTouch(e, index);
+                    }}
+                    aria-expanded={openMenu === index}
+                    aria-controls={dropdownId}
                   >
-                    keyboard_arrow_down
-                  </span>
-                </button>
-                <div
-                  ref={(el: HTMLDivElement | null): void => {
-                    submenuRefs.current[index] = el;
-                  }}
-                  className="rich-menu-container"
-                  aria-labelledby={slugify(`nav-${menuItem.label}-dropdown`)}
-                  style={{
-                    maxHeight: openMenu === index ? `${panelHeight}px` : 0,
-                  }}
-                >
-                  <MenuDesktopRichMenu
-                    menuItem={menuItem}
-                    labels={labels}
-                    routes={routes}
-                    open={openMenu === index}
-                  />
-                </div>
-              </>
-            )}
-          </li>
-        ))}
+                    <span className="menu-main-label">
+                      {labels[menuItem.label]}
+                    </span>
+                    <span
+                      className={`material-icons-outlined menu-arrow-icon ${
+                        openMenu === index ? "open" : ""
+                      }`}
+                    >
+                      keyboard_arrow_down
+                    </span>
+                  </button>
+                  <div
+                    ref={(el: HTMLDivElement | null): void => {
+                      submenuRefs.current[index] = el;
+                    }}
+                    id={dropdownId}
+                    className="rich-menu-container"
+                    aria-labelledby={buttonId}
+                    style={{
+                      maxHeight: openMenu === index ? `${panelHeight}px` : 0,
+                    }}
+                  >
+                    <MenuDesktopRichMenu
+                      menuItem={menuItem}
+                      labels={labels}
+                      routes={routes}
+                      open={openMenu === index}
+                    />
+                  </div>
+                </>
+              )}
+            </li>
+          );
+        })}
       </ul>
       <div className={"panel"} style={{ height: panelHeight }} />
     </div>

From f69bc689a88cbe36387e0a02660e0b1e959cb7bd Mon Sep 17 00:00:00 2001
From: Jennifer Blumberg <jjblumberg@gmail.com>
Date: Wed, 16 Oct 2024 22:37:41 -0700
Subject: [PATCH 06/12] Adds aria-label for search input, as there is no
 visible label

---
 static/js/components/nl_search_bar/auto_complete_input.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/static/js/components/nl_search_bar/auto_complete_input.tsx b/static/js/components/nl_search_bar/auto_complete_input.tsx
index 0c96dc5f03..80d1e68f2b 100644
--- a/static/js/components/nl_search_bar/auto_complete_input.tsx
+++ b/static/js/components/nl_search_bar/auto_complete_input.tsx
@@ -287,6 +287,7 @@ export function AutoCompleteInput(
               id={props.inputId}
               invalid={props.invalid}
               placeholder={props.placeholder}
+              aria-label={props.placeholder}
               value={inputText}
               onChange={onInputChange}
               onKeyDown={(event) => handleKeydownEvent(event)}

From 9ebf9393010e7977ad40d55c7635fbb4243299fc Mon Sep 17 00:00:00 2001
From: Nick B <nicholas.blumberg@gmail.com>
Date: Sun, 20 Oct 2024 13:36:43 -0700
Subject: [PATCH 07/12] Improved keyboard tab handling on the carousel.

---
 static/js/apps/homepage/main.ts               |  2 +-
 .../js/components/elements/slide_carousel.tsx | 39 ++++++++++++++++++-
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/static/js/apps/homepage/main.ts b/static/js/apps/homepage/main.ts
index 19204663ad..f94cb2b60d 100644
--- a/static/js/apps/homepage/main.ts
+++ b/static/js/apps/homepage/main.ts
@@ -15,7 +15,7 @@
  */
 
 /**
- * Entry point for Version 2 of the home page.
+ * Entry point for the home page.
  */
 
 import React from "react";
diff --git a/static/js/components/elements/slide_carousel.tsx b/static/js/components/elements/slide_carousel.tsx
index 5c3d3a3d75..dfa228a256 100644
--- a/static/js/components/elements/slide_carousel.tsx
+++ b/static/js/components/elements/slide_carousel.tsx
@@ -18,7 +18,7 @@
  * A slide-based carousel that takes arbitrary ReactElements as slides
  */
 
-import React, { ReactElement, useEffect, useState } from "react";
+import React, { ReactElement, useEffect, useRef, useState } from "react";
 
 import {
   GA_EVENT_HOMEPAGE_CLICK,
@@ -39,6 +39,7 @@ const SlideCarousel = ({
 }: SlideCarouselProps): ReactElement => {
   const [activeIndex, setActiveIndex] = useState(0);
   const [isInteracting, setIsInteracting] = useState(false);
+  const carouselRef = useRef<HTMLDivElement>(null);
 
   const goToSlide = (index: number): void => {
     setIsInteracting(true);
@@ -64,8 +65,42 @@ const SlideCarousel = ({
     }
   }, [autoslideInterval, slides.length, activeIndex, isInteracting]);
 
+  useEffect(() => {
+    const handleFocusIn = (event: FocusEvent): void => {
+      if (carouselRef.current) {
+        const focusedElement = event.target as HTMLElement;
+
+        const slideIndex = Array.from(
+          carouselRef.current.querySelectorAll(".carousel-slide")
+        ).findIndex((slide) => slide.contains(focusedElement));
+
+        if (slideIndex !== -1 && slideIndex !== activeIndex) {
+          setActiveIndex(slideIndex);
+        }
+
+        const innerCarousel = carouselRef.current?.querySelector(
+          ".carousel-inner"
+        ) as HTMLElement;
+        if (innerCarousel) {
+          innerCarousel.scrollLeft = 0;
+        }
+      }
+    };
+
+    const carouselElement = carouselRef.current;
+    if (carouselElement) {
+      carouselElement.addEventListener("focusin", handleFocusIn);
+    }
+
+    return () => {
+      if (carouselElement) {
+        carouselElement.removeEventListener("focusin", handleFocusIn);
+      }
+    };
+  }, [activeIndex]);
+
   return (
-    <div className="slide-carousel">
+    <div className="slide-carousel" ref={carouselRef}>
       <div className="carousel-inner">
         <div
           className="carousel-tape"

From 31dabd3825d81143a003e2d57551b3c644294fcc Mon Sep 17 00:00:00 2001
From: Nick B <nicholas.blumberg@gmail.com>
Date: Sun, 20 Oct 2024 14:04:26 -0700
Subject: [PATCH 08/12] Adjusting the header hierarchy in the main navigation.

---
 static/css/core.scss                          | 34 +++++++++++--------
 .../header_bar/menu_rich_section_group.tsx    |  8 ++---
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/static/css/core.scss b/static/css/core.scss
index 15b2223c9e..e65008c17f 100644
--- a/static/css/core.scss
+++ b/static/css/core.scss
@@ -244,15 +244,17 @@ section {
           font-size: 1.4rem;
           font-weight: 100;
         }
-        h4 {
-          font-family: $font-family-google-title;
-          font-size: 1rem;
-          text-transform: uppercase;
-          color: #5e5e5e;
-          font-weight: 300;
-          margin: 0 0 32px 0;
+        .group {
+          h3 {
+            font-family: $font-family-google-title;
+            font-size: 1rem;
+            text-transform: uppercase;
+            color: #5e5e5e;
+            font-weight: 300;
+            margin: 0 0 32px 0;
+          }
         }
-        h5 {
+        h4 {
           font-family: $font-family-google-title;
           font-size: 1rem;
           font-weight: 500;
@@ -504,14 +506,16 @@ section {
               font-size: 1.4rem;
               font-weight: 100;
             }
-            h4 {
-              font-family: $font-family-google-title;
-              font-size: 1rem;
-              text-transform: uppercase;
-              color: #5e5e5e;
-              font-weight: 300;
+            .group {
+              h3 {
+                font-family: $font-family-google-title;
+                font-size: 1rem;
+                text-transform: uppercase;
+                color: #5e5e5e;
+                font-weight: 300;
+              }
             }
-            h5 {
+            h4 {
               font-family: $font-family-google-title;
               font-size: 1rem;
               font-weight: 500;
diff --git a/static/js/apps/base/components/header_bar/menu_rich_section_group.tsx b/static/js/apps/base/components/header_bar/menu_rich_section_group.tsx
index abd93cb4e6..7914f336c0 100644
--- a/static/js/apps/base/components/header_bar/menu_rich_section_group.tsx
+++ b/static/js/apps/base/components/header_bar/menu_rich_section_group.tsx
@@ -49,15 +49,15 @@ const MenuRichSectionGroup = ({
 
   return (
     <div className={"group"}>
-      {menuGroup.title && <h4>{menuGroup.title}</h4>}
+      {menuGroup.title && <h3>{menuGroup.title}</h3>}
       {menuGroup.items.map((item, index) => (
         <div key={index} className={"item"}>
           {item.title && item.url ? (
-            <h5>
+            <h4>
               <a
                 href={resolveHref(item.url, routes)}
                 className={"item-link"}
-                onClick={() => {
+                onClick={(): boolean => {
                   triggerGAEvent(GA_EVENT_HEADER_CLICK, {
                     [GA_PARAM_ID]: `${type} submenu ${menuGroup.id}-${index}`,
                     [GA_PARAM_URL]: item.url,
@@ -74,7 +74,7 @@ const MenuRichSectionGroup = ({
                 )}
                 {item.title}
               </a>
-            </h5>
+            </h4>
           ) : (
             <h5>{item.title}</h5>
           )}

From c8a1dfe4ccfa58737045d78931f230205401ad3c Mon Sep 17 00:00:00 2001
From: Pablo Noel <pablo@next-solutions.ca>
Date: Sun, 20 Oct 2024 20:04:06 -0300
Subject: [PATCH 09/12] Change height of buttons so when they are focused they
 dont use the whole header height

---
 static/css/core.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/static/css/core.scss b/static/css/core.scss
index e65008c17f..3623ddf296 100644
--- a/static/css/core.scss
+++ b/static/css/core.scss
@@ -152,16 +152,16 @@ section {
         li {
           display: flex;
           align-items: stretch;
+          align-items: center;
           margin: 0;
           padding: 0;
 
           .menu-main-button {
             border: 0;
-            padding: 0;
+            padding: 8px 0;
             margin: 0;
             display: flex;
             align-items: center;
-            height: 100%;
             background-color: transparent;
             .menu-main-label {
               font-size: 0.875rem;
@@ -185,7 +185,7 @@ section {
           .menu-main-link {
             display: flex;
             align-items: center;
-            height: 100%;
+            padding: 8px 0;
             color: #474747;
             transition: color 0.3s ease-in-out;
             font-size: 0.875rem;

From a1a65f3ab75d6e2f020385b8ca746b794dbfcaa2 Mon Sep 17 00:00:00 2001
From: Nick B <nicholas.blumberg@gmail.com>
Date: Mon, 21 Oct 2024 18:38:13 -0700
Subject: [PATCH 10/12] CSS cleanup

---
 static/css/core.scss | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/static/css/core.scss b/static/css/core.scss
index 3623ddf296..8e57625e9e 100644
--- a/static/css/core.scss
+++ b/static/css/core.scss
@@ -151,7 +151,6 @@ section {
 
         li {
           display: flex;
-          align-items: stretch;
           align-items: center;
           margin: 0;
           padding: 0;
@@ -607,8 +606,8 @@ section {
 
       .search-input-text {
         display: block;
-        padding: 0px;
-        margin: 0px;
+        padding: 0;
+        margin: 0;
         width: 150px;
         flex-grow: 10;
         height: 38px;
@@ -661,7 +660,7 @@ section {
       .search-input-result-section {
         display: flex;
         flex-direction: column;
-        padding: 10px 0px;
+        padding: 10px 0;
 
         .search-input-result {
           display: flex;
@@ -686,7 +685,7 @@ section {
     } 
 
     .result-divider {
-      margin: 0px;
+      margin: 0;
     }
   }
 

From cfe11483dbc5fbe75dc42a74e907e8cbf59a3e12 Mon Sep 17 00:00:00 2001
From: Nick B <nicholas.blumberg@gmail.com>
Date: Fri, 25 Oct 2024 14:20:55 -0700
Subject: [PATCH 11/12] Resolution to Codacy analysis findings.

---
 .../base/components/header_bar/header_bar.tsx     |  2 +-
 static/js/shared/hooks/breakpoints.tsx            | 15 ++++++++-------
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/static/js/apps/base/components/header_bar/header_bar.tsx b/static/js/apps/base/components/header_bar/header_bar.tsx
index a63af4d951..992ea48a80 100644
--- a/static/js/apps/base/components/header_bar/header_bar.tsx
+++ b/static/js/apps/base/components/header_bar/header_bar.tsx
@@ -20,7 +20,7 @@
 
 import React, { ReactElement } from "react";
 
-import useBreakpoints from "../../../../shared/hooks/breakpoints";
+import { useBreakpoints } from "../../../../shared/hooks/breakpoints";
 import { HeaderMenu, Labels, Routes } from "../../../../shared/types/base";
 import HeaderBarSearch from "./header_bar_search";
 import HeaderLogo from "./header_logo";
diff --git a/static/js/shared/hooks/breakpoints.tsx b/static/js/shared/hooks/breakpoints.tsx
index 37af3952bd..a7940afa36 100644
--- a/static/js/shared/hooks/breakpoints.tsx
+++ b/static/js/shared/hooks/breakpoints.tsx
@@ -6,7 +6,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
   applied in: `static/css/base.scss`
 
   If a page does not use default breakpoints and those breakpoints are required on
-  the TypeScript side, a separate breakpoint object should be created.
+  the TypeScript side, a separate breakpoint object can be created and passed into the hook.
 */
 export const BREAKPOINTS = {
   xs: 0,
@@ -23,9 +23,12 @@ type Breakpoints = Record<string, number>;
  For all comparison functions (up, down, only), the given size ("md", "lg", etc.) refers to
  the screen size range, not just a single breakpoint. This aligns with the equivalent Bootstrap media queries.
 
- - `up("md")`: Returns true if the window is at least in the "md" screen size range (768px or larger by default).
- - `down("md")`: Returns true if the window is in the "md" screen size range or smaller (i.e., smaller than the "lg" screen size).
- - `only("md")`: Returns true if the window is within the "md" screen size range (768px or larger and smaller than 1068px).
+ - `up("md")`: Returns true if the window is at least in the "md" screen size range
+    (768px or larger by default).
+ - `down("md")`: Returns true if the window is in the "md" screen size range or smaller
+    (i.e., smaller than the "lg" screen size).
+ - `only("md")`: Returns true if the window is within the "md" screen size range
+    (768px or larger and smaller than 1068px).
  */
 
 interface BreakpointInterface<B extends Breakpoints = Breakpoints> {
@@ -37,7 +40,7 @@ interface BreakpointInterface<B extends Breakpoints = Breakpoints> {
   only: (key: keyof B) => boolean;
 }
 
-function useBreakpoints<B extends Breakpoints = typeof BREAKPOINTS>(
+export function useBreakpoints<B extends Breakpoints = typeof BREAKPOINTS>(
   customBreakpoints?: B
 ): BreakpointInterface<B> {
   const breakpoints = customBreakpoints ?? (BREAKPOINTS as unknown as B);
@@ -111,5 +114,3 @@ function useBreakpoints<B extends Breakpoints = typeof BREAKPOINTS>(
 
   return { up, down, only };
 }
-
-export default useBreakpoints;

From c613760283349cb4facb34c1a307ba0a62049a74 Mon Sep 17 00:00:00 2001
From: Nick B <nicholas.blumberg@gmail.com>
Date: Wed, 30 Oct 2024 20:01:41 -0700
Subject: [PATCH 12/12] Removed the id distinction between the menu and desktop
 versions of the header bar (no longer required now that we are selectively
 rendering the headers).

---
 static/js/apps/base/components/header_bar/header_bar.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/static/js/apps/base/components/header_bar/header_bar.tsx b/static/js/apps/base/components/header_bar/header_bar.tsx
index 992ea48a80..fcd00e0294 100644
--- a/static/js/apps/base/components/header_bar/header_bar.tsx
+++ b/static/js/apps/base/components/header_bar/header_bar.tsx
@@ -66,9 +66,7 @@ const HeaderBar = ({
             labels={labels}
             routes={routes}
           />
-          {showHeaderSearchBar && up("lg") && (
-            <HeaderBarSearch inputId={"query-search-input-desktop"} />
-          )}
+          {showHeaderSearchBar && up("lg") && <HeaderBarSearch />}
           <MenuDesktop menu={menu} labels={labels} routes={routes} />
         </div>
         <div className="navbar-menu-mobile">
@@ -79,9 +77,7 @@ const HeaderBar = ({
             labels={labels}
             routes={routes}
           />
-          {showHeaderSearchBar && down("md") && (
-            <HeaderBarSearch inputId={"query-search-input-mobile"} />
-          )}
+          {showHeaderSearchBar && down("md") && <HeaderBarSearch />}
           <MenuMobile menu={menu} labels={labels} routes={routes} />
         </div>
       </nav>