fix: cleanup comments, implement ellipsis suggestions.

Author: missionmike

src/components/MuiLink.test.tsx

@@ -20,4 +20,15 @@ describe("MuiLink", () => {
     expect(linkElement).toBeInTheDocument();
     expect(linkElement).toHaveAttribute("target", "_self");
   });
+
+  it("renders with aria-label attribute", () => {
+    const { getByRole } = render(
+      <MuiLink href="https://example.com" aria-label="Accessible link description">
+        Example
+      </MuiLink>,
+    );
+    const linkElement = getByRole("link", { name: "Accessible link description" });
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute("aria-label", "Accessible link description");
+  });
 });

src/components/MuiLink.tsx

@@ -1,19 +1,23 @@
 import NextLink from "next/link";
 import { SxProps, Theme } from "@mui/material";
 import Link from "@mui/material/Link";
+import { ComponentPropsWithoutRef } from "react";
 
 export const MuiLink = ({
   children,
   href,
   target = "_self",
   sx,
+  "aria-label": ariaLabel,
+  ...props
 }: {
   children: React.ReactNode;
   href: string;
   target?: "_self" | "_blank";
   sx?: SxProps<Theme>;
-}) => (
-  <Link href={href} component={NextLink} target={target} sx={sx}>
+  "aria-label"?: string;
+} & Omit<ComponentPropsWithoutRef<"a">, "href" | "target" | "children">) => (
+  <Link href={href} component={NextLink} target={target} sx={sx} aria-label={ariaLabel} {...props}>
     {children}
   </Link>
 );

src/theme/components/Skills/SkillsExperience.tsx

@@ -37,9 +37,6 @@ export const SkillsExperience = ({ skills }: { skills: SkillForUser[] }) => {
    *
    */
   skills.forEach((skill) => {
-    // If yearStart isn't defined, use "0" as the object key to indicate
-    // that there's no year. We can filter on this value later to conditionally
-    // display a label.
     const year = skill?.yearStarted;
 
     // The totalYears field allows users to override the value of how many years'

src/theme/default/components/ResumeHeading.test.tsx

@@ -2,7 +2,7 @@ import "@testing-library/jest-dom";
 import { usePathname } from "next/navigation";
 import { render, screen } from "@testing-library/react";
 import { themeDefaultSampleData } from "@/theme/sampleData";
-import { generateSocialUrl } from "@/util/social";
+import { generateSocialUrl, getSocialMediaPlatformByPlatformName } from "@/util/social";
 import { ResumeHeading } from "./ResumeHeading";
 
 // Mock the usePathname hook
@@ -42,10 +42,14 @@ describe("ResumeHeading", () => {
     // Check if all social links are rendered
     sampleSocials.forEach((social) => {
       const expectedUrl = generateSocialUrl(social);
-      const links = screen.getAllByRole("link", { name: "" });
-      const link = links.find((link) => link.getAttribute("href") === expectedUrl);
+      const platformName = getSocialMediaPlatformByPlatformName(social.platform).name;
+      const expectedAriaLabel = `${platformName} profile for ${sampleUser.name}`;
+
+      const link = screen.getByRole("link", { name: expectedAriaLabel });
       expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute("href", expectedUrl);
       expect(link).toHaveAttribute("target", "_blank");
+      expect(link).toHaveAttribute("aria-label", expectedAriaLabel);
     });
   });
 

src/theme/default/components/ResumeHeading.tsx

@@ -5,7 +5,11 @@ import { Box, Typography } from "@mui/material";
 import { Icon } from "@iconify/react";
 import { MuiLink } from "@/components/MuiLink";
 import { Social, User } from "@/types";
-import { generateSocialUrl, getSocialIcon } from "@/util/social";
+import {
+  generateSocialUrl,
+  getSocialIcon,
+  getSocialMediaPlatformByPlatformName,
+} from "@/util/social";
 
 export const ResumeHeading = ({ user, socials }: { user: User; socials: Social[] }) => {
   const pathname = usePathname();
@@ -75,11 +79,20 @@ export const ResumeHeading = ({ user, socials }: { user: User; socials: Social[]
       >
         <Box sx={{ display: "flex", gap: 2 }}>
           {socials
-            ? socials.map((social) => (
-                <MuiLink href={generateSocialUrl(social)} key={social.id} target="_blank">
-                  <Icon icon={getSocialIcon(social)} width="30" height="30" />
-                </MuiLink>
-              ))
+            ? socials.map((social) => {
+                const platformName = getSocialMediaPlatformByPlatformName(social.platform).name;
+                const ariaLabel = `${platformName} profile for ${user?.name || "user"}`;
+                return (
+                  <MuiLink
+                    href={generateSocialUrl(social)}
+                    key={social.id}
+                    target="_blank"
+                    aria-label={ariaLabel}
+                  >
+                    <Icon icon={getSocialIcon(social)} width="30" height="30" />
+                  </MuiLink>
+                );
+              })
             : null}
         </Box>
         <Typography component="div" sx={{ display: "flex", gap: 2, alignItems: "center" }}>

src/theme/default/components/pdf/Skills.test.tsx

@@ -25,11 +25,11 @@ describe("Skills", () => {
     if (!cssSkill) throw new Error("CSS skill not found in sample data");
     const cssYears = currentYear - (cssSkill.yearStarted as number);
 
-    // Check for React's experience
+    // Check for React Redux experience
     expect(screen.getByText(`${reactReduxYears} years:`)).toBeInTheDocument();
     expect(screen.getByText(/React Redux/)).toBeInTheDocument();
 
-    // Check for TypeScript's experience
+    // Check for CSS experience
     expect(screen.getByText(`${cssYears} years:`)).toBeInTheDocument();
     expect(screen.getByText(/CSS/)).toBeInTheDocument();
   });

src/util/structure.ts

@@ -32,9 +32,6 @@ export const groupSkillsForUserByYearExperience = (skills: SkillForUser[]) => {
    *
    */
   skills.forEach((skill) => {
-    // If yearStart isn't defined, use "0" as the object key to indicate
-    // that there's no year. We can filter on this value later to conditionally
-    // display a label.
     const year = skill?.yearStarted;
 
     // The totalYears field allows users to override the value of how many years'
@@ -59,7 +56,7 @@ export const groupSkillsForUserByYearExperience = (skills: SkillForUser[]) => {
   // the order of the render.
   const skillsExperienceList: [string, SkillForUser[]][] = [];
 
-  Object.keys(skillsByYear).map((totalYears) => {
+  Object.keys(skillsByYear).forEach((totalYears) => {
     skillsExperienceList.push([totalYears, skillsByYear[totalYears]]);
   });