From 3db4d9ac31d093221916a48e0c8de8f75e009d6a Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Fri, 26 Sep 2025 13:43:28 -0400
Subject: [PATCH 1/4] fix(headings): copies heading link to clipboard

---
 .../autoLinkHeader/autoLinkHeader.css         | 12 +++++++
 .../autoLinkHeader/autoLinkHeader.js          | 36 +++++++++++++++----
 2 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css
index 58ee09e9bd..88fa89b8ed 100644
--- a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css
+++ b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css
@@ -7,8 +7,20 @@
   transform: translate(calc(-100% - var(--pf-t--global--spacer--xs)), -50%);
   opacity: 0;
   position: absolute;
+  display: flex;
   left: 0;
   top: 50%;
+  background: none;
+  border: none;
+  padding: 0;
+  tab-index: -1;
+}
+
+.ws-heading-anchor::before {
+  content: ''; 
+  position: absolute;
+  inset: 0;
+  margin: calc(var(--pf-t--global--spacer--sm) * -1);
 }
 
 .ws-heading-anchor-icon {
diff --git a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
index 3ed28a6df8..c75860b7f6 100644
--- a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
+++ b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
@@ -1,7 +1,6 @@
-import React from 'react';
-import { Flex, FlexItem, Content } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { Flex, FlexItem, Content, Tooltip, Button } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
-import { Link } from '../link/link';
 import { slugger } from '../../helpers/slugger';
 import { css } from '@patternfly/react-styles';
 
@@ -13,6 +12,19 @@ export const AutoLinkHeader = ({
   className
 }) => {
   const slug = id || slugger(children);
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const handleCopyUrl = (e) => {
+    e.preventDefault();
+    const url = `${window.location.origin}${window.location.pathname}#${slug}`;
+    navigator.clipboard.writeText(url).then(() => {
+      setShowTooltip(true);
+      setTimeout(() => setShowTooltip(false), 2000); // Hide tooltip after 2 seconds
+      console.log('URL copied to clipboard:', url);
+    }).catch(err => {
+      console.error('Failed to copy URL:', err);
+    });
+  };
 
   return (
     <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: "spaceItemsSm" }}>
@@ -24,9 +36,21 @@ export const AutoLinkHeader = ({
           tabIndex={-1}
           isEditorial
         >
-          <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
-            <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
-          </Link>
+          <Tooltip
+            content="Link copied to clipboard"
+            isVisible={showTooltip}
+            trigger="manual"
+          >
+            <button 
+              onClick={handleCopyUrl}
+              className="ws-heading-anchor" 
+              tabIndex="-1" 
+              aria-hidden
+              aria-label={`Copy link to ${children}`}
+            >
+              <LinkIcon className="ws-heading-anchor-icon" />
+            </button>
+          </Tooltip>
           {children}
         </Content>
       </FlexItem>

From 6e6dcf251ab4d9918eb3d8a4fe9de9c2deb3fb78 Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Mon, 29 Sep 2025 12:08:55 -0400
Subject: [PATCH 2/4] fix(headings): add tooltip to hover of the copy icon
 button

---
 .../components/autoLinkHeader/autoLinkHeader.js               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
index c75860b7f6..df6de699bc 100644
--- a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
+++ b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
@@ -37,9 +37,9 @@ export const AutoLinkHeader = ({
           isEditorial
         >
           <Tooltip
-            content="Link copied to clipboard"
+            content={showTooltip ? "Link copied to clipboard" : "Copy link"}
             isVisible={showTooltip}
-            trigger="manual"
+            trigger={showTooltip ? "manual" : "mouseenter focus"}
           >
             <button 
               onClick={handleCopyUrl}

From a04db55a8f9c7a27a538b985faacf5cd2edbfb67 Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Thu, 2 Oct 2025 14:56:22 -0400
Subject: [PATCH 3/4] fix(headings): prevent flash of original tooltip after
 copy

---
 .../components/autoLinkHeader/autoLinkHeader.js  | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
index df6de699bc..ef958aa080 100644
--- a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
+++ b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Flex, FlexItem, Content, Tooltip, Button } from '@patternfly/react-core';
+import { Flex, FlexItem, Content, Tooltip } from '@patternfly/react-core';
 import LinkIcon from '@patternfly/react-icons/dist/esm/icons/link-icon';
 import { slugger } from '../../helpers/slugger';
 import { css } from '@patternfly/react-styles';
@@ -12,17 +12,13 @@ export const AutoLinkHeader = ({
   className
 }) => {
   const slug = id || slugger(children);
-  const [showTooltip, setShowTooltip] = useState(false);
+  const [copied, setCopied] = useState(false);
 
   const handleCopyUrl = (e) => {
     e.preventDefault();
     const url = `${window.location.origin}${window.location.pathname}#${slug}`;
     navigator.clipboard.writeText(url).then(() => {
-      setShowTooltip(true);
-      setTimeout(() => setShowTooltip(false), 2000); // Hide tooltip after 2 seconds
-      console.log('URL copied to clipboard:', url);
-    }).catch(err => {
-      console.error('Failed to copy URL:', err);
+      setCopied(true);
     });
   };
 
@@ -37,9 +33,9 @@ export const AutoLinkHeader = ({
           isEditorial
         >
           <Tooltip
-            content={showTooltip ? "Link copied to clipboard" : "Copy link"}
-            isVisible={showTooltip}
-            trigger={showTooltip ? "manual" : "mouseenter focus"}
+            content={copied ? "Link copied" : "Copy link to clipboard"}
+            exitDelay={copied ? 1600 : 300}
+            onTooltipHidden={() => setCopied(false)}
           >
             <button 
               onClick={handleCopyUrl}

From 4075628a27c3ddca28f2d1bcdfc064fca90a29e0 Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Thu, 2 Oct 2025 15:04:06 -0400
Subject: [PATCH 4/4] fix(headings): match click size for copy button

---
 .../components/autoLinkHeader/autoLinkHeader.css                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css
index 88fa89b8ed..7098c2c72d 100644
--- a/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css
+++ b/packages/documentation-framework/components/autoLinkHeader/autoLinkHeader.css
@@ -20,7 +20,7 @@
   content: ''; 
   position: absolute;
   inset: 0;
-  margin: calc(var(--pf-t--global--spacer--sm) * -1);
+  margin: calc(var(--pf-t--global--spacer--xs) * -1);
 }
 
 .ws-heading-anchor-icon {