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

Update headingLink HTML for accessible permalinks #439

Merged
merged 5 commits into from
Jan 4, 2024
Merged

Update headingLink HTML for accessible permalinks #439

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e91893
Updated the headingLink HTML for the permalinks. This update fixes th…
jasnakai Jan 3, 2024
fa7ea4d
Removed unused headingText.
jasnakai Jan 3, 2024
28edefc
Merge branch 'main' into jn/permalinks
jasnakai Jan 4, 2024
098f403
Removed unused code. Also updagte the heading-link partial.
jasnakai Jan 4, 2024
fa2abff
Removing unused code.
jasnakai Jan 4, 2024
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
16 changes: 7 additions & 9 deletions _includes/heading-link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,10 @@
Add this partial within the heading you want to link.
Heading id must be the same as the slug passed to this partial.
{% endcomment %}
<span aria-hidden="true">
<a href="#{{ slug }}"
class="heading-permalink"
aria-label="permanent link to {{ slug }} heading">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#svg-link"></use>
</svg>
</a>
</span>
<a href="#{{ slug }}"
class="heading-permalink"
aria-label="Permalink for this section">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#svg-link"></use>
</svg>
</a>
32 changes: 2 additions & 30 deletions config/headingLinks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,6 @@
/* eslint no-restricted-syntax: 0 */
/** eslint doesn't like iterators/generators */
// From https://github.com/18F/handbook/blob/ddf9f29bce09d6c7ac1d0f2f33a99b75bc5c8223/config/headingLinks.js
//
// Given a Markdown node, recursively find all of the child text nodes and
// append them together. This will produce a similar result to the .innerText
// property of DOM elements.
const getText = (node) => {
const texts = [];

for (const child of node.children ?? []) {
if (child.type === 'text') {
texts.push(child.content);
} else {
texts.push(getText(child));
}
}

return texts.join('');
};

// https://www.npmjs.com/package/markdown-it-anchor#custom-permalink
//
Expand All @@ -26,13 +9,6 @@ const getText = (node) => {
// * state | a complete tree of the Markdown document as parsed by markdown-it
// * index | the index of the token in the state of the current heading
const headingLinks = (slug, _, state, index) => {
// Heading elements do not have children in Markdown. Instead, they have a
// sibling whose type is "inline." That inline element has children that
// represent the contents of the heading. The "inline" element always comes
// immediately after the heading element, so... we can just grab the next
// item in the list of tokens.
const headingContent = state.tokens[index + 1];
const headingText = getText(headingContent);

// We also need to find the index of the element that closes the header. We'll
// put our link stuff right before that.
Expand All @@ -46,18 +22,14 @@ const headingLinks = (slug, _, state, index) => {
const headingLink = {
type: 'html_block',
content: `
<span aria-hidden="true">
<a href="#${slug}"
class="heading-permalink"
aria-label="permanent link to ${headingText.replace(
/"/g,
'&quot;',
)} heading">
aria-label="Permalink for this section">
<svg class="usa-icon" aria-hidden="true" focusable="false" role="img">
<use xlink:href="#svg-link"></use>
</svg>
</a>
</span>
`,
};

Expand Down