diff --git a/frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.test.tsx b/frontends/main/src/page-components/LearningResourceExpanded/LearningResourceExpanded.test.tsx index 3e3ddd961a..b7d1550a24 100644 --- 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 index f32b5db7a0..56b69564dc 100644 --- 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) && ( {type} - {title} + {title} = styled(Linkable)` flex-grow: 1; @@ -247,8 +248,10 @@ const ListCard: Card = ({ {info} {title && ( - - <TruncateText lineClamp={2}>{title.children}</TruncateText> + <Title data-card-link={!!title.href} href={title.href}> + <TruncateText lineClamp={2} lang={title.lang}> + {title.children} + </TruncateText> )} diff --git a/frontends/ol-components/src/components/Card/ListCardCondensed.tsx b/frontends/ol-components/src/components/Card/ListCardCondensed.tsx index 1de609be2f..38ffe25a69 100644 --- 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 = ({ {info} - <TruncateText lineClamp={4}>{title.children}</TruncateText> + <TruncateText lineClamp={4} lang={title.lang}> + {title.children} + </TruncateText>
{footer}
diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.test.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.test.tsx index 3012f299ea..8e2db80b2d 100644 --- 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 index 1c70b110fb..5b3f8c9af5 100644 --- 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 = ({ - {resource.title} + + {resource.title} + {onAddToLearningPathClick && ( { }, ) + 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 index 2d145969ae..c1e526a129 100644 --- 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 = ({ - {resource.title} + + {resource.title} + {onAddToLearningPathClick && ( - + {resource.title} diff --git a/frontends/ol-utilities/src/learning-resources/learning-resources.ts b/frontends/ol-utilities/src/learning-resources/learning-resources.ts index 91c4d4b30f..59bebda13a 100644 --- 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 }