Skip to content
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.

Sign up for GitHub

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

[docs] Improve fragment links #18667

Closed
wants to merge 9 commits into from
+1,913 −1,906
Closed

[docs] Improve fragment links #18667

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
7c50803
Add proper label to fragment links
eps1lon Dec 3, 2019
8cb12d7
Always display fragment affordance
eps1lon Dec 3, 2019
725a5b7
Reduce fragment link bundle size impact
eps1lon Dec 3, 2019
deb4fcd
Refactor text vs escapedText naming
eps1lon Dec 3, 2019
329f885
Make props linkable
eps1lon Dec 3, 2019
1a8d087
Make css classnames linkable
eps1lon Dec 3, 2019
210c713
Improve a11y of fragment links
eps1lon Dec 4, 2019
c49a771
Display fragment links to the left
eps1lon Dec 4, 2019
f27b8fe
explain where prop/css fragment links go
eps1lon Dec 4, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Improve a11y of fragment links 
- alt in a image within a link should describe the link
- added title to explain purpose for visual browsers
@eps1lon
eps1lon committed Dec 4, 2019
commit 210c713fcc514ce45b88249f6b2a3934d0dd3636
4 changes: 2 additions & 2 deletions docs/src/modules/components/MarkdownElement.js
View file
Original file line number Diff line number Diff line change
@@ -32,8 +32,8 @@ renderer.heading = (text, level) => {
return [
`<h${level}>`,
`<a class="anchor-link" id="${fragmentId}"></a>${text}`,
`<a class="anchor-link-style" aria-label="${text}" href="#${fragmentId}">`,
'<svg><use xlink:href="#icons--fragment-link" /></svg>',
`<a class="anchor-link-style" title="link to this heading" href="#${fragmentId}">`,
`<svg alt="${text}"><use xlink:href="#icons--fragment-link" /></svg>`,
`</a>`,
`</h${level}>`,
].join('');