generated from freeCodeCamp/template
-
-
Notifications
You must be signed in to change notification settings - Fork 39
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Links that copy the table content headers #518
Comments
Speaking of things to copy, having the code elements copiable might help with improving the flow state on mobile devices. |
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}`,);
});
})
}); |
This issue was closed.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
::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.
The text was updated successfully, but these errors were encountered: