fix: add heading tags to B2B org section (#3347)

Author: daniellefrappier18

frontends/main/src/app-pages/DashboardPage/ContractContent.tsx

@@ -156,7 +156,9 @@ const WelcomeMessage: React.FC<{ contract?: ContractPage }> = ({
   return (
     <Stack gap="12px" paddingTop="40px" paddingBottom="24px">
       <Stack direction="row" justifyContent="space-between" alignItems="center">
-        <Typography variant="h5">{welcomeMessage}</Typography>
+        <Typography variant="h5" component="h2">
+          {welcomeMessage}
+        </Typography>
         <Link
           scroll={false}
           color="red"
@@ -775,7 +777,7 @@ const ContractContentInternal: React.FC<ContractContentInternalProps> = ({
         </ProgramCollectionsList>
         {programsQuery.data?.results.length === 0 && (
           <HeaderRoot>
-            <Typography variant="h3" component="h1">
+            <Typography variant="h3" component="h2">
               No programs found
             </Typography>
           </HeaderRoot>

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/OrganizationCards.test.tsx

@@ -74,6 +74,9 @@ describe("OrganizationCards", () => {
         )
       })
       expect(elements.length).toBeGreaterThan(0)
+      await screen.findByRole("heading", {
+        name: `As a member of ${org.name} you have access to:`,
+      })
     }
   })
 
@@ -135,6 +138,13 @@ describe("OrganizationCards", () => {
       expect(screen.getAllByRole("link", { name: "Contract 2" })).toHaveLength(
         2,
       )
+      // Contract names should be wrapped in heading elements
+      expect(
+        screen.getAllByRole("heading", { name: "Contract 1" }),
+      ).toHaveLength(2)
+      expect(
+        screen.getAllByRole("heading", { name: "Contract 2" }),
+      ).toHaveLength(2)
     })
 
     it("renders Continue buttons with correct organization URLs", async () => {

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/OrganizationCards.tsx

@@ -56,6 +56,11 @@ const CardRootStyled = styled(DashboardCardRoot)({
   },
 })
 
+const ContractTitleHeading = styled.h3({
+  margin: 0,
+  width: "100%",
+})
+
 const TitleLink = styled(Link)({
   width: "100%",
 })
@@ -107,9 +112,11 @@ const OrganizationContracts: React.FC<OrganizationContractsProps> = ({
       const href = contractView(org.slug.replace("org-", ""), contract.slug)
       return (
         <CardContent key={contract.id} direction="row">
-          <TitleLink size="medium" color="black" href={href}>
-            {contract.name}
-          </TitleLink>
+          <ContractTitleHeading>
+            <TitleLink size="medium" color="black" href={href}>
+              {contract.name}
+            </TitleLink>
+          </ContractTitleHeading>
           <CardButton size="small" href={href} endIcon={<RiArrowRightLine />}>
             Continue
           </CardButton>
@@ -127,7 +134,7 @@ const OrganizationContracts: React.FC<OrganizationContractsProps> = ({
             style={{ objectFit: "contain" }}
           />
         </ImageContainer>
-        <Typography variant="body2">
+        <Typography variant="body2" component="h2">
           {"As a member of "}
           <Typography variant="subtitle2" component="span">
             {org.name}