diff --git a/tdoc/common/static/tdoc/load.js b/tdoc/common/static/tdoc/load.js index 82e364c..edba5f4 100644 --- a/tdoc/common/static/tdoc/load.js +++ b/tdoc/common/static/tdoc/load.js @@ -11,13 +11,14 @@ domLoaded.then(() => { } }); -// Handle admonition expansion. +// Handle admonition expansion. The button is needed to enable keyboard focus. domLoaded.then(() => { for (const el of document.querySelectorAll('.admonition.dropdown')) { const title = el.querySelector('.admonition-title') title.addEventListener('click', () => { el.classList.toggle('expand'); }); + // Enable keyboard navigation. const btn = title.appendChild(element('')); btn.addEventListener('click', (e) => { el.classList.toggle('expand'); diff --git a/tdoc/common/static/tdoc/styles.css.jinja b/tdoc/common/static/tdoc/styles.css.jinja index 035e2d6..21f8523 100644 --- a/tdoc/common/static/tdoc/styles.css.jinja +++ b/tdoc/common/static/tdoc/styles.css.jinja @@ -43,7 +43,7 @@ blockquote div > p:has(+ p.attribution) { } .admonition.dropdown .admonition-title button { position: absolute; - right: 0.6rem; + right: 0; outline: none; border: none; padding: 0; @@ -59,12 +59,14 @@ blockquote div > p:has(+ p.attribution) { margin-bottom: 0; } .admonition.dropdown:not(.expand) .admonition-title ~ * { + display: block; margin: 0; border: none; + padding: 0; height: 0; visibility: hidden; - opacity: 0; overflow: hidden; + opacity: 0; } /* Iframes */