Merge branch 'develop' into 2278-keybindings

# Conflicts:
#	src/core/render/tpl.js

src/core/event/index.js

@@ -299,14 +299,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;
@@ -324,7 +328,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) {
@@ -409,8 +421,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');
           }
         });
 

src/core/render/compiler/code.js

@@ -11,5 +11,5 @@ export const highlightCodeCompiler = ({ renderer }) =>
       lang
     );
 
-    return /* html */ `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${text}</code></pre>`;
+    return /* html */ `<pre v-pre data-lang="${lang}"><code class="lang-${lang}" tabindex="0">${text}</code></pre>`;
   });

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) || '';

src/core/render/tpl.js

@@ -37,12 +37,12 @@ export function main(config) {
   const name = config.name ? config.name : '';
 
   const aside = /* html */ `
-    <button class="sidebar-toggle" aria-label="Menu" title="Press \\ to toggle sidebar">
-      <div class="sidebar-toggle-button">
+    <button class="sidebar-toggle" title="Press \\ to toggle" aria-label="Toggle primary navigation" aria-controls="__sidebar">
+      <div class="sidebar-toggle-button" aria-hidden="true">
         <span></span><span></span><span></span>
       </div>
     </button>
-    <aside class="sidebar" role="none">
+    <aside id="__sidebar" class="sidebar" role="none">
       ${
         config.name
           ? /* html */ `

src/plugins/search/component.js

@@ -129,7 +129,7 @@ function style() {
 function tpl(defaultValue = '') {
   const html = /* html */ `
     <div class="input-wrap">
-      <input type="search" value="${defaultValue}" aria-label="Search text" />
+      <input type="search" value="${defaultValue}" />
       <div class="clear-button">
         <svg width="26" height="24">
           <circle cx="12" cy="12" r="11" fill="#ccc" />

src/themes/basic/_layout.styl

@@ -349,6 +349,11 @@ body.sticky
   left $sidebar-width
   transition left 250ms ease
 
+  body.hidesidebar &
+    position relative
+    left unset
+    right unset
+
 /* markdown content found on pages */
 .markdown-section
   margin 0 auto

src/themes/vue.styl

@@ -114,6 +114,7 @@ body
 .markdown-section code,
 .markdown-section pre
   background-color #f8f8f8
+  z-index 0
 
 .markdown-section pre,
 .markdown-section output
@@ -141,21 +142,24 @@ body
   font-size 0.8rem
 
 .markdown-section pre
-  padding 0 1.4rem
   line-height 1.5rem
   overflow auto
   word-wrap normal
 
 .markdown-section pre > code
   color #525252
   font-size 0.8rem
-  padding 2.2em 5px
+  padding 2.2em 1.4rem
   line-height inherit
-  margin 0 2px
+  margin 5px
   max-width inherit
   overflow inherit
   white-space inherit
 
+.markdown-section pre > code:focus
+  // outline 5px auto Highlight;
+  outline 5px auto -webkit-focus-ring-color;
+
 .markdown-section output
   padding: 1.7rem 1.4rem
   border 1px dotted #ccc
@@ -172,6 +176,7 @@ body
 
 .markdown-section pre::after,
 .markdown-section output::after
+  content attr(data-lang)
   color #ccc
   font-size 0.6rem
   font-weight 600
@@ -183,10 +188,6 @@ body
   text-align right
   top 0
 
-.markdown-section pre::after
-.markdown-section output::after
-  content attr(data-lang)
-
 /* code highlight */
 .token.comment, .token.prolog, .token.doctype, .token.cdata
   color #8e908c

test/integration/__snapshots__/docs.test.js.snap

@@ -16,10 +16,10 @@ exports[`Docs Site coverpage renders and is unchanged 1`] = `
     </section>"
 `;
 
-exports[`Docs Site navbar renders and is unchanged 1`] = `"<nav aria-label=\\"secondary\\" class=\\"app-nav no-badge\\"><ul><li>Translations<ul><li><a href=\\"#/\\" title=\\"undefined\\" class=\\"active\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1ec-1f1e7.png?v8.png\\" alt=\\"uk\\" class=\\"emoji\\" loading=\\"lazy\\"> English</a></li><li><a href=\\"#/zh-cn/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1e8-1f1f3.png?v8.png\\" alt=\\"cn\\" class=\\"emoji\\" loading=\\"lazy\\"> 简体中文</a></li><li><a href=\\"#/de-de/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1e9-1f1ea.png?v8.png\\" alt=\\"de\\" class=\\"emoji\\" loading=\\"lazy\\"> Deutsch</a></li><li><a href=\\"#/es/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1ea-1f1f8.png?v8.png\\" alt=\\"es\\" class=\\"emoji\\" loading=\\"lazy\\"> Español</a></li><li><a href=\\"#/ru-ru/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1f7-1f1fa.png?v8.png\\" alt=\\"ru\\" class=\\"emoji\\" loading=\\"lazy\\"> Русский</a></li></ul></li></ul></nav>"`;
+exports[`Docs Site navbar renders and is unchanged 1`] = `"<nav aria-label=\\"secondary\\" class=\\"app-nav no-badge\\"><ul><li>Translations<ul><li><a href=\\"#/\\" title=\\"undefined\\" class=\\"active\\" aria-current=\\"page\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1ec-1f1e7.png?v8.png\\" alt=\\"uk\\" class=\\"emoji\\" loading=\\"lazy\\"> English</a></li><li><a href=\\"#/zh-cn/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1e8-1f1f3.png?v8.png\\" alt=\\"cn\\" class=\\"emoji\\" loading=\\"lazy\\"> 简体中文</a></li><li><a href=\\"#/de-de/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1e9-1f1ea.png?v8.png\\" alt=\\"de\\" class=\\"emoji\\" loading=\\"lazy\\"> Deutsch</a></li><li><a href=\\"#/es/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1ea-1f1f8.png?v8.png\\" alt=\\"es\\" class=\\"emoji\\" loading=\\"lazy\\"> Español</a></li><li><a href=\\"#/ru-ru/\\" title=\\"undefined\\"><img src=\\"https://github.githubassets.com/images/icons/emoji/unicode/1f1f7-1f1fa.png?v8.png\\" alt=\\"ru\\" class=\\"emoji\\" loading=\\"lazy\\"> Русский</a></li></ul></li></ul></nav>"`;
 
 exports[`Docs Site sidebar renders and is unchanged 1`] = `
-"<aside class=\\"sidebar\\" role=\\"none\\">
+"<aside id=\\"__sidebar\\" class=\\"sidebar\\" role=\\"none\\">
       
       <div class=\\"sidebar-nav\\" role=\\"navigation\\" aria-label=\\"primary\\"><ul><li><p>Getting started</p><ul><li><a href=\\"#/quickstart\\" title=\\"undefined\\">Quick start</a></li><li><a href=\\"#/more-pages\\" title=\\"undefined\\">Writing more pages</a></li><li><a href=\\"#/custom-navbar\\" title=\\"undefined\\">Custom navbar</a></li><li><a href=\\"#/cover\\" title=\\"undefined\\">Cover page</a></li></ul></li><li><p>Customization</p><ul><li><a href=\\"#/configuration\\" title=\\"undefined\\">Configuration</a></li><li><a href=\\"#/themes\\" title=\\"undefined\\">Themes</a></li><li><a href=\\"#/plugins\\" title=\\"undefined\\">List of Plugins</a></li><li><a href=\\"#/write-a-plugin\\" title=\\"undefined\\">Write a Plugin</a></li><li><a href=\\"#/markdown\\" title=\\"undefined\\">Markdown configuration</a></li><li><a href=\\"#/language-highlight\\" title=\\"undefined\\">Language highlighting</a></li><li><a href=\\"#/emoji\\" title=\\"undefined\\">Emoji</a></li></ul></li><li><p>Guide</p><ul><li><a href=\\"#/deploy\\" title=\\"undefined\\">Deploy</a></li><li><a href=\\"#/helpers\\" title=\\"undefined\\">Helpers</a></li><li><a href=\\"#/vue\\" title=\\"undefined\\">Vue compatibility</a></li><li><a href=\\"#/cdn\\" title=\\"undefined\\">CDN</a></li><li><a href=\\"#/pwa\\" title=\\"undefined\\">Offline Mode (PWA)</a></li><li><a href=\\"#/embed-files\\" title=\\"undefined\\">Embed Files</a></li></ul></li><li><p><a href=\\"#/awesome\\" title=\\"undefined\\">Awesome docsify</a></p></li><li><p><a href=\\"#/changelog\\" title=\\"undefined\\">Changelog</a></p></li></ul></div>
     </aside>"