diff --git a/src/core/render/index.js b/src/core/render/index.js index 2566a1920..ea0d985e0 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -416,6 +416,8 @@ export function Render(Base) { let navAppendToTarget = dom.body; if (el) { + navEl.setAttribute('aria-label', 'secondary'); + if (config.repo) { html += tpl.corner(config.repo, config.cornerExternalLinkTarget); } diff --git a/src/core/render/progressbar.js b/src/core/render/progressbar.js index 613de9285..29d0dfe79 100644 --- a/src/core/render/progressbar.js +++ b/src/core/render/progressbar.js @@ -10,6 +10,10 @@ function init() { const div = dom.create('div'); div.classList.add('progress'); + div.setAttribute('role', 'progressbar'); + div.setAttribute('aria-valuemin', '0'); + div.setAttribute('aria-valuemax', '100'); + div.setAttribute('aria-label', 'Loading...'); dom.appendTo(dom.body, div); barEl = div; } @@ -33,6 +37,7 @@ export default function (info) { barEl.style.opacity = 1; barEl.style.width = num >= 95 ? '100%' : num + '%'; + barEl.setAttribute('aria-valuenow', num >= 95 ? 100 : num); if (num >= 95) { clearTimeout(timeId); @@ -40,6 +45,7 @@ export default function (info) { timeId = setTimeout(_ => { barEl.style.opacity = 0; barEl.style.width = '0%'; + barEl.removeAttribute('aria-valuenow'); }, 200); } } diff --git a/src/core/render/tpl.js b/src/core/render/tpl.js index 424ffe88f..622d22a8a 100644 --- a/src/core/render/tpl.js +++ b/src/core/render/tpl.js @@ -42,7 +42,7 @@ export function main(config) { -
+
${ config.name ? /* html */ ` @@ -52,14 +52,14 @@ export function main(config) { ` : '' } -
+
`; return /* html */ ` -
${aside} +
${aside}
-
+
`; @@ -80,7 +80,7 @@ export function cover() { `; return /* html */ ` -
+
diff --git a/src/plugins/search/component.js b/src/plugins/search/component.js index 35a99115d..c3d7a678b 100644 --- a/src/plugins/search/component.js +++ b/src/plugins/search/component.js @@ -21,6 +21,11 @@ function style() { align-items: center; } +.search .results-status:not(:empty) { + margin-top: 10px; + font-size: smaller; +} + .search .results-panel { display: none; } @@ -122,12 +127,14 @@ function tpl(defaultValue = '') { +
`; const el = Docsify.dom.create('div', html); const aside = Docsify.dom.find('aside'); Docsify.dom.toggleClass(el, 'search'); + el.setAttribute('role', 'search'); Docsify.dom.before(aside, el); } @@ -136,12 +143,14 @@ function doSearch(value) { const $panel = Docsify.dom.find($search, '.results-panel'); const $clearBtn = Docsify.dom.find($search, '.clear-button'); const $sidebarNav = Docsify.dom.find('.sidebar-nav'); + const $status = Docsify.dom.find('div.search .results-status'); const $appName = Docsify.dom.find('.app-name'); if (!value) { $panel.classList.remove('show'); $clearBtn.classList.remove('show'); $panel.innerHTML = ''; + $status.textContent = ''; if (options.hideOtherSidebarContent) { $sidebarNav && $sidebarNav.classList.remove('hide'); @@ -151,12 +160,12 @@ function doSearch(value) { return; } - const matchs = search(value); + const matches = search(value); let html = ''; - matchs.forEach(post => { + matches.forEach((post, i) => { html += /* html */ ` -
+

${post.title}

${post.content}

@@ -168,6 +177,8 @@ function doSearch(value) { $panel.classList.add('show'); $clearBtn.classList.add('show'); $panel.innerHTML = html || /* html */ `

${NO_DATA_TEXT}

`; + $status.textContent = `Found ${matches.length} results`; + if (options.hideOtherSidebarContent) { $sidebarNav && $sidebarNav.classList.add('hide'); $appName && $appName.classList.add('hide'); diff --git a/test/integration/__snapshots__/docs.test.js.snap b/test/integration/__snapshots__/docs.test.js.snap index 2e620b9dd..06354402e 100644 --- a/test/integration/__snapshots__/docs.test.js.snap +++ b/test/integration/__snapshots__/docs.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Docs Site coverpage renders and is unchanged 1`] = ` -"
" `; -exports[`Docs Site navbar renders and is unchanged 1`] = `"
  • Translations
    • \\"uk\\" English
    • \\"cn\\" 简体中文
    • \\"de\\" Deutsch
    • \\"es\\" Español
    • \\"ru\\" Русский
"`; +exports[`Docs Site navbar renders and is unchanged 1`] = `"
  • Translations
    • \\"uk\\" English
    • \\"cn\\" 简体中文
    • \\"de\\" Deutsch
    • \\"es\\" Español
    • \\"ru\\" Русский
"`; exports[`Docs Site sidebar renders and is unchanged 1`] = ` -"
+"
-
  • Getting started

    • Quick start
    • Writing more pages
    • Custom navbar
    • Cover page
  • Customization

    • Configuration
    • Themes
    • List of Plugins
    • Write a Plugin
    • Markdown configuration
    • Language highlighting
    • Emoji
  • Guide

    • Deploy
    • Helpers
    • Vue compatibility
    • CDN
    • Offline Mode (PWA)
    • Embed Files
  • Awesome docsify

  • Changelog

+
  • Getting started

    • Quick start
    • Writing more pages
    • Custom navbar
    • Cover page
  • Customization

    • Configuration
    • Themes
    • List of Plugins
    • Write a Plugin
    • Markdown configuration
    • Language highlighting
    • Emoji
  • Guide

    • Deploy
    • Helpers
    • Vue compatibility
    • CDN
    • Offline Mode (PWA)
    • Embed Files
  • Awesome docsify

  • Changelog

" `;