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.
This PR Closes #638 and replaces acnhorjs in the TOC filter with an accessible vanila css/html solution.
Anchors are implemented by making the headers links themselves, rather than a separate link for the following reasons:
Reference implementation: https://codepen.io/johanjanssens/pen/PoWObpL
MDN uses this approach (without an anchor icon): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
Web Almanac (but with an anchor icon on desktop on hover/focus, but no anchor on mobile where there's less space): https://almanac.httparchive.org/en/2020/accessibility#ease-of-reading
Related discussion: valeriangalliat/markdown-it-anchor#82
Config options
The TOC filter offers the following config options:
anchor
: To turn the anchor link on or off, default `true``icon
: To set a different icon for; default#
(*)6
2
(*) Note that the icon accepts both a single character or anything else supported by the css
content
property. For more info see: https://developer.mozilla.org/en-US/docs/Web/CSS/content