Shanbady/improve bookmark button label

frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx

@@ -7,7 +7,9 @@ import {
   expectProps,
 } from "../../test-utils"
 import type { User } from "../../test-utils"
+import { getReadableResourceType } from "ol-utilities"
 import { ResourceCard } from "./ResourceCard"
+import { ResourceTypeEnum } from "api"
 import {
   AddToLearningPathDialog,
   AddToUserListDialog,
@@ -65,11 +67,6 @@ describe.each([
     return { resource, view, location }
   }
 
-  const labels = {
-    addToLearningPaths: "Add to Learning Path",
-    addToUserList: "Add to User List",
-  }
-
   test("Applies className to the resource card", () => {
     const { view } = setup({ user: {}, props: { className: "test-class" } })
     expect(view.container.firstChild).toHaveClass("test-class")
@@ -91,12 +88,13 @@ describe.each([
   ])(
     "Always shows 'Add to User List' button, but only shows 'Add to Learning Path' button if user is a learning path editor",
     async ({ user, expectAddToLearningPathButton }) => {
-      setup({ user })
+      const { resource } = setup({ user })
       await screen.findByRole("button", {
-        name: labels.addToUserList,
+        name: `Bookmark ${getReadableResourceType(resource?.resource_type as ResourceTypeEnum)}`,
       })
+
       const addToLearningPathButton = screen.queryByRole("button", {
-        name: labels.addToLearningPaths,
+        name: "Add to Learning Path",
       })
       expect(!!addToLearningPathButton).toBe(expectAddToLearningPathButton)
     },
@@ -150,10 +148,10 @@ describe.each([
       user: { is_learning_path_editor: true, is_authenticated: true },
     })
     const addToUserListButton = await screen.findByRole("button", {
-      name: labels.addToUserList,
+      name: `Bookmark ${getReadableResourceType(resource?.resource_type as ResourceTypeEnum)}`,
     })
     const addToLearningPathButton = await screen.findByRole("button", {
-      name: labels.addToLearningPaths,
+      name: "Add to Learning Path",
     })
 
     expect(showModal).not.toHaveBeenCalled()
@@ -169,11 +167,11 @@ describe.each([
   })
 
   test("Clicking 'Add to User List' opens signup popover if not authenticated", async () => {
-    setup({
+    const { resource } = setup({
       user: { is_authenticated: false },
     })
     const addToUserListButton = await screen.findByRole("button", {
-      name: labels.addToUserList,
+      name: `Bookmark ${getReadableResourceType(resource?.resource_type as ResourceTypeEnum)}`,
     })
     await user.click(addToUserListButton)
     const dialog = screen.getByRole("dialog")

frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.test.tsx

@@ -3,7 +3,11 @@ import { BrowserRouter } from "react-router-dom"
 import { screen, render } from "@testing-library/react"
 import { LearningResourceCard } from "./LearningResourceCard"
 import type { LearningResourceCardProps } from "./LearningResourceCard"
-import { DEFAULT_RESOURCE_IMG, embedlyCroppedImage } from "ol-utilities"
+import {
+  DEFAULT_RESOURCE_IMG,
+  embedlyCroppedImage,
+  getReadableResourceType,
+} from "ol-utilities"
 import { ResourceTypeEnum, PlatformEnum, AvailabilityEnum } from "api"
 import { factories } from "api/test-utils"
 import { ThemeProvider } from "../ThemeProvider/ThemeProvider"
@@ -131,7 +135,9 @@ describe("Learning Resource Card", () => {
 
     await addToLearningPathButton.click()
 
-    const addToUserListButton = screen.getByLabelText("Add to User List")
+    const addToUserListButton = screen.getByLabelText(
+      `Bookmark ${getReadableResourceType(resource.resource_type)}`,
+    )
 
     await addToUserListButton.click()
 

frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx

@@ -272,7 +272,7 @@ const LearningResourceCard: React.FC<LearningResourceCardProps> = ({
         {onAddToUserListClick && (
           <CardActionButton
             filled={inUserList}
-            aria-label="Add to User List"
+            aria-label={`Bookmark ${getReadableResourceType(resource.resource_type)}`}
             onClick={(event) => onAddToUserListClick(event, resource.id)}
           >
             {inUserList ? (

frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx

@@ -3,7 +3,11 @@ import { BrowserRouter } from "react-router-dom"
 import { screen, render } from "@testing-library/react"
 import { LearningResourceListCard } from "./LearningResourceListCard"
 import type { LearningResourceListCardProps } from "./LearningResourceListCard"
-import { DEFAULT_RESOURCE_IMG, embedlyCroppedImage } from "ol-utilities"
+import {
+  DEFAULT_RESOURCE_IMG,
+  embedlyCroppedImage,
+  getReadableResourceType,
+} from "ol-utilities"
 import { ResourceTypeEnum, PlatformEnum, AvailabilityEnum } from "api"
 import { factories } from "api/test-utils"
 import { ThemeProvider } from "../ThemeProvider/ThemeProvider"
@@ -123,7 +127,9 @@ describe("Learning Resource List Card", () => {
     )
     await addToLearningPathButton.click()
 
-    const addToUserListButton = screen.getByLabelText("Add to User List")
+    const addToUserListButton = screen.getByLabelText(
+      `Bookmark ${getReadableResourceType(resource.resource_type)}`,
+    )
     await addToUserListButton.click()
 
     expect(onAddToLearningPathClick).toHaveBeenCalledWith(

frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx

@@ -295,7 +295,6 @@ const LearningResourceListCard: React.FC<LearningResourceListCardProps> = ({
   if (!resource) {
     return null
   }
-
   return (
     <ListCard href={href} className={className} draggable={draggable}>
       <ListCard.Image
@@ -323,7 +322,7 @@ const LearningResourceListCard: React.FC<LearningResourceListCardProps> = ({
         {onAddToUserListClick && (
           <CardActionButton
             filled={inUserList}
-            aria-label="Add to User List"
+            aria-label={`Bookmark ${getReadableResourceType(resource.resource_type)}`}
             onClick={(event) => onAddToUserListClick(event, resource.id)}
           >
             {inUserList ? (

frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx

@@ -114,6 +114,7 @@ const LearningResourceListCardCondensed: React.FC<
       </ListCardCondensed>
     )
   }
+
   if (!resource) {
     return null
   }
@@ -136,7 +137,7 @@ const LearningResourceListCardCondensed: React.FC<
         {onAddToUserListClick && (
           <CardActionButton
             filled={inUserList}
-            aria-label="Add to User List"
+            aria-label={`Bookmark ${getReadableResourceType(resource.resource_type)}`}
             onClick={(event) => onAddToUserListClick(event, resource.id)}
           >
             {inUserList ? (

frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx

@@ -20,6 +20,7 @@ import { LearningResource, LearningResourceRun, ResourceTypeEnum } from "api"
 import {
   formatDurationClockTime,
   getLearningResourcePrices,
+  getReadableResourceType,
 } from "ol-utilities"
 import { theme } from "../ThemeProvider/ThemeProvider"
 import Typography from "@mui/material/Typography"
@@ -288,7 +289,7 @@ const InfoSection = ({
           )}
           <CardActionButton
             filled={inUserList}
-            aria-label="Add to User List"
+            aria-label={`Bookmark ${getReadableResourceType(resource.resource_type)}`}
             onClick={
               onAddToUserListClick
                 ? (event) => onAddToUserListClick?.(event, resource.id)