fix(Link): prevent text selection on icon element (#3051)

Author: TimAufdemKampe

packages/components/src/components/Link/Link.browser.test.tsx

@@ -58,3 +58,40 @@ test("button in a disabled link exposes its disabled state", async () => {
     .element(page.getByTestId("button"))
     .toHaveAttribute("data-disabled", "true");
 });
+
+test("selecting the whole external link does not select any part of the icon", async () => {
+  const { container } = await render(<Link target="_blank">mittwald.de</Link>);
+  const link = container.querySelector('[role="link"]') as HTMLElement;
+
+  const range = document.createRange();
+  range.selectNodeContents(link);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+
+  expect(selection?.toString()).toBe("mittwald.de");
+});
+
+test("selecting the whole download link does not select any part of the icon", async () => {
+  const { container } = await render(<Link download>Download the plans</Link>);
+  const link = container.querySelector('[role="link"]') as HTMLElement;
+
+  const range = document.createRange();
+  range.selectNodeContents(link);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+
+  expect(selection?.toString()).toBe("Download the plans");
+});
+
+test("the link icon is excluded from text selection", async () => {
+  const { container } = await render(<Link target="_blank">mittwald.de</Link>);
+  const icon = container.querySelector("svg") as SVGElement;
+  const style = getComputedStyle(icon);
+
+  expect(
+    style.getPropertyValue("user-select") ||
+      style.getPropertyValue("-webkit-user-select"),
+  ).toBe("none");
+});

packages/components/src/components/Link/Link.module.d.scss.ts

@@ -2,9 +2,9 @@ declare const classNames: {
   readonly link: "link";
   readonly inline: "inline";
   readonly icon: "icon";
+  readonly linkIcon: "linkIcon";
   readonly "size-s": "size-s";
   readonly button: "button";
-  readonly linkIcon: "linkIcon";
   readonly light: "light";
   readonly dark: "dark";
   readonly "dark-static": "dark-static";

packages/components/src/components/Link/Link.module.scss

@@ -36,6 +36,11 @@
     height: var(--link--icon-height);
   }
 
+  .linkIcon {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
   &[aria-disabled] {
     color: var(--link--color--disabled);
   }