Announce external link targets for screen readers

src/components/components.test.tsx

@@ -78,7 +78,7 @@ describe("UI Components", () => {
         </IconLink>,
       );
 
-      const link = getByLabelText("My Title");
+      const link = getByLabelText("My Title (opens in a new tab)");
       expect(link).toBeInTheDocument();
       expect(link.getAttribute("href")).toBe("https://example.com");
       expect(link.getAttribute("target")).toBe("_blank");
@@ -93,7 +93,7 @@ describe("UI Components", () => {
       ];
 
       const { getByLabelText } = render(<Social profiles={customProfiles} />);
-      const btn = getByLabelText("GitHub");
+      const btn = getByLabelText("GitHub (opens in a new tab)");
       expect(btn).toBeInTheDocument();
 
       act(() => {

src/components/icon-link.tsx

@@ -17,7 +17,7 @@ export const IconLink = ({ href, title, children }: IconLinkProps) => (
         href={href}
         target="_blank"
         rel="noopener noreferrer"
-        aria-label={title}
+        aria-label={`${title} (opens in a new tab)`}
         className="icon-link"
       >
         {children}

src/components/publication.test.tsx

@@ -34,7 +34,7 @@ describe("PublicationCard", () => {
       const { getByLabelText } = render(
         <PublicationCard publication={pubWithDoi} />,
       );
-      expect(getByLabelText("DOI")).toBeInTheDocument();
+      expect(getByLabelText("DOI (opens in a new tab)")).toBeInTheDocument();
     }
   });
 

src/components/section-item-card.tsx

@@ -31,6 +31,7 @@ export const SectionItemCard = memo(
             <p className="dark:text-primary-dark text-primary">{subtitle}</p>
             <p className="text-secondary">{footer}</p>
           </div>
+          <span className="sr-only"> (opens in a new tab)</span>
         </a>
       </div>
     );

src/components/social.tsx

@@ -16,7 +16,7 @@ const Social = ({ profiles: propsProfiles }: { profiles?: Profile[] }) => {
               variant="ghost"
               size="lg"
               isIconOnly
-              aria-label={profile.name}
+              aria-label={`${profile.name} (opens in a new tab)`}
               className="text-slate-500 hover:text-primary rounded-full text-2xl"
               onPress={() =>
                 window.open(profile.link, "_blank", "noopener,noreferrer")