+ Header 1
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vitae justo sed arcu posuere feugiat.
+ Header 2
+ Praesent commodo, sapien at aliquet posuere, neque erat feugiat mauris, vitae luctus orci lorem sed nulla.
+ `;
+ (elements.pageTransition || elements.pageSurface).append(view);
+ }
+
+ elements.accessibilityButton = launcher;
+ elements.mobileAccessibilityButton = mobileLauncher;
+ elements.accessibilityView = view;
+ elements.accessibilityBack = document.getElementById("accessibility-back");
+ elements.accessibilitySizeValue = document.getElementById("accessibility-size-value");
+ elements.accessibilitySizeDecrease = document.getElementById("accessibility-size-decrease");
+ elements.accessibilitySizeIncrease = document.getElementById("accessibility-size-increase");
+ elements.accessibilityReset = document.getElementById("accessibility-reset");
+ elements.accessibilityFontOptions = document.getElementById("accessibility-font-options");
+ }
+
+ function applyAccessibilityPreferences({ save = true } = {}) {
+ accessibilitySize = Math.min(28, Math.max(12, Number(accessibilitySize) || 16));
+ if (!accessibilityFonts.has(accessibilityFont)) accessibilityFont = "system-ui";
+ document.documentElement.style.setProperty("--accessibility-font-size", `${accessibilitySize}px`);
+ document.documentElement.style.setProperty("--accessibility-font-family", accessibilityFont);
+ if (elements.accessibilitySizeValue) elements.accessibilitySizeValue.value = String(accessibilitySize);
+ if (elements.accessibilitySizeDecrease) elements.accessibilitySizeDecrease.disabled = accessibilitySize <= 12;
+ if (elements.accessibilitySizeIncrease) elements.accessibilitySizeIncrease.disabled = accessibilitySize >= 28;
+ elements.accessibilityFontOptions?.querySelectorAll("[data-accessibility-font]").forEach((button) => {
+ button.setAttribute("aria-pressed", String(button.dataset.accessibilityFont === accessibilityFont));
+ });
+ if (!save) return;
+ try {
+ localStorage.setItem("docslib-accessibility-size", String(accessibilitySize));
+ localStorage.setItem("docslib-accessibility-font", accessibilityFont);
+ } catch (_) { /* preferences remain active for this page */ }
+ }
+
+ function loadAccessibilityPreferences() {
+ try {
+ accessibilitySize = Number(localStorage.getItem("docslib-accessibility-size")) || 16;
+ accessibilityFont = localStorage.getItem("docslib-accessibility-font") || "system-ui";
+ } catch (_) {
+ accessibilitySize = 16;
+ accessibilityFont = "system-ui";
+ }
+ applyAccessibilityPreferences({ save: false });
+ }
+
+ function setAccessibilityOpen(open, { restoreFocus = true } = {}) {
+ if (!elements.accessibilityView) return;
+ document.body.classList.toggle("accessibility-open", open);
+ elements.accessibilityView.hidden = !open;
+ elements.accessibilityButton?.setAttribute("aria-expanded", String(open));
+ elements.mobileAccessibilityButton?.setAttribute("aria-expanded", String(open));
+ if (open) {
+ closeSearch({ clear: true });
+ setMobileMode("content");
+ elements.pageSurface.scrollTo({ top: 0, behavior: "instant" });
+ requestAnimationFrame(() => elements.accessibilityBack?.focus());
+ } else if (restoreFocus) {
+ (mobileLayout.matches ? elements.mobileMenuButton : elements.accessibilityButton)?.focus();
+ }
+ }
+
function closeSearch({ clear = false } = {}) {
elements.desktopSearchShell.classList.remove("open");
if (clear) {
@@ -159,6 +295,7 @@
function navigate(number, replace = false) {
const hash = `#/page/${encodeURIComponent(number)}`;
if (mobileLayout.matches && mobileMode === "menu") skipNextPageAnimation = true;
+ if (document.body.classList.contains("accessibility-open")) setAccessibilityOpen(false, { restoreFocus: false });
closeSearch({ clear: true });
setMobileMode("content");
if (replace) {
@@ -711,12 +848,15 @@
async function start() {
applyTheme(localStorage.getItem("docslib-theme") || "dark");
+ loadAccessibilityPreferences();
renderAll();
announceRendered();
syncManifest();
if (config.livePreview) setInterval(pollLive, 1200);
}
+ ensureAccessibilityUi();
+
elements.desktopSearchInput.addEventListener("input", handleDesktopSearch);
elements.desktopSearchButton.addEventListener("click", () => elements.desktopSearchInput.focus());
elements.mobileSearchInput.addEventListener("input", handleMobileSearch);
@@ -733,6 +873,28 @@
} catch (_) { /* older compiled HTML may not include the sidebar toggle */ }
document.getElementById("theme-button").addEventListener("click", toggleTheme);
if (elements.mobileThemeButton) elements.mobileThemeButton.addEventListener("click", toggleTheme);
+ elements.accessibilityButton?.addEventListener("click", () => setAccessibilityOpen(true));
+ elements.mobileAccessibilityButton?.addEventListener("click", () => setAccessibilityOpen(true));
+ elements.accessibilityBack?.addEventListener("click", () => setAccessibilityOpen(false));
+ elements.accessibilitySizeDecrease?.addEventListener("click", () => {
+ accessibilitySize -= 2;
+ applyAccessibilityPreferences();
+ });
+ elements.accessibilitySizeIncrease?.addEventListener("click", () => {
+ accessibilitySize += 2;
+ applyAccessibilityPreferences();
+ });
+ elements.accessibilityReset?.addEventListener("click", () => {
+ accessibilitySize = 16;
+ accessibilityFont = "system-ui";
+ applyAccessibilityPreferences();
+ });
+ elements.accessibilityFontOptions?.addEventListener("click", (event) => {
+ const button = event.target.closest("[data-accessibility-font]");
+ if (!button || !elements.accessibilityFontOptions.contains(button)) return;
+ accessibilityFont = button.dataset.accessibilityFont;
+ applyAccessibilityPreferences();
+ });
elements.refresh.addEventListener("pointerenter", () => elements.toolbar.classList.add("refresh-expanded"));
elements.refresh.addEventListener("pointerleave", () => elements.toolbar.classList.remove("refresh-expanded"));
elements.refresh.addEventListener("focus", () => elements.toolbar.classList.add("refresh-expanded"));
@@ -750,7 +912,9 @@
event.preventDefault();
(mobileLayout.matches ? elements.mobileSearchInput : elements.desktopSearchInput).focus();
}
- if (event.key === "Escape") closeSearch({ clear: true });
+ if (event.key === "Escape" && document.body.classList.contains("accessibility-open")) {
+ setAccessibilityOpen(false);
+ } else if (event.key === "Escape") closeSearch({ clear: true });
});
mobileLayout.addEventListener?.("change", () => {
closeSearch({ clear: true });
diff --git a/tests/test_server.py b/tests/test_server.py
index 06386df..0ed5e8e 100644
--- a/tests/test_server.py
+++ b/tests/test_server.py
@@ -28,6 +28,26 @@ def test_loader_renders_indexeddb_before_background_sync():
assert "manifest = remote" not in client
+def test_accessibility_ui_is_generated_by_runtime_for_existing_html():
+ templates = Path(docslib.__file__).with_name("templates")
+ index = (templates / "index.html").read_text(encoding="utf-8")
+ client = (templates / "client.js").read_text(encoding="utf-8")
+ css = (templates / "client.css").read_text(encoding="utf-8")
+
+ assert 'id="accessibility-button"' not in index
+ assert 'id="mobile-accessibility-button"' not in index
+ assert 'id="accessibility-view"' not in index
+ assert "function ensureAccessibilityUi()" in client
+ assert 'createAccessibilityButton("accessibility-button"' in client
+ assert 'createAccessibilityButton("mobile-accessibility-button"' in client
+ assert "document.body.append(launcher)" in client
+ assert "elements.mobileTree.before(mobileActions)" in client
+ assert "(elements.pageTransition || elements.pageSurface).append(view)" in client
+ assert "--accessibility-font-family: system-ui" in css
+ assert "--accessibility-font-size: 16px" in css
+ assert "@font-face" not in css
+
+
def test_all_endpoints_and_self_contained_build(tmp_path):
assets = tmp_path / "assets"
assets.mkdir()
@@ -97,7 +117,7 @@ def test_all_endpoints_and_self_contained_build(tmp_path):
assert html_response.status_code == 200
assert "http://127.0.0.1:9000/manifest.json" in html
assert "http://127.0.0.1:9000/version" in html
- assert 'globalThis.COMPILED_FROM_VERSION = "0.4.5";' in html
+ assert 'globalThis.COMPILED_FROM_VERSION = "0.5.0";' in html
assert ".content { --custom-test: yes; }" in html
assert r'document.body.dataset.customTest = \"yes\";' in html
assert 'id="docslib-loading"' in html
@@ -156,7 +176,7 @@ def test_all_endpoints_and_self_contained_build(tmp_path):
assert "--elevated: #d4d4d4" in html
assert "--shadow: 0 24px 70px rgba(0, 0, 0, .4)" in html
assert "elements.pageSurface.scrollTo" in html
- assert "font-family: system-ui; font-size: 16px" in html
+ assert "font-family: var(--accessibility-font-family); font-size: 16px" in html
assert ".glyph-button, .refresh-glyph { font-family: Arial" in html
assert ".nav-arrow { display: block; width: 10px; height: 10px; flex: 0 0 10px; border: 0 solid currentColor; transform: rotate(45deg); }" in html
assert ".nav-arrow-previous { border-bottom-width: 2px; border-left-width: 2px; }" in html
@@ -197,11 +217,11 @@ def test_all_endpoints_and_self_contained_build(tmp_path):
assert '".".repeat(dots)' in manifest["client"]["js"]["system"]
assert "setTimeout(placeholderTick, 5000)" in html
assert '.sidebar-header-buttons .header-link:not(.active):first-child' not in html
- assert "border: 1px solid transparent" not in html
+ assert ".sidebar-header-buttons { border: 1px solid transparent" not in html
assert ".sidebar-header-buttons { display: flex; flex: 0 0 auto; flex-direction: column; gap: 4px; margin-bottom: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }" in html
assert ".desktop-sidebar > .page-tree { flex: 1; padding: 24px 2px 70px; mask-image: linear-gradient(transparent 0px, #000 24px, #000 calc(100% - 100px), transparent); scrollbar-width: none; }" in manifest["client"]["css"]["system"]
assert ".mobile-header-buttons { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface); }" in html
- assert ".mobile-theme-button { display: grid; width: 54px; height: 54px; margin: 0 0 32px; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--text); background: var(--surface); font-size: 1.35rem; }" in html
+ assert ".mobile-theme-button, .mobile-accessibility-button { display: grid; width: 54px; height: 54px; margin: 0; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--text); background: var(--surface); font-size: 1.35rem; }" in html
assert 'elements.mobileThemeButton.addEventListener("click", toggleTheme)' in system_js
assert 'if (mobileLayout.matches && mobileMode === "menu") skipNextPageAnimation = true' in system_js
assert "currentIndex >= 0 && !skipAnimation && !reducedMotion.matches" in system_js
@@ -227,8 +247,18 @@ def test_all_endpoints_and_self_contained_build(tmp_path):
assert "const transitionElement = elements.pageTransition || elements.content" in system_js
assert "if (elements.mobileThemeIcon) elements.mobileThemeIcon.textContent = icon" in system_js
assert "if (elements.mobileThemeButton) elements.mobileThemeButton.addEventListener" in system_js
+ assert "ensureAccessibilityUi();" in system_js
+ assert 'new Set(["system-ui", "sans-serif", "serif", "monospace"])' in system_js
+ assert 'localStorage.setItem("docslib-accessibility-size"' in system_js
+ assert 'localStorage.setItem("docslib-accessibility-font"' in system_js
+ assert 'document.documentElement.style.setProperty("--accessibility-font-size"' in system_js
+ assert 'document.documentElement.style.setProperty("--accessibility-font-family"' in system_js
+ assert 'body.accessibility-open .content, body.accessibility-open .page-navigation { display: none; }' in system_css
+ assert ".accessibility-button { position: fixed; z-index: 40;" in system_css
+ assert ".accessibility-preview { max-width: 920px; margin-top: 56px; font-size: var(--accessibility-font-size); }" in system_css
+ assert ".glyph-button, .refresh-glyph { font-family: Arial" in system_css
assert 'document.body.classList.toggle("desktop-sidebar-collapsed", !open)' in system_js
- assert "localStorage.setItem" not in system_js[system_js.index("function setDesktopSidebar"):system_js.index("function closeSearch")]
+ assert "localStorage.setItem" not in system_js[system_js.index("function setDesktopSidebar"):system_js.index("function createAccessibilityButton")]
assert "animation: mobile-menu-enter .26s" in html
assert "transform: translateX(-100%)" in html
assert "const direction = currentIndex >= 0 && index < currentIndex ? -1 : 1" in system_js
@@ -253,7 +283,7 @@ def test_all_endpoints_and_self_contained_build(tmp_path):
def test_build_writes_static_bundle(tmp_path):
- assert __version__ == "0.4.5"
+ assert __version__ == "0.5.0"
@Page("1", "Static page")
def static_page():