-
Notifications
You must be signed in to change notification settings - Fork 14
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #132 from w3c/feature/#469-heading-anchors
Feature/#469 heading anchors
- Loading branch information
Showing
50 changed files
with
1,901 additions
and
1,567 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /** | ||
| * Add anchor links to any H2 - H6 within the <main> element that: | ||
| * - are not children of a <nav> element | ||
| * - do not have an ancestor with the data-anchor="no" attribute, with | ||
| * the `hidden` attribute or with the .visuallyhidden class | ||
| * - do not themselves have the data-anchor="no" attribute, the `hidden` | ||
| * attribute or the .visuallyhidden class | ||
| * | ||
| * If a heading does not already possess an ID, use regular expressions on | ||
| * the textContent of the heading to generate a string that is valid to | ||
| * use for both the heading ID and the anchor href. Supports non-Latin | ||
| * scripts by matching any Unicode letter - \p{L} - or number - \p{N}. The | ||
| * u flag enables Unicode matching, to support characters from any script. | ||
| * | ||
| * Otherwise, generate the anchor using the existing heading ID value. | ||
| */ | ||
|
|
||
| import {translate} from './translations'; | ||
|
|
||
| let headingAnchors = function () { | ||
|
|
||
| let languageCode = document.documentElement.lang; | ||
|
|
||
| // Only add heading anchor links on "full" sites | ||
| if (languageCode === 'en' || languageCode === 'ja' || languageCode === 'zh-hans') { | ||
|
|
||
| let headingsArray= Array.from(document.querySelectorAll('main h2, main h3, main h4, main h5, main h6')); | ||
|
|
||
| if (headingsArray.length > 0) { | ||
|
|
||
| // Filter out headings that: | ||
| // - Are not children of <nav> | ||
| // - Do not have an ancestor with the data-anchor="no" attribute | ||
| // - Do not have an ancestor with the `hidden` attribute | ||
| // - Do not have an ancestor with the `.visuallyhidden` class | ||
| // - Do not themselves have the data-anchor="no" attribute | ||
| // - Do not themselves have the `hidden` attribute | ||
| // - Do not themselves have the `.visuallyhidden` class | ||
| let targetedHeadings = headingsArray.filter(function(heading) { | ||
| let insideNav = heading.closest('nav') !== null; | ||
| let parentHasDataAttribute = heading.closest('[data-anchor="no"]') !== null; | ||
| let hiddenParent = heading.closest('[hidden]') !== null; | ||
| let visuallyhiddenParent = heading.closest('.visuallyhidden') !== null; | ||
| let hasDataAttribute = heading.getAttribute('data-anchor') === 'no'; | ||
| let isHidden = heading.getAttribute('hidden'); | ||
| let isVisuallyhidden = heading.classList.contains('visuallyhidden'); | ||
|
|
||
| return !insideNav && !parentHasDataAttribute && !hiddenParent && !visuallyhiddenParent && !hasDataAttribute && !isHidden && !isVisuallyhidden; | ||
| }); | ||
|
|
||
| if (targetedHeadings.length > 0) { | ||
| targetedHeadings.forEach(function(heading) { | ||
|
|
||
| let anchor = document.createElement('a'); | ||
| let anchorHref; | ||
|
|
||
| // If the heading already has an ID, use this for constructing the anchor | ||
| if (heading.getAttribute('id')) { | ||
| anchorHref = heading.id; | ||
| } else { | ||
| // If the heading does not already have an ID, generate anchor href from the heading text. Steps are: | ||
| // - Remove leading/trailing spaces | ||
| // - Use RegEx to remove invalid characters but keep all Unicode letters/numbers | ||
| // - Use RegEx to replace spaces with hyphens | ||
| // - convert to lowercase as per URL policy | ||
| anchorHref = heading.textContent | ||
| .trim() | ||
| .replace(/[^\p{L}\p{N}\s-]/gu, '') | ||
| .replace(/\s+/g, '-') | ||
| .toLowerCase(); | ||
| heading.id = anchorHref; | ||
| } | ||
|
|
||
| anchor.setAttribute('href', '#' + anchorHref); | ||
| anchor.setAttribute('class', 'heading-anchor'); | ||
| anchor.innerHTML = '<span aria-hidden="true">§</span>' | ||
| +'<span class="visuallyhidden">' | ||
| + translate.translate('anchor', languageCode) + '</span>'; | ||
| heading.textContent += '\xa0'; | ||
| heading.appendChild(anchor); | ||
|
|
||
| }); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| } | ||
|
|
||
| } | ||
|
|
||
| export {headingAnchors}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
design-system-templates/components/card-link-multiple.html.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
design-system-templates/components/collapsible-containers.html.twig
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| <div class="people-list"> | ||
| <div class="people-list" data-anchor="no"> | ||
|
|
||
| <div class="l-sidebar card--user"> | ||
| <div> | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,19 @@ | ||
| <div class="l-box note note--info" role="status"> | ||
| <h2 class="txt-saturn">Informative note heading</h2> | ||
| <div class="l-box note note--info" role="status" aria-labelledby="unique-id-1" tabindex="-1" data-anchor="no"> | ||
| <h2 id="unique-id-1" class="txt-saturn">Informative note heading</h2> | ||
| <p>Group calendering is currently in beta-test. We encourage everyone to use it and report feedback and issues to its <a href="#1">dedicated GitHub repository</a>.</p> | ||
| </div> | ||
|
|
||
| <div class="l-box note note--success" role="status"> | ||
| <h2 class="txt-saturn">Success note heading</h2> | ||
| <div class="l-box note note--success" role="status" aria-labelledby="unique-id-2" tabindex="-1" data-anchor="no"> | ||
| <h2 id="unique-id-2" class="txt-saturn">Success note heading</h2> | ||
| <p>Main profile successfully updated.</p> | ||
| </div> | ||
|
|
||
| <div class="l-box note note--warning" role="status"> | ||
| <h2 class="txt-saturn">Warning note heading</h2> | ||
| <div class="l-box note note--warning" role="status" aria-labelledby="unique-id-3" tabindex="-1" data-anchor="no"> | ||
| <h2 id="unique-id-3" class="txt-saturn">Warning note heading</h2> | ||
| <p>We could not detect your affiliation based on your email address. Please select your affiliation below or <a href="#2">go back to use your corporate email address.</a></p> | ||
| </div> | ||
|
|
||
| <div class="l-box note note--error" role="alert"> | ||
| <h2 class="txt-saturn">Error note heading</h2> | ||
| <div class="l-box note note--error" role="alert" aria-labelledby="unique-id-4" tabindex="-1" data-anchor="no"> | ||
| <h2 id="unique-id-4" class="txt-saturn">Error note heading</h2> | ||
| <p>There has been an error.</p> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,2 @@ | ||
| <p>Copyright © 2023 W3C - generated {{ date|date("d M Y, H:i:s e") }}</p> | ||
| <p>Copyright © {{ date|date("Y") }} W3C - generated {{ date|date("d M Y, H:i:s e") }}</p> | ||
| <p>Feedback is welcome and can be submitted as a <a href="https://github.com/w3c/w3c-website/issues">GitHub issue</a>.</p> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| # Scripts | ||
|
|
||
| Documenting functionality that is added via scripts. | ||
|
|
||
| For sources that are external to the design system, there may be some customisations specifically required. |
Oops, something went wrong.