Fix double/triple click selection issues for heading with a clickable anchor link (#3140)

HiDeoo · web-flow · commit f6eb1d5a776b · 2025-04-24T17:15:49.000+02:00
diff --git a/.changeset/clean-yaks-drive.md b/.changeset/clean-yaks-drive.md
@@ -0,0 +1,5 @@
+---
+'@astrojs/starlight': patch
+---
+
+Fixes a text selection issue for heading with a clickable anchor link when using double or triple click to select text.
diff --git a/packages/starlight/style/anchor-links.css b/packages/starlight/style/anchor-links.css
@@ -88,6 +88,9 @@ how we do it.
 		position: relative;
 		/* Move the anchor link over the heading element’s end-of-line padding. */
 		margin-inline-start: calc(-1 * var(--sl-anchor-icon-size));
+		/* Prevent double or triple clicks from potentially selecting the anchor link a11y text. */
+		-webkit-user-select: none;
+		user-select: none;
 	}
 
 	/* Increase clickable area for anchor links with a pseudo element that doesn’t impact layout. */

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@astrojs/starlight': patch
 +---
++
 +Fixes a text selection issue for heading with a clickable anchor link when using double or triple click to select text.
Original file line number	Diff line number	Diff line change
`@@ -88,6 +88,9 @@ how we do it.`
`88`	`88`	`position: relative;`
`89`	`89`	`/* Move the anchor link over the heading element’s end-of-line padding. */`
`90`	`90`	`margin-inline-start: calc(-1 * var(--sl-anchor-icon-size));`
	`91`	`+ /* Prevent double or triple clicks from potentially selecting the anchor link a11y text. */`
	`92`	`+ -webkit-user-select: none;`
	`93`	`+ user-select: none;`
`91`	`94`	`}`
`92`	`95`
`93`	`96`	`/* Increase clickable area for anchor links with a pseudo element that doesn’t impact layout. */`