Heading elements for resource drawer

[jonkafton]

What are the relevant tickets?

Closes https://github.com/mitodl/hq/issues/8556

Description (What does it do?)

Updates the learning resource drawer title to use <h2> and section (carousel) headings to use <h3>.

Screenshots (if appropriate):

How can this be tested?

Open a resource drawer and confirm that the headings are indeed using heading elements and that there is no impact to styles or layout.

[ChristopherChudzicki]

👍

Small suggestion to help us avoid doing this again. Didn't cause any type errors.

diff --git a/frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.tsx b/frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.tsx
index a7ea37a1f..f5a897cdd 100644
--- a/frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.tsx
+++ b/frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.tsx
@@ -175,8 +175,11 @@ type ResourceCarouselProps = {
   "data-testid"?: string
   /**
    * Element type for the carousel title
+   *
+   * Note: This could allow wider elements, but we want to restrict it to
+   * headings for semantic purposes.
    */
-  titleComponent?: React.ElementType
+  titleComponent?: "h2" | "h3" | "h4" | "h5" | "h6"
   titleVariant?: TypographyProps["variant"]
   excludeResourceId?: number
 }
@@ -225,7 +228,7 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
   title,
   className,
   isLoading,
-  titleComponent = "h4",
+  titleComponent,
   titleVariant = "h4",
   excludeResourceId,
 }) => {

[ChristopherChudzicki]

Small suggestion to help us avoid doing this again. Didn't cause any type errors.

diff --git a/frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.tsx b/frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.tsx
index a7ea37a1f..f5a897cdd 100644
--- a/frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.tsx
+++ b/frontends/main/src/page-components/ResourceCarousel/ResourceCarousel.tsx
@@ -175,8 +175,11 @@ type ResourceCarouselProps = {
   "data-testid"?: string
   /**
    * Element type for the carousel title
+   *
+   * Note: This could allow wider elements, but we want to restrict it to
+   * headings for semantic purposes.
    */
-  titleComponent?: React.ElementType
+  titleComponent?: "h2" | "h3" | "h4" | "h5" | "h6"
   titleVariant?: TypographyProps["variant"]
   excludeResourceId?: number
 }
@@ -225,7 +228,7 @@ const ResourceCarousel: React.FC<ResourceCarouselProps> = ({
   title,
   className,
   isLoading,
-  titleComponent = "h4",
+  titleComponent,
   titleVariant = "h4",
   excludeResourceId,
 }) => {