From e7414e0a73a4498ed7197c077ca762c164342959 Mon Sep 17 00:00:00 2001 From: John Hildenbiddle Date: Wed, 29 Nov 2023 23:40:14 -0600 Subject: [PATCH 1/2] Feat: Add aria attributes to sidebar toggle button and current page link (#2254) --- src/core/event/index.js | 26 ++++++++++++++----- src/core/render/index.js | 20 +++++++------- src/core/render/tpl.js | 6 ++--- src/plugins/search/component.js | 2 +- src/themes/basic/_layout.styl | 5 ++++ .../__snapshots__/docs.test.js.snap | 4 +-- 6 files changed, 40 insertions(+), 23 deletions(-) diff --git a/src/core/event/index.js b/src/core/event/index.js index 7d5e3aac2..5525782e8 100644 --- a/src/core/event/index.js +++ b/src/core/event/index.js @@ -232,14 +232,18 @@ export function Events(Base) { const topMargin = config().topMargin; // Use [id='1234'] instead of #id to handle special cases such as reserved characters and pure number id // https://stackoverflow.com/questions/37270787/uncaught-syntaxerror-failed-to-execute-queryselector-on-document - const section = dom.find("[id='" + id + "']"); + const section = dom.find(`[id="${id}"]`); section && this.#scrollTo(section, topMargin); - const li = this.#nav[this.#getNavKey(path, id)]; const sidebar = dom.getNode('.sidebar'); - const active = dom.find(sidebar, 'li.active'); - active && active.classList.remove('active'); - li && li.classList.add('active'); + const oldActive = dom.find(sidebar, 'li.active'); + const oldPage = dom.find(sidebar, `[aria-current]`); + const newActive = this.#nav[this.#getNavKey(path, id)]; + const newPage = dom.find(sidebar, `[href$="${path}"]`)?.parentNode; + oldActive?.classList.remove('active'); + oldPage?.removeAttribute('aria-current'); + newActive?.classList.add('active'); + newPage?.setAttribute('aria-current', 'page'); } #scrollEl = dom.$.scrollingElement || dom.$.documentElement; @@ -257,7 +261,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) { @@ -342,8 +354,10 @@ export function Events(Base) { if (hash.indexOf(href) === 0 && !target) { target = a; dom.toggleClass(node, 'add', 'active'); + node.setAttribute('aria-current', 'page'); } else { dom.toggleClass(node, 'remove', 'active'); + node.removeAttribute('aria-current'); } }); diff --git a/src/core/render/index.js b/src/core/render/index.js index 53e029455..f4c71ee9c 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -275,29 +275,27 @@ 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%'; + dom.body.classList.add('hidesidebar'); + sidebarEl?.remove(sidebarEl); + sidebarToggleEl?.remove(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 3b8dd77b8..400eba75a 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 */ ` - -