From 1ab749bc69bd41ece62a1d3821e54a0f0cc219e9 Mon Sep 17 00:00:00 2001
From: Jon Kafton <939376+jonkafton@users.noreply.github.com>
Date: Wed, 8 Oct 2025 21:46:42 +0200
Subject: [PATCH] Heading elements for resource drawer

---
 .../LearningResourceDrawer.tsx                 |  6 +++---
 .../LearningResourceExpanded/TitleSection.tsx  | 18 ++++++++++--------
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
index 86ae4d928c..33ee4f33d4 100644
--- a/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
+++ b/frontends/main/src/page-components/LearningResourceDrawer/LearningResourceDrawer.tsx
@@ -110,7 +110,7 @@ const DrawerContent: React.FC<{
   ) => {
     return (
       <ResourceCarousel
-        titleComponent="p"
+        titleComponent="h3"
         titleVariant="subtitle1"
         title={title}
         config={[
@@ -132,7 +132,7 @@ const DrawerContent: React.FC<{
   }
   const similarResourcesCarousel = (
     <ResourceCarousel
-      titleComponent="p"
+      titleComponent="h3"
       titleVariant="subtitle1"
       title="Similar Learning Resources"
       config={[
@@ -154,7 +154,7 @@ const DrawerContent: React.FC<{
   const topicCarousels = topics?.map((topic) => (
     <ResourceCarousel
       key={topic.id}
-      titleComponent="p"
+      titleComponent="h3"
       titleVariant="subtitle1"
       title={`Learning Resources in "${topic.name}"`}
       config={TopicCarouselConfig(topic.name)}
diff --git a/frontends/main/src/page-components/LearningResourceExpanded/TitleSection.tsx b/frontends/main/src/page-components/LearningResourceExpanded/TitleSection.tsx
index 14a680c986..ff60620259 100644
--- a/frontends/main/src/page-components/LearningResourceExpanded/TitleSection.tsx
+++ b/frontends/main/src/page-components/LearningResourceExpanded/TitleSection.tsx
@@ -70,20 +70,22 @@ const TitleSection: React.FC<{
 
   return (
     <TitleContainer ref={ref}>
-      <Typography
-        variant="h4"
-        id={titleId}
-        width="100%"
-        color={theme.custom.colors.darkGray2}
-      >
+      <div id={titleId}>
         <Typography
           variant="subtitle2"
           color={theme.custom.colors.silverGrayDark}
         >
           {type}
         </Typography>
-        <span lang={resource?.runs?.[0]?.languages?.[0]}>{title}</span>
-      </Typography>
+        <Typography
+          variant="h4"
+          component="h2"
+          color={theme.custom.colors.darkGray2}
+          lang={resource?.runs?.[0]?.languages?.[0]}
+        >
+          {title}
+        </Typography>
+      </div>
       <CloseButton
         variant="text"
         size="medium"