-
-
Notifications
You must be signed in to change notification settings - Fork 9.9k
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
Improve accessibility of the docs #9338
Merged
Merged
Changes from all commits
Commits
Show all changes
17 commits
Select commit
Hold shift + click to select a range
5c2257b
Refactored linkifyAnchors function
danielhaim1 eaef09c
Updated syntax for navigation menu
danielhaim1 fce0a97
Refactor navigation for docs on mobile
danielhaim1 7d1b51d
+ ARIA label to `.docs-nav-mobile`
danielhaim1 41841b3
Update anchor_links.html
danielhaim1 8a75c14
aria-current +
danielhaim1 d8a8d3e
en-US to en
danielhaim1 7cf33d7
lowercase HTML in doctype
danielhaim1 86dd50f
search ARIA
danielhaim1 7e6e017
scripts.html, defer
danielhaim1 f99d0d8
moved `navigateToUrl` to footer
danielhaim1 6947c5c
structured data schema for news articles
danielhaim1 ae27780
structured data schema for news articles
danielhaim1 3f604f8
structured data schema for news articles
danielhaim1 5a927fa
Updated Comment Style and Fixed Quotation Marks in news_item_archive.…
danielhaim1 892cc17
Update docs/_includes/anchor_links.html
danielhaim1 6e90011
Update docs/_includes/anchor_links.html
danielhaim1 File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,33 +1,33 @@ | ||
<script> | ||
var anchorForId = function (id) { | ||
var anchor = document.createElement("a"); | ||
anchor.className = "header-link"; | ||
anchor.href = "#" + id; | ||
anchor.innerHTML = "<span class=\"sr-only\">Permalink</span><i class=\"fa fa-link\"></i>"; | ||
anchor.title = "Permalink"; | ||
return anchor; | ||
}; | ||
/* Creates an anchor element with the given ID and link for the permalink*/ | ||
const anchorForId = (id) => { | ||
const anchor = document.createElement("a"); | ||
anchor.className = "header-link"; | ||
anchor.href = `#${id}`; | ||
anchor.innerHTML = `<span class="sr-only">Permalink</span><i class="fa fa-link" aria-hidden="true"></i>`; | ||
anchor.title = "Permalink"; | ||
return anchor; | ||
}; | ||
|
||
var linkifyAnchors = function (level, containingElement) { | ||
var headers = containingElement.getElementsByTagName("h" + level); | ||
for (var h = 0; h < headers.length; h++) { | ||
var header = headers[h]; | ||
|
||
if (typeof header.id !== "undefined" && header.id !== "") { | ||
header.appendChild(anchorForId(header.id)); | ||
} | ||
/* Finds all headers of the specified level within the given element, and adds a permalink to each header*/ | ||
const linkifyAnchors = (level, containingElement) => { | ||
const headers = Array.from(containingElement.getElementsByTagName(`h${level}`)); | ||
headers.forEach((header) => { | ||
if (header.id) { | ||
header.appendChild(anchorForId(header.id)); | ||
} | ||
}; | ||
}); | ||
}; | ||
|
||
document.onreadystatechange = function () { | ||
if (this.readyState === "complete") { | ||
var contentBlock = document.getElementsByClassName("docs")[0] || document.getElementsByClassName("news")[0]; | ||
if (!contentBlock) { | ||
return; | ||
} | ||
for (var level = 1; level <= 6; level++) { | ||
linkifyAnchors(level, contentBlock); | ||
} | ||
/* Executes the function when the document is ready */ | ||
document.onreadystatechange = () => { | ||
if (document.readyState === "complete") { | ||
const contentBlock = document.getElementsByClassName("docs")[0] | ||
?? document.getElementsByClassName("news")[0]; | ||
if (!contentBlock) { return; } | ||
for (let level = 1; level <= 6; level++) { | ||
linkifyAnchors(level, contentBlock); | ||
} | ||
}; | ||
} | ||
}; | ||
</script> |
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,15 +1,15 @@ | ||
<div class="docs-nav-mobile unit whole show-on-mobiles"> | ||
<select onchange="if (this.value) window.location.href=this.value"> | ||
<select id="doc-nav" onchange="navigateToUrl(this)" aria-label="Select a page from the documentation"> | ||
<option value="">Navigate the docs…</option> | ||
{% for section in site.data.docs_nav -%} | ||
<optgroup label="{{ section.title }}"> | ||
{%- for item in section.docs -%} | ||
{% assign p = site.docs | where: "url", item.link | first %} | ||
<option value="{{ p.url | relative_url }}"> | ||
{{- p.menu_name | default: p.title -}} | ||
</option> | ||
{%- endfor %} | ||
</optgroup> | ||
{% endfor -%} | ||
{% for section in site.data.docs_nav %} | ||
<optgroup label="{{ section.title }}"> | ||
{%- for item in section.docs -%} | ||
{% assign page = site.docs | where: "url", item.link | first %} | ||
<option value="{{ page.url | relative_url }}"> | ||
{{- page.menu_name | default: page.title -}} | ||
</option> | ||
{%- endfor %} | ||
</optgroup> | ||
{% endfor %} | ||
</select> | ||
</div> | ||
</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
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 +1 @@ | ||
<input type="text" id="docsearch-input" placeholder="Search the docs…"> | ||
<input type="text" id="docsearch-input" placeholder="Search the docs…" aria-label="Search"> |
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,9 +1,9 @@ | ||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" defer></script> | ||
<script> docsearch({ | ||
apiKey: '50fe39c839958dfad797000f33e2ec17', | ||
indexName: 'jekyllrb', | ||
inputSelector: '#docsearch-input', | ||
enhancedSearchInput: true, | ||
debug: false // Set debug to true if you want to inspect the dropdown | ||
debug: false | ||
}); | ||
</script> |
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,14 +1,14 @@ | ||
<div class="docs-nav-mobile unit whole show-on-mobiles"> | ||
<select onchange="if (this.value) window.location.href=this.value"> | ||
<select id="tutorial-nav" onchange="navigateToUrl(this)" aria-label="Select a tutorial"> | ||
<option value="">Navigate the tutorials…</option> | ||
{% for section in site.data.tutorials -%} | ||
<optgroup label="{{ section.title }}"> | ||
{% for item in section.tutorials -%} | ||
{% assign item_url = item | prepend:"/tutorials/" | append:"/" -%} | ||
{% assign tutorial = site.tutorials | where: "url", item_url | first -%} | ||
<option value="{{ tutorial.url | relative_url }}">{{ tutorial.title }}</option> | ||
{% endfor -%} | ||
</optgroup> | ||
<optgroup label="{{ section.title }}"> | ||
{% for item in section.tutorials -%} | ||
{% assign item_url = item | prepend:"/tutorials/" | append:"/" -%} | ||
{% assign tutorial = site.tutorials | where: "url", item_url | first -%} | ||
<option value="{{ tutorial.url | relative_url }}">{{ tutorial.title }}</option> | ||
{% endfor -%} | ||
</optgroup> | ||
{% endfor -%} | ||
</select> | ||
</div> | ||
</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
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm not following the reasoning for the re-indentation work in this PR. We've not indented the liquid in most pages because it's not present in the final site HTML, where as indenting it along with the HTML gives disjointed indentation in the final output.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hey @mattr-, I'm not sure either but I'm going to assume that the indentation was modified exclusively to improve readability in my editor. Given that this is a substantial pull affecting numerous files, I reckon we maintain it as is for now with the possibility of removing it later (?). What do you think?