Drawer/chat accessibility fixes (#2214)

* Chevron icon to close / slide up

* Rotating open/close chevron

* Upgrade Smoot Design

* Fix to wait for render cycle before scroll to top

* Upgrade smoot-design

Author: jonkafton

frontends/main/package.json

@@ -14,7 +14,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/styled": "^11.11.0",
     "@mitodl/course-search-utils": "3.3.2",
-    "@mitodl/smoot-design": "^6.1.0",
+    "@mitodl/smoot-design": "^6.2.2",
     "@next/bundle-analyzer": "^14.2.15",
     "@remixicon/react": "^4.2.0",
     "@sentry/nextjs": "^9.0.0",

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

@@ -1,11 +1,7 @@
 import React, { useRef, useEffect } from "react"
 import { Typography, styled } from "ol-components"
 import { Button } from "@mitodl/smoot-design"
-import {
-  RiSparkling2Line,
-  RiArrowDownSLine,
-  RiCloseLine,
-} from "@remixicon/react"
+import { RiSparkling2Line, RiArrowDownSLine } from "@remixicon/react"
 import type { AiChatProps } from "@mitodl/smoot-design/ai"
 import { LearningResource } from "api"
 import { AiChat } from "@mitodl/smoot-design/ai"
@@ -74,31 +70,21 @@ const StyledButton = styled(Button)<{ open: boolean }>(({ theme, open }) => ({
   "&&": {
     ":hover": {
       backgroundColor: theme.custom.colors.white,
-      borderColor: open
-        ? theme.custom.colors.darkGray1
-        : theme.custom.colors.silverGray,
-      "svg:last-child": {
-        backgroundColor: open ? theme.custom.colors.darkGray1 : "transparent",
-      },
+      borderColor: theme.custom.colors.silverGray,
     },
   },
+  "svg:last-child": {
+    transform: open ? "rotate(-180deg)" : "rotate(0deg)",
+    transition: "transform 0.3s ease-in-out",
+  },
 }))
 
-const OpenChevron = styled(RiArrowDownSLine)(({ theme }) => ({
+const Chevron = styled(RiArrowDownSLine)(({ theme }) => ({
   fill: theme.custom.colors.mitRed,
   position: "absolute",
   right: "9px",
 }))
 
-const CloseButton = styled(RiCloseLine)(({ theme }) => ({
-  fill: theme.custom.colors.white,
-  position: "absolute",
-  right: "0",
-  padding: "9px",
-  boxSizing: "content-box",
-  backgroundColor: theme.custom.colors.silverGray,
-}))
-
 const StyledAiChat = styled(AiChat)<{
   topPosition: number
 }>(({ topPosition }) => ({
@@ -146,7 +132,7 @@ export const AiChatSyllabusOpener = ({
         <Typography variant="body1">
           Ask<strong>TIM</strong> about this course
         </Typography>
-        {open ? <CloseButton /> : <OpenChevron />}
+        <Chevron />
       </StyledButton>
     </Opener>
   )

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

@@ -174,7 +174,9 @@ const LearningResourceExpanded: React.FC<LearningResourceExpandedProps> = ({
       outerContainerRef.current.scrollTo(0, 0)
     }
     if (scrollElement) {
-      scrollElement.scrollTop = 0
+      requestAnimationFrame(() => {
+        scrollElement.scrollTop = 0
+      })
     }
   }, [resourceId, scrollElement])