fix(app-webdir-ui): render profile card title as bold text instead of h4

packages/app-webdir-ui/src/ProfileCard/index.js

@@ -90,7 +90,9 @@ const ProfileCard = ({ ...props }) => {
         )}
         {!props.profileURL && <h3 className="person-name">{props.name}</h3>}
         <div className="person-profession">
-          <h4>{title}</h4>
+          <p className="person-profession-title">
+            <strong>{title}</strong>
+          </p>
           {department && <span className="dept">{department}</span>}
         </div>
         {props.size !== "micro" && (

packages/app-webdir-ui/src/ProfileCard/index.test.js

@@ -0,0 +1,40 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+
+import { ProfileCard } from "./index";
+
+const defaultProps = {
+  name: "John Smith",
+  matchedAffiliationTitle: "Regents Professor",
+  matchedAffiliationDept: "Edplus at ASU",
+  imgURL: "/test-image.jpg",
+  profileURL: "https://search.asu.edu/profile/12345",
+  email: "email@asu.edu",
+  size: "default",
+  GASource: "profile card",
+};
+
+describe("ProfileCard", () => {
+  it("should render the name and title", () => {
+    render(<ProfileCard {...defaultProps} />);
+    expect(screen.getByText("John Smith")).toBeInTheDocument();
+    expect(screen.getByText("Regents Professor")).toBeInTheDocument();
+  });
+
+  it("should not render the title as a heading", () => {
+    const { container } = render(<ProfileCard {...defaultProps} />);
+    expect(container.querySelector(".person-profession h4")).toBeNull();
+    expect(
+      screen.queryByRole("heading", { name: "Regents Professor" })
+    ).toBeNull();
+  });
+
+  it("should render the title as bold text in a paragraph", () => {
+    const { container } = render(<ProfileCard {...defaultProps} />);
+    const title = container.querySelector(
+      ".person-profession p.person-profession-title strong"
+    );
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent("Regents Professor");
+  });
+});

packages/unity-bootstrap-theme/src/scss/extends/_person-profile.scss

@@ -21,7 +21,8 @@ Desktop styles
     --name-top-margin: 0;
 
     .person-profession {
-      h4:not(:first-child) {
+      h4:not(:first-child),
+      .person-profession-title:not(:first-child) {
         display: none;
       }
     }
@@ -63,7 +64,10 @@ Desktop styles
       margin: 0;
       line-height: 1;
       margin-bottom: var(--person-profession-bottom-margin);
-      h4 {
+      // h4 kept for backward compatibility with consumers
+      // still rendering the profession title as a heading
+      h4,
+      .person-profession-title {
         margin: 0;
         font-size: $uds-size-font-medium;
         overflow: hidden;
@@ -73,6 +77,11 @@ Desktop styles
         line-clamp: 2;
         -webkit-box-orient: vertical;
       }
+      .person-profession-title {
+        font-weight: $heading-font-weight;
+        line-height: $heading-four-line-height;
+        letter-spacing: $heading-four-letter-spacing;
+      }
     }
     .more-link {
       line-height: 1;

packages/unity-bootstrap-theme/stories/molecules/person-profile/person-profile.templates.stories.js

@@ -53,12 +53,12 @@ const PersonProfile = ({ size, fill }) => (
     <div className="person">
       <h3 className="person-name">John Smith</h3>
       <div className="person-profession">
-        <h4>
-          <span>Regents Professor</span>
-        </h4>
-        <h4>
-          <span>Edplus at ASU</span>
-        </h4>
+        <p className="person-profession-title">
+          <strong>Regents Professor</strong>
+        </p>
+        <p className="person-profession-title">
+          <strong>Edplus at ASU</strong>
+        </p>
       </div>
       {size !== "micro" && (
         <ul className="person-contact-info">

packages/unity-react-core/src/components/PersonProfile/PersonProfile.test.tsx

@@ -85,15 +85,33 @@ describe("PersonProfile tests", () => {
 
   describe("accessibility tests", () => {
     it("should have proper aria labels for contact links", () => {
-      expect(screen.getByLabelText(`Email ${component.container.querySelector("a[href*='mailto:']").innerHTML}`)).toBeInTheDocument();
-      expect(screen.getByLabelText(`Phone ${component.container.querySelector("a[href*='tel:']").innerHTML.replace(/\-/g, " ").replace(/\(/g, "").replace(/\)/g, "")}`)).toBeInTheDocument();
+      expect(
+        screen.getByLabelText(
+          `Email ${component.container.querySelector("a[href*='mailto:']").innerHTML}`
+        )
+      ).toBeInTheDocument();
+      expect(
+        screen.getByLabelText(
+          `Phone ${component.container.querySelector("a[href*='tel:']").innerHTML.replace(/\-/g, " ").replace(/\(/g, "").replace(/\)/g, "")}`
+        )
+      ).toBeInTheDocument();
     });
 
     it("should use semantic HTML elements", () => {
       expect(component.container.querySelector("address")).toBeInTheDocument();
       expect(component.container.querySelector("h3")).toBeInTheDocument();
-      expect(component.container.querySelector("h4")).toBeInTheDocument();
     });
-  });
 
+    it("should not render profession as headings", () => {
+      expect(
+        component.container.querySelector(".person-profession h4")
+      ).toBeNull();
+      const titles = component.container.querySelectorAll(
+        ".person-profession p.person-profession-title strong"
+      );
+      expect(titles).toHaveLength(2);
+      expect(titles[0]).toHaveTextContent("Regents Professor");
+      expect(titles[1]).toHaveTextContent("Edplus at ASU");
+    });
+  });
 });

packages/unity-react-core/src/components/PersonProfile/PersonProfile.tsx

@@ -85,27 +85,31 @@ const PersonProfile: React.FC<PersonProfileProps> = ({
       <div className="person">
         <h3 className="person-name">{name}</h3>
         <div className="person-profession">
-          <h4>
-            <span>{profession.title}</span>
-          </h4>
-          <h4>
-            <span>{profession.department}</span>
-          </h4>
+          <p className="person-profession-title">
+            <strong>{profession.title}</strong>
+          </p>
+          <p className="person-profession-title">
+            <strong>{profession.department}</strong>
+          </p>
         </div>
 
         <ul className="person-contact-info">
           <li>
-            <GaEventWrapper
-              gaData={{ ...gaData, section: name.toLowerCase() }}
-            >
-              <a href={`mailto:${contactInfo.email}`} aria-label={`Email ${contactInfo.email}`}>
+            <GaEventWrapper gaData={{ ...gaData, section: name.toLowerCase() }}>
+              <a
+                href={`mailto:${contactInfo.email}`}
+                aria-label={`Email ${contactInfo.email}`}
+              >
                 {contactInfo.email}
               </a>
             </GaEventWrapper>
           </li>
           <li>
             <GaEventWrapper gaData={{ ...gaData, section: name.toLowerCase() }}>
-              <a href={`tel:${contactInfo.phone}`} aria-label={`Phone ${contactInfo.phone.replace(/\-/g, " ").replace(/\(/g, "").replace(/\)/g, "")}`}>
+              <a
+                href={`tel:${contactInfo.phone}`}
+                aria-label={`Phone ${contactInfo.phone.replace(/\-/g, " ").replace(/\(/g, "").replace(/\)/g, "")}`}
+              >
                 {contactInfo.phone}
               </a>
             </GaEventWrapper>