Links that copy the table content headers

[Sboonny]

Describe the feature

I may be misremembering, I have discussed this with @ahmadabdolsaheb a while back and talked about turning the heading into links, so it's easier for people to share sections of the articles.

The feature will be like this

• script that create a link in front of it

const headers = queryselectorAll('h1, h2, h3');
headers.forEach((header) => {
const Link = createELement('a')
const navigationHead = Link.href(${header.id})
const LinkStyle = Link.class('navigationHead srOnly')
const LinkText = Link.innerText('Click to copy Headers link')

header.append('Link')
header.addEventListener("click", () => {
clipboard(`${href}#${header.id}`,);
});
})

• ::after pseudo-class that cover the heading and doesn't harm screen readers.

Because the text is srOnly, we can use pseudo-classes like mentioned in this article to cover the heading with the link https://inclusive-components.design/cards/#thepseudocontenttrick

This trick used for the cards tho, but maybe it's okay to apply it here too, this will make the heading stay heading and link after it can cover, and for screen readers, they won't read the heading when focused over the link.

---

I have been thinking hard how to make the screen-reader text translatable in crowdin, but I can't. I just hope that browser translation is good enough for that.

[ahmaxed]

Speaking of things to copy, having the code elements copiable might help with improving the flow state on mobile devices.

[a2937]

Here's what I think the actual code should look like for this feature.

document.addEventListener('DOMContentLoaded', () => {
  const headers = document.querySelectorAll('h1, h2, h3');
  headers.forEach((header) => {
    const Link = document.createElement('a')
    Link.href = header.id;  //href(${ header.id })
    Link.classList.add("navigationHead", "srOnly");
    Link.innerText = "Click to copy Headers link"

    header.append(Link)
    header.addEventListener("click", () => {
      navigator.clipboard.writeText(`${window.location.href}#${header.id}`,);
    });
  })
});