Make the heading anchor an interactive copy-URL button - #3303
Merged
Conversation
enf0rc3
force-pushed
the
wl/copy-heading-url
branch
from
August 5, 2026 21:11
48857f3 to
02a39c7
Compare
|
Pull request environment is available at https://stoctodocspr3303.z22.web.core.windows.net. You can view the ephemeral environment status in Octopus Deploy. This environment will be automatically deprovisioned when the pull request is closed, or after 7 days of inactivity. |
enf0rc3
force-pushed
the
wl/copy-heading-url
branch
from
August 5, 2026 22:15
02a39c7 to
1d74547
Compare
enf0rc3
changed the title
enf0rc3
force-pushed
the
wl/copy-heading-url
branch
from
August 5, 2026 22:51
1d74547 to
785f6aa
Compare
enf0rc3
changed the title
enf0rc3
force-pushed
the
wl/copy-heading-url
branch
from
August 5, 2026 23:13
785f6aa to
6097a28
Compare
enf0rc3
commented
Aug 5, 2026
| status.textContent = message; | ||
| } | ||
|
|
||
| function enhanceHeaders() { |
Contributor
Author
There was a problem hiding this comment.
Called by main.js after loading the page
enf0rc3
force-pushed
the
wl/copy-heading-url
branch
8 times, most recently
from
August 6, 2026 01:10
2bc2cb9 to
e795773
Compare
enf0rc3
commented
Aug 6, 2026
| - [Oldest content](/report/oldest-content/1) | ||
| - [Taxonomy](/report/taxonomy) | ||
|
|
||
| ## Headings \{#headings} |
Contributor
Author
There was a problem hiding this comment.
I didn't really like this so opted to remove it, we already have similar stuff on /components
NES-282. The button beside each heading was an anchor that jumped to the fragment. It now copies the heading URL, shows a tick and reverts after two seconds. enhanceHeaders still builds the buttons on load and now wires the behavior: addCopyButtons creates them, addCopyListener attaches one delegated click handler for the page. Scoped to .page-content headings with an id, so the feedback prompt and the navigation are left alone. Each heading also gets an aria-label of its own text: a heading is named from its contents, which include a nested control name, so without it every heading was announced with the button label on the end. The box and the hover, pressed and focus-ring states come from .btn.btn--xsmall, which was already the same 28px icon button. Both glyphs come from design-system-icons, and the tooltip matches the design system tooltip. Drops the heading samples from index.md - the button is interactive now, so a forced-visible copy is not needed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
enf0rc3
force-pushed
the
wl/copy-heading-url
branch
from
August 6, 2026 01:55
e795773 to
0e9a76e
Compare
enf0rc3
changed the title
borland
approved these changes
Aug 6, 2026
borland
left a comment
borland
left a comment
Contributor
There was a problem hiding this comment.
tested on the staging site, LGTM
Contributor
Author
|
Pushed trivial pixel-perfect placement of tooltip changes and re-tested. still centered. 
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
NES-282 · CopyHeadingUrl design
Add the copy-url-button to all headings in
.page-contentas per spec:Results
scripts/modules/headers.jsalready created these elements on load, so it keeps doing that and now wires the behaviour as well:Both glyphs come from
design-system-iconsand are byte-identical toLinkOnIcon.tsxandCheckIcon.tsx, on the0 0 40 40viewBox itsIconWrapperuses.Example:
Accessibility
Each heading gets an
aria-labelof its own text. A heading is named from its contents, and those contents include a nested control's accessible name, so every heading was otherwise announced with the button's label appended:That was true of the old anchor too, with
Link to this section, so this closes a pre-existing defect.Also
Removes the heading samples from
index.md. They existed to show the button in a forced-visible state, which is unnecessary now that it is interactive.🤖 Generated with Claude Code