From c944e056d030562c5067ad532903184a0a977819 Mon Sep 17 00:00:00 2001 From: John Hildenbiddle Date: Mon, 9 Oct 2023 09:20:39 -0500 Subject: [PATCH 01/12] Add aria attributes to sidebar toggle button --- src/core/event/index.js | 10 +++++++++- src/core/render/index.js | 19 ++++++++----------- src/core/render/tpl.js | 6 +++--- 3 files changed, 20 insertions(+), 15 deletions(-) diff --git a/src/core/event/index.js b/src/core/event/index.js index 516f1fb27..a84a39cdf 100644 --- a/src/core/event/index.js +++ b/src/core/event/index.js @@ -217,7 +217,15 @@ export function Events(Base) { * @void */ #btn(el) { - const toggle = _ => dom.body.classList.toggle('close'); + const toggle = _ => { + dom.body.classList.toggle('close'); + + const isClosed = isMobile + ? dom.body.classList.contains('close') + : !dom.body.classList.contains('close'); + + el.setAttribute('aria-expanded', isClosed); + }; el = dom.getNode(el); if (el === null || el === undefined) { diff --git a/src/core/render/index.js b/src/core/render/index.js index 2ee9755be..f9e78f919 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -251,29 +251,26 @@ export function Render(Base) { _renderSidebar(text) { const { maxLevel, subMaxLevel, loadSidebar, hideSidebar } = this.config; + const sidebarEl = dom.getNode('aside.sidebar'); + const sidebarToggleEl = dom.getNode('button.sidebar-toggle'); if (hideSidebar) { - // FIXME : better styling solution - [ - document.querySelector('aside.sidebar'), - document.querySelector('button.sidebar-toggle'), - ] - .filter(e => !!e) - .forEach(node => node.parentNode.removeChild(node)); - document.querySelector('section.content').style.right = 'unset'; - document.querySelector('section.content').style.left = 'unset'; - document.querySelector('section.content').style.position = 'relative'; - document.querySelector('section.content').style.width = '100%'; + sidebarEl?.parentNode?.removeChild(sidebarEl); + sidebarToggleEl?.parentNode?.removeChild(sidebarToggleEl); + return null; } this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel)); + sidebarToggleEl.setAttribute('aria-expanded', !isMobile); + const activeEl = this.__getAndActive( this.router, '.sidebar-nav', true, true ); + if (loadSidebar && activeEl) { activeEl.parentNode.innerHTML += this.compiler.subSidebar(subMaxLevel) || ''; diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js index 424ffe88f..7fa62a874 100644 --- a/src/core/render/tpl.js +++ b/src/core/render/tpl.js @@ -37,12 +37,12 @@ export function main(config) { const name = config.name ? config.name : ''; const aside = /* html */ ` - -