Better Headings Structure

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

@@ -175,11 +175,14 @@ describe("ItemsListing", () => {
         />,
         { user: {} },
       )
+
       const titles = items.map((item) => item.resource.title)
-      const headings = screen.getAllByRole("heading", {
-        name: (value) => titles.includes(value),
+
+      const role = sortable ? "button" : "link"
+      const cards = screen.getAllByRole(role, {
+        name: (value) => titles.some((title) => value.includes(title)),
       })
-      expect(headings.map((h) => h.textContent)).toEqual(titles)
+      expect(cards.length).toBe(titles.length)
 
       if (sortable) {
         items.forEach(({ resource }) => {
@@ -320,23 +323,24 @@ describe.each([ListType.LearningPath, ListType.UserList])(
       const patchResponse = new ControlledPromise<void>()
       setMockResponse.patch(patchUrl(listType, active.id), patchResponse)
 
-      const titleEls1 = screen.getAllByRole("heading", {
-        name: (value) => titles.includes(value),
+      // dnd-kit draggables have role button (+ a roledescription)
+      const cards1 = screen.getAllByRole("button", {
+        name: (value) => titles.some((title) => value.includes(title)),
       })
-      expect(titleEls1.map((el) => el.textContent)).toEqual(titles)
+      expect(cards1.length).toBe(titles.length)
 
       act(() => simulateDrag(from, to))
 
       await waitFor(() => {
-        const titleEls2 = screen.getAllByRole("heading", {
-          name: (value) => titles.includes(value),
+        const cards2 = screen.getAllByRole("button", {
+          name: (value) => titles.some((title) => value.includes(title)),
         })
-        expect(titleEls2).toEqual([
-          titleEls1[0],
-          titleEls1[2],
-          titleEls1[3],
-          titleEls1[1],
-          titleEls1[4],
+        expect(cards2).toEqual([
+          cards1[0],
+          cards1[2],
+          cards1[3],
+          cards1[1],
+          cards1[4],
         ])
       })
     })

frontends/mit-learn/src/page-components/ItemsListing/ItemsListingComponent.tsx

@@ -26,13 +26,12 @@ type ItemsListingComponentProps = {
   condensed?: boolean
 }
 
-const HeaderText = styled.div(({ theme }) => ({
-  h3: {
-    ...theme.typography.h3,
-    [theme.breakpoints.down("sm")]: {
-      marginBottom: "24px",
-      ...theme.typography.h5,
-    },
+const HeaderText = styled.h1(({ theme }) => ({
+  margin: 0,
+  ...theme.typography.h3,
+  [theme.breakpoints.down("sm")]: {
+    marginBottom: "24px",
+    ...theme.typography.h5,
   },
 }))
 
@@ -110,9 +109,7 @@ const ItemsListingComponent: React.FC<ItemsListingComponentProps> = ({
             marginBottom="24px"
           >
             <HeaderGrid item>
-              <HeaderText>
-                <Typography component="h3">{list?.title}</Typography>
-              </HeaderText>
+              <HeaderText>{list?.title}</HeaderText>
               {list?.description && (
                 <DescriptionText>{list.description}</DescriptionText>
               )}

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

@@ -186,8 +186,8 @@ describe.each([
       user: { is_learning_path_editor: true },
     })
     invariant(resource)
-    const cardTitle = screen.getByRole("heading", { name: resource.title })
-    await user.click(cardTitle)
+    const link = screen.getByRole("link", { name: new RegExp(resource.title) })
+    await user.click(link)
     expect(
       new URLSearchParams(location.current.search).get(
         RESOURCE_DRAWER_QUERY_PARAM,