Set language attribute on resource title and descriptions (#2346)

jonkafton · web-flow · commit c3206f6d502d · 2025-07-11T23:52:41.000+02:00
* Set first run language on drawer and card titles and description

* Unfocus test

* Get language from last resource run. Provide utility function
diff --git a/frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.test.tsx b/frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.test.tsx
@@ -114,6 +114,25 @@ describe("Learning Resource Expanded", () => {
     screen.getByText(resource.title)
   })
 
+  test("Sets lang attribute on title and description", () => {
+    const resource = factories.learningResources.resource({
+      resource_type: ResourceTypeEnum.Course,
+      runs: [
+        factories.learningResources.run({
+          languages: ["en-us"],
+        }),
+      ],
+    })
+
+    setup({ resource })
+
+    const title = screen.getByText(resource.title)
+    expect(title).toHaveAttribute("lang", "en-us")
+
+    const description = screen.getByText(resource.description!)
+    expect(description).toHaveAttribute("lang", "en-us")
+  })
+
   test.each([ResourceTypeEnum.Program, ResourceTypeEnum.LearningPath])(
     'Renders CTA button for resource type "%s"',
     (resourceType) => {
diff --git a/frontends/main/src/page-components/LearningResourceExpanded/ResourceDescription.tsx b/frontends/main/src/page-components/LearningResourceExpanded/ResourceDescription.tsx
@@ -2,6 +2,8 @@ import React, { useCallback, useRef, useState } from "react"
 import styled from "@emotion/styled"
 import { Skeleton, theme, Link } from "ol-components"
 import type { LearningResource } from "api"
+import { getResourceLanguage } from "ol-utilities"
+
 const DescriptionContainer = styled.div({
   display: "flex",
   flexDirection: "column",
@@ -83,6 +85,7 @@ const ResourceDescription = ({ resource }: { resource?: LearningResource }) => {
          * backend during ETL. This is safe to render.
          */
         dangerouslySetInnerHTML={{ __html: resource.description || "" }}
+        lang={getResourceLanguage(resource)}
       />
       {(isClamped || clampedOnFirstRender.current) && (
         <Link
diff --git a/frontends/main/src/page-components/LearningResourceExpanded/TitleSection.tsx b/frontends/main/src/page-components/LearningResourceExpanded/TitleSection.tsx
@@ -82,7 +82,7 @@ const TitleSection: React.FC<{
         >
           {type}
         </Typography>
-        {title}
+        <span lang={resource?.runs?.[0]?.languages?.[0]}>{title}</span>
       </Typography>
       <CloseButton
         variant="text"
diff --git a/frontends/ol-components/src/components/Card/Card.tsx b/frontends/ol-components/src/components/Card/Card.tsx
@@ -230,6 +230,7 @@ type TitleProps = {
   href?: string
   lines?: number
   style?: CSSProperties
+  lang?: string
 }
 
 type SlotProps = { children?: ReactNode; style?: CSSProperties }
diff --git a/frontends/ol-components/src/components/Card/ListCard.tsx b/frontends/ol-components/src/components/Card/ListCard.tsx
@@ -88,6 +88,7 @@ export const Info = styled.div`
 export type TitleProps = {
   children?: ReactNode
   href?: string
+  lang?: string
 }
 export const Title: React.FC<TitleProps> = styled(Linkable)`
   flex-grow: 1;
@@ -247,8 +248,10 @@ const ListCard: Card = ({
       <Body>
         <Info>{info}</Info>
         {title && (
-          <Title data-card-link={!!title.href} {...title} href={title.href}>
-            <TruncateText lineClamp={2}>{title.children}</TruncateText>
+          <Title data-card-link={!!title.href} href={title.href}>
+            <TruncateText lineClamp={2} lang={title.lang}>
+              {title.children}
+            </TruncateText>
           </Title>
         )}
         <Bottom>
diff --git a/frontends/ol-components/src/components/Card/ListCardCondensed.tsx b/frontends/ol-components/src/components/Card/ListCardCondensed.tsx
@@ -159,7 +159,9 @@ const ListCardCondensed: Card = ({
       <Body>
         <Info>{info}</Info>
         <Title data-card-link={!!title.href} href={title.href}>
-          <TruncateText lineClamp={4}>{title.children}</TruncateText>
+          <TruncateText lineClamp={4} lang={title.lang}>
+            {title.children}
+          </TruncateText>
         </Title>
         <Bottom>
           <Footer>{footer}</Footer>
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.test.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.test.tsx
@@ -38,6 +38,22 @@ describe("Learning Resource Card", () => {
     },
   )
 
+  test("Sets lang attribute on title and description", () => {
+    const resource = factories.learningResources.resource({
+      resource_type: ResourceTypeEnum.Course,
+      runs: [
+        factories.learningResources.run({
+          languages: ["en-us"],
+        }),
+      ],
+    })
+
+    setup({ resource })
+
+    const title = screen.getByText(resource.title)
+    expect(title).toHaveAttribute("lang", "en-us")
+  })
+
   test("Displays run start date", () => {
     const resource = factories.learningResources.resource({
       resource_type: ResourceTypeEnum.Course,
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx
@@ -15,6 +15,7 @@ import {
   getLearningResourcePrices,
   getResourceDate,
   showStartAnytime,
+  getResourceLanguage,
 } from "ol-utilities"
 import { Card } from "../Card/Card"
 import type { Size } from "../Card/Card"
@@ -241,7 +242,9 @@ const LearningResourceCard: React.FC<LearningResourceCardProps> = ({
       <Card.Info>
         <Info resource={resource} size={size} />
       </Card.Info>
-      <Card.Title href={href}>{resource.title}</Card.Title>
+      <Card.Title href={href} lang={getResourceLanguage(resource)}>
+        {resource.title}
+      </Card.Title>
       <Card.Actions>
         {onAddToLearningPathClick && (
           <CardActionButton
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx
@@ -37,6 +37,22 @@ describe("Learning Resource List Card", () => {
     },
   )
 
+  test("Sets lang attribute on title and description", () => {
+    const resource = factories.learningResources.resource({
+      resource_type: ResourceTypeEnum.Course,
+      runs: [
+        factories.learningResources.run({
+          languages: ["pt-pt"],
+        }),
+      ],
+    })
+
+    setup({ resource })
+
+    const title = screen.getByText(resource.title)
+    expect(title).toHaveAttribute("lang", "pt-pt")
+  })
+
   test("Displays run start date", () => {
     const resource = factories.learningResources.resource({
       resource_type: ResourceTypeEnum.Course,
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx
@@ -16,6 +16,7 @@ import {
   getLearningResourcePrices,
   getResourceDate,
   showStartAnytime,
+  getResourceLanguage,
 } from "ol-utilities"
 import { ListCard } from "../Card/ListCard"
 import type { ActionButtonProps } from "@mitodl/smoot-design"
@@ -319,7 +320,9 @@ const LearningResourceListCard: React.FC<LearningResourceListCardProps> = ({
       <ListCard.Info>
         <Info resource={resource} />
       </ListCard.Info>
-      <ListCard.Title href={href}>{resource.title}</ListCard.Title>
+      <ListCard.Title href={href} lang={getResourceLanguage(resource)}>
+        {resource.title}
+      </ListCard.Title>
       <ListCard.Actions>
         {onAddToLearningPathClick && (
           <CardActionButton
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx
@@ -11,6 +11,7 @@ import { LearningResource } from "api"
 import {
   getReadableResourceType,
   getLearningResourcePrices,
+  getResourceLanguage,
 } from "ol-utilities"
 import { ListCardCondensed } from "../Card/ListCardCondensed"
 import {
@@ -128,7 +129,7 @@ const LearningResourceListCardCondensed: React.FC<
       <ListCardCondensed.Info>
         <Info resource={resource} />
       </ListCardCondensed.Info>
-      <ListCardCondensed.Title href={href}>
+      <ListCardCondensed.Title href={href} lang={getResourceLanguage(resource)}>
         {resource.title}
       </ListCardCondensed.Title>
       <ListCardCondensed.Actions>
diff --git a/frontends/ol-utilities/src/learning-resources/learning-resources.ts b/frontends/ol-utilities/src/learning-resources/learning-resources.ts
@@ -161,6 +161,10 @@ const allRunsAreIdentical = (resource: LearningResource) => {
   )
 }
 
+const getResourceLanguage = (resource: LearningResource) => {
+  return resource.runs?.[resource.runs.length - 1]?.languages?.[0]
+}
+
 export {
   DEFAULT_RESOURCE_IMG,
   embedlyCroppedImage,
@@ -169,5 +173,6 @@ export {
   findBestRun,
   formatRunDate,
   allRunsAreIdentical,
+  getResourceLanguage,
 }
 export type { EmbedlyConfig }

Original file line number	Diff line number	Diff line change
`@@ -82,7 +82,7 @@ const TitleSection: React.FC<{`
`82`	`82`	`>`
`83`	`83`	`{type}`
`84`	`84`	`</Typography>`
`85`		`- {title}`
	`85`	`+ <span lang={resource?.runs?.[0]?.languages?.[0]}>{title}</span>`
`86`	`86`	`</Typography>`
`87`	`87`	`<CloseButton`
`88`	`88`	`variant="text"`
Original file line number	Diff line number	Diff line change
`@@ -230,6 +230,7 @@ type TitleProps = {`
`230`	`230`	`href?: string`
`231`	`231`	`lines?: number`
`232`	`232`	`style?: CSSProperties`
	`233`	`+ lang?: string`
`233`	`234`	`}`
`234`	`235`
`235`	`236`	`type SlotProps = { children?: ReactNode; style?: CSSProperties }`