Static header for accessible drawer content at page magnification (#2221)

* Chevron icon to close / slide up

* Testing static header

* Staic title and sticky slidedown opener. Rotating chevron

* Remove CloseChevron

* Reinstate opener background, repurpose darwer close button to close chat on first click

* Update tests to reflect design change

Author: jonkafton

frontends/main/src/page-components/LearningResourceExpanded/AiChatSyllabusSlideDown.tsx

@@ -34,16 +34,18 @@ const SlideDown = styled.div<{
 }))
 
 const Opener = styled.div(({ theme }) => ({
+  position: "relative",
   ":after": {
     content: "''",
     width: "100%",
     height: "50%",
     background: theme.custom.colors.white,
     display: "block",
     position: "absolute",
-    top: 0,
+    top: "-24px",
     borderBottom: `1px solid ${theme.custom.colors.lightGray2}`,
     zIndex: 1,
+    paddingTop: "24px",
   },
 }))
 
@@ -89,7 +91,7 @@ const StyledAiChat = styled(AiChat)<{
   topPosition: number
 }>(({ topPosition }) => ({
   ".MitAiChat--root": {
-    minHeight: `calc(100vh - ${topPosition + 43}px)`,
+    minHeight: `calc(100vh - ${topPosition}px)`,
   },
   ".MitAiChat--entryScreenContainer": {
     top: topPosition,

frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.test.tsx

@@ -393,9 +393,7 @@ describe.each([true, false])(
         resource: course1,
         chatExpanded: true,
       })
-      await user.click(
-        screen.getByRole("button", { name: "Ask TIM about this course" }),
-      )
+      await user.click(screen.getByRole("button", { name: "Close" }))
 
       const dataTestId = "ai-chat-entry-screen"
       expect(screen.getByTestId(dataTestId)).toBeInTheDocument()
@@ -407,27 +405,36 @@ describe.each([true, false])(
       })
     })
 
-    test.each([
-      { chatExpanded: false, expectChat: false },
-      { chatExpanded: true, expectChat: true },
-    ])(
-      "When `chatExpanded=true`, chat button is pressed and interactive",
-      ({ chatExpanded, expectChat }) => {
-        if (!enabled) return
-        const resource = factories.learningResources.resource({
-          resource_type: ResourceTypeEnum.Course,
-        })
-        setup({ resource, chatExpanded })
+    test("When `chatExpanded=false`, chat button is not pressed and chat is inert", () => {
+      if (!enabled) return
+      const resource = factories.learningResources.resource({
+        resource_type: ResourceTypeEnum.Course,
+      })
+      setup({ resource, chatExpanded: false })
 
-        screen.getByRole("button", {
-          name: /Ask\sTIM/,
-          pressed: chatExpanded,
-        })
+      screen.getByRole("button", {
+        name: /Ask\sTIM/,
+        pressed: false,
+      })
 
-        // AiChat is always in the dom, but it's hidden and inert when not expanded.
-        const aiChat = screen.getByTestId("ai-chat-entry-screen")
-        expect(!!aiChat.closest("[inert]")).toBe(!expectChat)
-      },
-    )
+      // AiChat is always in the dom, but it's hidden and inert when not expanded.
+      const aiChat = screen.getByTestId("ai-chat-entry-screen")
+      expect(!!aiChat.closest("[inert]")).toBe(true)
+    })
+
+    test("When `chatExpanded=true`, chat is not inert until closed", async () => {
+      if (!enabled) return
+      const resource = factories.learningResources.resource({
+        resource_type: ResourceTypeEnum.Course,
+      })
+      setup({ resource, chatExpanded: true })
+
+      const aiChat = screen.getByTestId("ai-chat-entry-screen")
+      expect(!!aiChat.closest("[inert]")).toBe(false)
+
+      await user.click(screen.getByRole("button", { name: "Close" }))
+
+      expect(!!aiChat.closest("[inert]")).toBe(true)
+    })
   },
 )

frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.tsx

@@ -37,14 +37,6 @@ const ContentSection = styled.div<{
   position: "relative",
 }))
 
-const StyledAiChatSyllabusOpener = styled(AiChatSyllabusOpener)<{
-  top: number
-}>(({ top }) => ({
-  position: "sticky",
-  top,
-  zIndex: 2,
-}))
-
 const TopContainer = styled.div<{ chatEnabled: boolean }>(
   ({ theme, chatEnabled }) => ({
     display: "flex",
@@ -238,15 +230,20 @@ const LearningResourceExpanded: React.FC<LearningResourceExpandedProps> = ({
         ref={titleSectionRef}
         titleId={titleId}
         resource={resource}
-        onClickClose={closeDrawer}
+        onClickClose={
+          chatTransitionState === ChatTransitionState.Open
+            ? () => onChatOpenerToggle(false)
+            : closeDrawer
+        }
       />
       {chatEnabled ? (
         <>
-          <StyledAiChatSyllabusOpener
-            open={chatExpanded}
-            top={titleSectionHeight}
-            onToggleOpen={onChatOpenerToggle}
-          />
+          {chatTransitionState !== ChatTransitionState.Open ? (
+            <AiChatSyllabusOpener
+              open={chatExpanded}
+              onToggleOpen={onChatOpenerToggle}
+            />
+          ) : null}
           <AiSyllabusBotSlideDown
             resource={resource}
             open={chatExpanded}

frontends/main/src/page-components/LearningResourceExpanded/TitleSection.tsx

@@ -8,19 +8,23 @@ import { RiCloseLargeLine } from "@remixicon/react"
 
 const TitleContainer = styled.div({
   display: "flex",
-  position: "sticky",
   justifyContent: "space-between",
   top: "0",
-  padding: "24px 28px",
+  padding: "24px 72px 24px 28px",
   gap: "16px",
-  zIndex: 2,
+  zIndex: 3,
   backgroundColor: theme.custom.colors.white,
   [theme.breakpoints.down("md")]: {
-    padding: "24px 16px",
+    padding: "24px 60px 24px 16px",
   },
 })
 
 const CloseButton = styled(ActionButton)(({ theme }) => ({
+  position: "fixed",
+  right: "28px",
+  [theme.breakpoints.down("md")]: {
+    right: "16px",
+  },
   "&&&": {
     flexShrink: 0,
     backgroundColor: theme.custom.colors.lightGray2,