Skip to content

Commit 4c574fe

Browse files
jhildenbiddlejhildenbiddle
committed
Merge branch 'develop' into 2278-keybindings
# Conflicts: # src/core/render/tpl.js
2 parents d63f519 + b8a5fea commit 4c574fe

File tree

8 files changed

+49
-31
lines changed

8 files changed

+49
-31
lines changed

‎src/core/event/index.js

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -299,14 +299,18 @@ export function Events(Base) {
299299
const topMargin = config().topMargin;
300300
// Use [id='1234'] instead of #id to handle special cases such as reserved characters and pure number id
301301
// https://stackoverflow.com/questions/37270787/uncaught-syntaxerror-failed-to-execute-queryselector-on-document
302-
const section = dom.find("[id='" + id + "']");
302+
const section = dom.find(`[id="${id}"]`);
303303
section && this.#scrollTo(section, topMargin);
304304

305-
const li = this.#nav[this.#getNavKey(path, id)];
306305
const sidebar = dom.getNode('.sidebar');
307-
const active = dom.find(sidebar, 'li.active');
308-
active && active.classList.remove('active');
309-
li && li.classList.add('active');
306+
const oldActive = dom.find(sidebar, 'li.active');
307+
const oldPage = dom.find(sidebar, `[aria-current]`);
308+
const newActive = this.#nav[this.#getNavKey(path, id)];
309+
const newPage = dom.find(sidebar, `[href$="${path}"]`)?.parentNode;
310+
oldActive?.classList.remove('active');
311+
oldPage?.removeAttribute('aria-current');
312+
newActive?.classList.add('active');
313+
newPage?.setAttribute('aria-current', 'page');
310314
}
311315

312316
#scrollEl = dom.$.scrollingElement || dom.$.documentElement;
@@ -324,7 +328,15 @@ export function Events(Base) {
324328
* @void
325329
*/
326330
#btn(el) {
327-
const toggle = _ => dom.body.classList.toggle('close');
331+
const toggle = _ => {
332+
dom.body.classList.toggle('close');
333+
334+
const isClosed = isMobile
335+
? dom.body.classList.contains('close')
336+
: !dom.body.classList.contains('close');
337+
338+
el.setAttribute('aria-expanded', isClosed);
339+
};
328340

329341
el = dom.getNode(el);
330342
if (el === null || el === undefined) {
@@ -409,8 +421,10 @@ export function Events(Base) {
409421
if (hash.indexOf(href) === 0 && !target) {
410422
target = a;
411423
dom.toggleClass(node, 'add', 'active');
424+
node.setAttribute('aria-current', 'page');
412425
} else {
413426
dom.toggleClass(node, 'remove', 'active');
427+
node.removeAttribute('aria-current');
414428
}
415429
});
416430

‎src/core/render/compiler/code.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ export const highlightCodeCompiler = ({ renderer }) =>
1111
lang
1212
);
1313

14-
return /* html */ `<pre v-pre data-lang="${lang}"><code class="lang-${lang}">${text}</code></pre>`;
14+
return /* html */ `<pre v-pre data-lang="${lang}"><code class="lang-${lang}" tabindex="0">${text}</code></pre>`;
1515
});

‎src/core/render/index.js

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -275,29 +275,27 @@ export function Render(Base) {
275275

276276
_renderSidebar(text) {
277277
const { maxLevel, subMaxLevel, loadSidebar, hideSidebar } = this.config;
278+
const sidebarEl = dom.getNode('aside.sidebar');
279+
const sidebarToggleEl = dom.getNode('button.sidebar-toggle');
278280

279281
if (hideSidebar) {
280-
// FIXME : better styling solution
281-
[
282-
document.querySelector('aside.sidebar'),
283-
document.querySelector('button.sidebar-toggle'),
284-
]
285-
.filter(e => !!e)
286-
.forEach(node => node.parentNode.removeChild(node));
287-
document.querySelector('section.content').style.right = 'unset';
288-
document.querySelector('section.content').style.left = 'unset';
289-
document.querySelector('section.content').style.position = 'relative';
290-
document.querySelector('section.content').style.width = '100%';
282+
dom.body.classList.add('hidesidebar');
283+
sidebarEl?.remove(sidebarEl);
284+
sidebarToggleEl?.remove(sidebarToggleEl);
285+
291286
return null;
292287
}
293288

294289
this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
290+
sidebarToggleEl.setAttribute('aria-expanded', !isMobile);
291+
295292
const activeEl = this.__getAndActive(
296293
this.router,
297294
'.sidebar-nav',
298295
true,
299296
true
300297
);
298+
301299
if (loadSidebar && activeEl) {
302300
activeEl.parentNode.innerHTML +=
303301
this.compiler.subSidebar(subMaxLevel) || '';

‎src/core/render/tpl.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,12 @@ export function main(config) {
3737
const name = config.name ? config.name : '';
3838

3939
const aside = /* html */ `
40-
<button class="sidebar-toggle" aria-label="Menu" title="Press \\ to toggle sidebar">
41-
<div class="sidebar-toggle-button">
40+
<button class="sidebar-toggle" title="Press \\ to toggle" aria-label="Toggle primary navigation" aria-controls="__sidebar">
41+
<div class="sidebar-toggle-button" aria-hidden="true">
4242
<span></span><span></span><span></span>
4343
</div>
4444
</button>
45-
<aside class="sidebar" role="none">
45+
<aside id="__sidebar" class="sidebar" role="none">
4646
${
4747
config.name
4848
? /* html */ `

‎src/plugins/search/component.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,7 @@ function style() {
129129
function tpl(defaultValue = '') {
130130
const html = /* html */ `
131131
<div class="input-wrap">
132-
<input type="search" value="${defaultValue}" aria-label="Search text" />
132+
<input type="search" value="${defaultValue}" />
133133
<div class="clear-button">
134134
<svg width="26" height="24">
135135
<circle cx="12" cy="12" r="11" fill="#ccc" />

‎src/themes/basic/_layout.styl

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -349,6 +349,11 @@ body.sticky
349349
left $sidebar-width
350350
transition left 250ms ease
351351

352+
body.hidesidebar &
353+
position relative
354+
left unset
355+
right unset
356+
352357
/* markdown content found on pages */
353358
.markdown-section
354359
margin 0 auto

‎src/themes/vue.styl

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ body
114114
.markdown-section code,
115115
.markdown-section pre
116116
background-color #f8f8f8
117+
z-index 0
117118

118119
.markdown-section pre,
119120
.markdown-section output
@@ -141,21 +142,24 @@ body
141142
font-size 0.8rem
142143

143144
.markdown-section pre
144-
padding 0 1.4rem
145145
line-height 1.5rem
146146
overflow auto
147147
word-wrap normal
148148

149149
.markdown-section pre > code
150150
color #525252
151151
font-size 0.8rem
152-
padding 2.2em 5px
152+
padding 2.2em 1.4rem
153153
line-height inherit
154-
margin 0 2px
154+
margin 5px
155155
max-width inherit
156156
overflow inherit
157157
white-space inherit
158158

159+
.markdown-section pre > code:focus
160+
// outline 5px auto Highlight;
161+
outline 5px auto -webkit-focus-ring-color;
162+
159163
.markdown-section output
160164
padding: 1.7rem 1.4rem
161165
border 1px dotted #ccc
@@ -172,6 +176,7 @@ body
172176

173177
.markdown-section pre::after,
174178
.markdown-section output::after
179+
content attr(data-lang)
175180
color #ccc
176181
font-size 0.6rem
177182
font-weight 600
@@ -183,10 +188,6 @@ body
183188
text-align right
184189
top 0
185190

186-
.markdown-section pre::after
187-
.markdown-section output::after
188-
content attr(data-lang)
189-
190191
/* code highlight */
191192
.token.comment, .token.prolog, .token.doctype, .token.cdata
192193
color #8e908c

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ exports[`Docs Site coverpage renders and is unchanged 1`] = `
1616
</section>"
1717
`;
1818
19-
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>"`;
19+
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>"`;
2020
2121
exports[`Docs Site sidebar renders and is unchanged 1`] = `
22-
"<aside class=\\"sidebar\\" role=\\"none\\">
22+
"<aside id=\\"__sidebar\\" class=\\"sidebar\\" role=\\"none\\">
2323
2424
<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>
2525
</aside>"

0 commit comments

Comments
 (0)