diff --git a/docs/dokka-presets/css/aws-styles.css b/docs/dokka-presets/css/aws-styles.css index 7eb50784a..3781deece 100644 --- a/docs/dokka-presets/css/aws-styles.css +++ b/docs/dokka-presets/css/aws-styles.css @@ -56,6 +56,10 @@ overflow-wrap: break-word; } +.keyValue { + display: block; +} + /* Disable the playground run button for generated samples https://github.com/Kotlin/dokka/issues/3041 diff --git a/docs/dokka-presets/scripts/accessibility.js b/docs/dokka-presets/scripts/accessibility.js index 0e5daef5e..bbb1994fa 100644 --- a/docs/dokka-presets/scripts/accessibility.js +++ b/docs/dokka-presets/scripts/accessibility.js @@ -17,6 +17,11 @@ if (document.readyState === "interactive" || document.readyState === "complete" * Fixes accessibility violation: "Provide a mechanism for skipping past repetitive content" */ function applySkipLinks() { + document.querySelectorAll('#content').forEach(function(contentDiv) { + contentDiv.setAttribute('role', 'main'); + contentDiv.setAttribute('tabindex', '-1'); + }); + function insertSkipLink(element) { if (element.querySelectorAll(".skip-to-content").length > 0) { return } @@ -111,49 +116,9 @@ window.addEventListener('navigationLoaded', ensureNavButtonInteractable); * Fixes accessibility violation: "Ensure pages reflow without requiring two-dimensional scrolling without loss of content or functionality" */ function ensureContentReflow() { - const MIN_WINDOW_SIZE = 550 - - // Function to insert 'toggle content' button - function insertToggleContentButton(element) { - if (element.parentNode.querySelectorAll(".aws-toggle-content-btn").length > 0) { return } - - const initiallyVisible = window.innerWidth >= MIN_WINDOW_SIZE - - const toggleContent = document.createElement('button'); - toggleContent.className = 'aws-toggle-content-btn'; - toggleContent.textContent = initiallyVisible ? '▼' : '▶' - toggleContent.setAttribute('aria-expanded', initiallyVisible.toString()); - toggleContent.setAttribute('aria-label', 'Toggle code block for' + element.getAttribute("data-togglable")); - toggleContent.setAttribute('aria-controls', element.id); - - // Set initial visibility based on window size - element.style.display = initiallyVisible ? 'block' : 'none' - - // Toggle visibility onclick - toggleContent.onclick = function() { - const isExpanded = toggleContent.getAttribute('aria-expanded') === 'true'; - toggleContent.setAttribute('aria-expanded', (!isExpanded).toString()); - element.style.display = isExpanded ? 'none' : 'block' - toggleContent.textContent = isExpanded ? '▶' : '▼' - }; - - element.parentNode.insertBefore(toggleContent, element); - } - - document.querySelectorAll('.content[data-togglable]').forEach(insertToggleContentButton); - - // Update content visibility on resize - window.addEventListener('resize', function() { - document.querySelectorAll('.content[data-togglable]').forEach(function(element) { - const toggleContent = element.previousSibling; - if (window.innerWidth < MIN_WINDOW_SIZE) { - element.style.display = 'none'; - toggleContent.setAttribute('aria-expanded', 'false'); - } else { - element.style.display = 'block'; - toggleContent.setAttribute('aria-expanded', 'true'); - } - }); + // Ensure `content` sections are reflowable + document.querySelectorAll('.content[data-togglable]').forEach(function(content) { + content.style.display = 'block' }); } -window.addEventListener('navigationLoaded', ensureContentReflow); +window.addEventListener('navigationLoaded', ensureContentReflow); \ No newline at end of file diff --git a/docs/dokka-presets/templates/base.ftl b/docs/dokka-presets/templates/base.ftl index 68a5c6519..81bd1f098 100644 --- a/docs/dokka-presets/templates/base.ftl +++ b/docs/dokka-presets/templates/base.ftl @@ -33,6 +33,7 @@ <@header.display/>