-
diff --git a/src/app/conf/_design-system/anchor.test.tsx b/src/app/conf/_design-system/anchor.test.tsx
new file mode 100644
index 0000000000..db82dad2b4
--- /dev/null
+++ b/src/app/conf/_design-system/anchor.test.tsx
@@ -0,0 +1,105 @@
+import { describe, it, beforeEach } from "node:test"
+import { strict as assert } from "node:assert"
+import React from "react"
+import { render } from "@testing-library/react"
+import { JSDOM } from "jsdom"
+
+import { Anchor } from "./anchor"
+
+const dom = new JSDOM()
+global.document = dom.window.document
+global.window = dom.window as any
+global.React = React
+global.self = dom.window as any
+
+describe("Anchor", () => {
+ beforeEach(() => {
+ document.body.innerHTML = ""
+ })
+
+ it("adds target=_blank and rel attributes for external HTTPS links", () => {
+ const { container } = render(
+
External Link,
+ )
+
+ const link = container.querySelector("a")
+ assert.ok(link, "Link element should exist")
+ assert.strictEqual(link.getAttribute("target"), "_blank")
+ assert.strictEqual(link.getAttribute("rel"), "noopener noreferrer")
+ assert.strictEqual(link.getAttribute("href"), "https://example.com")
+ })
+
+ it("adds target=_blank and rel attributes for external HTTP links", () => {
+ const { container } = render(
+
External Link,
+ )
+
+ const link = container.querySelector("a")
+ assert.ok(link, "Link element should exist")
+ assert.strictEqual(link.getAttribute("target"), "_blank")
+ assert.strictEqual(link.getAttribute("rel"), "noopener noreferrer")
+ assert.strictEqual(link.getAttribute("href"), "http://example.com")
+ })
+
+ it("does not add target=_blank for hash links", () => {
+ const { container } = render(
Hash Link)
+
+ const link = container.querySelector("a")
+ assert.ok(link, "Link element should exist")
+ assert.strictEqual(link.getAttribute("target"), null)
+ assert.strictEqual(link.getAttribute("rel"), null)
+ assert.strictEqual(link.getAttribute("href"), "#section")
+ })
+
+ it("handles various external URL formats with target=_blank", () => {
+ const urls = [
+ "https://graphql.org",
+ "http://localhost:3000",
+ "https://api.github.com/user",
+ "http://example.com/path?query=value",
+ "https://docs.example.com/guide",
+ "//google.com",
+ ]
+
+ urls.forEach(url => {
+ const { container } = render(
Link)
+ const link = container.querySelector("a")
+
+ assert.ok(link, `Link element should exist for ${url}`)
+ assert.strictEqual(
+ link.getAttribute("target"),
+ "_blank",
+ `Should have target="_blank" for ${url}`,
+ )
+ assert.strictEqual(
+ link.getAttribute("rel"),
+ "noopener noreferrer",
+ `Should have rel="noopener noreferrer" for ${url}`,
+ )
+ })
+ })
+
+ it("handles empty href as internal (no target=_blank)", () => {
+ // Empty href is treated as internal by isInternal() logic
+ const { container } = render(
Empty Link)
+
+ const link = container.querySelector("a")
+ assert.ok(link, "Link element should exist")
+ assert.strictEqual(link.getAttribute("target"), null)
+ assert.strictEqual(link.getAttribute("rel"), null)
+ assert.strictEqual(link.getAttribute("href"), "")
+ })
+
+ it("does not add target=_blank for mailto links", () => {
+ // mailto links are handled by SIMPLE_LINK_REGEX, no external link treatment needed
+ const { container } = render(
+
Email Link,
+ )
+
+ const link = container.querySelector("a")
+ assert.ok(link, "Link element should exist")
+ assert.strictEqual(link.getAttribute("target"), null)
+ assert.strictEqual(link.getAttribute("rel"), null)
+ assert.strictEqual(link.getAttribute("href"), "mailto:test@example.com")
+ })
+})
diff --git a/src/app/conf/_design-system/anchor.tsx b/src/app/conf/_design-system/anchor.tsx
index 8845746d57..128d07471f 100644
--- a/src/app/conf/_design-system/anchor.tsx
+++ b/src/app/conf/_design-system/anchor.tsx
@@ -2,6 +2,9 @@ import { ForwardedRef, forwardRef, ReactElement } from "react"
import NextLink from "next/link"
import type { LinkProps as NextLinkProps } from "next/link"
+const EXTERNAL_LINK_REGEX = /^(http|\/\/|#)/
+const SIMPLE_LINK_REGEX = /^(#|mailto:)/
+
// eslint-disable-next-line @typescript-eslint/no-namespace
export declare namespace AnchorProps {
interface IntrinsicAnchorProps
@@ -23,23 +26,25 @@ export const Anchor = forwardRef(function Anchor(
props: AnchorProps,
ref: ForwardedRef
,
) {
- return isInternal(props) ? (
-
- ) : (
-
+ }
+
+ // we want to show an error if developer doesn't pass a href, but there are cases where it may happen with data from Sched.
+ const href = props.href || ""
+
+ const addedProps = SIMPLE_LINK_REGEX.test(href)
+ ? {
+ // if a href is just an id, the browser just scrolls,
+ // mailto: is also handled well by default
}
- {...props}
- />
- )
+ : {
+ // otherwise, it's an external link, and we open it in a new tab
+ rel: "noopener noreferrer",
+ target: "_blank",
+ }
+
+ return
}) as (props: AnchorProps) => ReactElement
function isInternal(
@@ -47,8 +52,6 @@ function isInternal(
): props is AnchorProps.InternalAnchorProps {
return (
typeof props.href === "object" ||
- (typeof props.href === "string" &&
- !props.href.startsWith("http") &&
- !props.href.startsWith("#"))
+ (typeof props.href === "string" && !EXTERNAL_LINK_REGEX.test(props.href))
)
}