Website accessibility tweaks
MODIFY
website/.eleventy.js
website/.eleventy.js
@@ -174,6 +174,7 @@ module.exports = function(eleventyConfig) {
{
useShortDoctype: true,
removeComments: true,
+ conservativeCollapse: true,
collapseWhitespace: true,
},
);

MODIFY
website/src/_includes/docs/cli-screenshots/init.md
website/src/_includes/docs/cli-screenshots/init.md
GitHub (<a href="https://github.com/romefrontend/rome">https://github.com/romefrontend/rome</a>) or our community
Discord (<a href="https://discord.gg/rome">https://discord.gg/rome</a>)
-</code><div class="expand">Click to Expand</div></pre>
+</code><div aria-hidden="true" class="expand">Click to Expand</div></pre>

MODIFY
website/src/_includes/layouts/base.liquid
website/src/_includes/layouts/base.liquid
<input type="text" id="docsearch" class="docsearch" placeholder="Search" />
</div>
+ <div class="sidebar-scroller">
<div class="site-navigation-container">
<nav aria-labelledby="site-navigation" class="menu site-navigation">
<h2 id="site-navigation" class="sr-only">Site Navigation</h2>
{{ content | toc | safe }}
</nav>
+ </div>
<div class="color-scheme-switch-container">
<div class="color-scheme-switch">

MODIFY
website/src/_includes/scripts/index.js
website/src/_includes/scripts/index.js
@@ -14,6 +14,8 @@ window.addEventListener(
if (isMobileSidebarVisible && !isMobile && isMobileSidebarVisible) {
toggleMobileSidebar();
}
+
+ toc.checkNavigationCollapse();
});
},
);
@@ -27,7 +29,7 @@ const tocList = document.querySelector(".toc");
const siteNavigation = document.querySelector(".site-navigation-container");
/** @type {HTMLElement}*/
-const tocContainer = document.querySelector(".toc-menu");
+const sidebarScroller = document.querySelector(".sidebar-scroller");
/** @type {Array<HTMLAnchorElement>}*/
const tocLinks = Array.from(document.querySelectorAll(".toc a"));
@@ -262,15 +264,16 @@ class TableOfContents {
// Make sure TOC link is visible
let linkTop =
- this.headingsCalculated[i].link.offsetTop - tocContainer.offsetTop;
+ this.headingsCalculated[i].link.offsetTop - sidebarScroller.offsetTop;
if (i === 0) {
linkTop = 0;
}
- const visibleStart = tocContainer.scrollTop;
- const visibleEnd = tocContainer.scrollTop + tocContainer.clientHeight;
+ const visibleStart = sidebarScroller.scrollTop;
+ const visibleEnd =
+ sidebarScroller.scrollTop + sidebarScroller.clientHeight;
const isVisible = linkTop > visibleStart && linkTop < visibleEnd;
if (!isVisible) {
- tocContainer.scrollTop = linkTop;
+ sidebarScroller.scrollTop = linkTop;
}
break;
@@ -286,6 +289,9 @@ class TableOfContents {
checkNavigationCollapse(hasActive) {
// Only collapse navigation if we scroll over 300px
let isCollapsed = hasActive && this.getScrollY() >= 500;
+ if (isMobile) {
+ isCollapsed = false;
+ }
if (isCollapsed && this.isNavCollapsed === isCollapsed) {
return;
}
@@ -298,7 +304,12 @@ class TableOfContents {
if (isCollapsed) {
siteNavigation.style.height = "0px";
+
+ if (sidebarScroller.scrollTop > this.navHeight) {
+ siteNavigation.style.display = "none";
+ }
} else {
+ siteNavigation.style.removeProperty("display");
siteNavigation.style.height = `${this.navHeight}px`;
}
}

MODIFY
website/src/styles/_prism.scss
website/src/styles/_prism.scss
@@ -58,7 +58,7 @@ pre[class*="language-"] {
.token.prolog,
.token.doctype,
.token.cdata {
- color: #5C6370;
+ color: #8b97ac;
}
.token.punctuation {

MODIFY
website/src/styles/_sidebar.scss
website/src/styles/_sidebar.scss
padding: $unit 0;
}
- .toc-menu {
- height: 100%;
+ .sidebar-scroller {
overflow: auto;
border-top: 1px solid var(--soft-border-color);
}
- .sidebar-top {
- background-color: var(--container-color);
- position: sticky;
- top: 0;
- z-index: 3;
- }
-
- .sidebar-bottom {
- position: sticky;
- bottom: 0;
+ .toc-menu {
+ height: 100%;
}
}
font-weight: bold;
border-bottom: 1px solid var(--soft-border-color);
- &:first-child {
- border-top: 1px solid var(--soft-border-color);
- }
-
- &:last-child {
- border-bottom: none;
- }
-
a {
height: auto;
padding: $unit / 5 $unit / 2;

Website accessibility tweaks (#938)