From 36a5b9cf50358a66ca136be2e882ff893cc0165d Mon Sep 17 00:00:00 2001 From: James Fenn Date: Sun, 21 Jan 2024 02:35:49 -0500 Subject: [PATCH 1/2] fix #868 - prevent "copy link" styling/behavior when a link is used inside a heading --- content/blog/example/index.md | 4 +++ .../base/scripts/heading-link-script.astro | 4 +++ .../base/scripts/heading-link.module.scss | 32 +++++++++++++++---- 3 files changed, 34 insertions(+), 6 deletions(-) diff --git a/content/blog/example/index.md b/content/blog/example/index.md index 1bd43477..21caa714 100644 --- a/content/blog/example/index.md +++ b/content/blog/example/index.md @@ -154,3 +154,7 @@ This is regular text. 2. Padded sub-item 2 3. List item 3 + +# Heading `with a code snippet` inside of it + +# Heading [with a link](https://example.com) inside of it diff --git a/src/views/base/scripts/heading-link-script.astro b/src/views/base/scripts/heading-link-script.astro index eb7d831b..ec537d98 100644 --- a/src/views/base/scripts/heading-link-script.astro +++ b/src/views/base/scripts/heading-link-script.astro @@ -31,6 +31,10 @@ import style from "./heading-link.module.scss"; ) as HTMLTemplateElement; function handleClick(e: Event) { + if ((e.target as HTMLElement).tagName === "A") { + return; + } + const target = e.currentTarget as HTMLElement; const headingAnchorEl = target.hasAttribute("data-heading-anchor") ? target diff --git a/src/views/base/scripts/heading-link.module.scss b/src/views/base/scripts/heading-link.module.scss index 1b7c7504..a37b7914 100644 --- a/src/views/base/scripts/heading-link.module.scss +++ b/src/views/base/scripts/heading-link.module.scss @@ -87,6 +87,17 @@ } } +// If the heading contains an which is hovered, +// click will follow the anchor href, so the "Copy link" +// button should not be displayed +@supports selector(:has(*)) { + :global(.heading-linked):has(a:hover, a:focus) { + .headingLink { + opacity: 0 !important; + } + } +} + .headingLinkContainer:focus-visible .headingLink { outline: var(--heading-link_outline-width) solid var(--heading-link_outline-color); } @@ -116,13 +127,17 @@ --heading_background_outline-width: var(--border-width_focus); } -:global(.heading-linked):hover, -:global(.heading-linked):focus-within, -:global(.heading-linked):has(.headingLinkContainer:hover) { - text-decoration: underline; -} - @supports selector(:has(*)) { + :global(.heading-linked):hover, + :global(.heading-linked):focus-within, + :global(.heading-linked):has(.headingLinkContainer:hover) { + // The underline should not be applied if an inner is focused + // as clicking will follow the link, not interact with the heading + &:not(:has(a:hover, a:focus)) { + text-decoration: underline; + } + } + :global(.heading-linked):has(.headingLinkContainer:focus-visible) { &> span { border-radius: calc(var(--heading_background_corner-radius) - var(--heading_background_padding)); @@ -133,6 +148,11 @@ } @supports not selector(:has(*)) { + :global(.heading-linked):hover, + :global(.heading-linked):focus-within { + text-decoration: underline; + } + :global(.heading-linked):focus-within { &> span { border-radius: calc(var(--heading_background_corner-radius) - var(--heading_background_padding)); From c9dd821a60a7825f4f8e200b62afa31b5fd09a07 Mon Sep 17 00:00:00 2001 From: James Fenn Date: Sun, 21 Jan 2024 10:39:22 -0500 Subject: [PATCH 2/2] use a:focus-visible instead of a:focus to fix confusing click behavior --- src/views/base/scripts/heading-link.module.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/base/scripts/heading-link.module.scss b/src/views/base/scripts/heading-link.module.scss index a37b7914..4df047d1 100644 --- a/src/views/base/scripts/heading-link.module.scss +++ b/src/views/base/scripts/heading-link.module.scss @@ -91,7 +91,7 @@ // click will follow the anchor href, so the "Copy link" // button should not be displayed @supports selector(:has(*)) { - :global(.heading-linked):has(a:hover, a:focus) { + :global(.heading-linked):has(a:hover, a:focus-visible) { .headingLink { opacity: 0 !important; } @@ -133,7 +133,7 @@ :global(.heading-linked):has(.headingLinkContainer:hover) { // The underline should not be applied if an inner is focused // as clicking will follow the link, not interact with the heading - &:not(:has(a:hover, a:focus)) { + &:not(:has(a:hover, a:focus-visible)) { text-decoration: underline; } }