From 311f11f241403f2d068b7f5232480f729b7e7d24 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Thu, 5 Sep 2019 23:04:53 +0300 Subject: [PATCH 01/17] #1818 | Make Accessibility Elements in navbar --- .../theme-default/components/DropdownLink.vue | 6 ++++++ .../@vuepress/theme-default/components/NavLinks.vue | 12 +++++++++++- .../@vuepress/theme-default/components/Navbar.vue | 4 +++- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index 0d360830ee..f84b6d38d9 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -4,7 +4,9 @@ :class="{ open }" > <a + href="void:javascript" class="dropdown-title" + :aria-label="dropdownName" @click="toggle" > <span class="title">{{ item.text }}</span> @@ -65,6 +67,10 @@ export default { props: { item: { required: true + }, + dropdownName: { + default: '', + type: String } }, diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue index 3174b82c1c..cf9641a686 100644 --- a/packages/@vuepress/theme-default/components/NavLinks.vue +++ b/packages/@vuepress/theme-default/components/NavLinks.vue @@ -6,12 +6,14 @@ <!-- user links --> <div class="nav-item" - v-for="item in userLinks" + v-for="(item, index) in userLinks" + :tabindex="tabIndexStart + index" :key="item.link" > <DropdownLink v-if="item.type === 'links'" :item="item" + dropdownName="Select Dropdown" /> <NavLink v-else @@ -25,6 +27,7 @@ :href="repoLink" class="repo-link" target="_blank" + :tabindex="tabIndexStart + userLinks.length" rel="noopener noreferrer" > {{ repoLabel }} @@ -41,6 +44,13 @@ import NavLink from '@theme/components/NavLink.vue' export default { components: { NavLink, DropdownLink }, + props: { + tabIndexStart: { + default: 3, + type: Number + } + }, + computed: { userNav () { return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || [] diff --git a/packages/@vuepress/theme-default/components/Navbar.vue b/packages/@vuepress/theme-default/components/Navbar.vue index d4f562cf90..c86378f4dc 100644 --- a/packages/@vuepress/theme-default/components/Navbar.vue +++ b/packages/@vuepress/theme-default/components/Navbar.vue @@ -5,6 +5,7 @@ <router-link :to="$localePath" class="home-link" + tabindex="1" > <img class="logo" @@ -28,9 +29,10 @@ > <AlgoliaSearchBox v-if="isAlgoliaSearch" + tabindex="2" :options="algolia" /> - <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/> + <SearchBox tabindex="1" v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/> <NavLinks class="can-hide"/> </div> </header> From 44462b621cd8d569679a4c5954476d2ab3c81012 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Fri, 6 Sep 2019 00:03:23 +0300 Subject: [PATCH 02/17] fix: Change to dropdownlink test --- .../theme-default/__tests__/components/DropdownLink.spec.js | 2 +- .../components/__snapshots__/DropdownLink.spec.js.snap | 2 +- packages/@vuepress/theme-default/components/DropdownLink.vue | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js index e955194fc5..da78e50603 100644 --- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js +++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js @@ -22,7 +22,7 @@ describe('DropdownLink', () => { stubs: { 'router-link': RouterLinkStub }, - propsData: { item } + propsData: { item, dropdownName: 'Languages' } }) expect(wrapper.html()).toMatchSnapshot() }) diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap index 0b060a942e..152a9eb855 100644 --- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap +++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DropdownLink renders dropdown link. 1`] = ` -<div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a> +<div class="dropdown-wrapper"><a aria-label="Languages" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display: none;" name="dropdown"> <li class="dropdown-item"> <!----> <a class="nav-link">Guide</a></li> diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index f84b6d38d9..1b0c641b24 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -4,7 +4,6 @@ :class="{ open }" > <a - href="void:javascript" class="dropdown-title" :aria-label="dropdownName" @click="toggle" @@ -69,7 +68,7 @@ export default { required: true }, dropdownName: { - default: '', + default: 'Dropdown', type: String } }, From 3593b4b8497d9685744ec684740cc2f409b3e8a0 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Fri, 6 Sep 2019 00:03:23 +0300 Subject: [PATCH 03/17] fix: change to testing for dropdownlink component --- .../theme-default/__tests__/components/DropdownLink.spec.js | 2 +- .../components/__snapshots__/DropdownLink.spec.js.snap | 2 +- packages/@vuepress/theme-default/components/DropdownLink.vue | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js index e955194fc5..da78e50603 100644 --- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js +++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js @@ -22,7 +22,7 @@ describe('DropdownLink', () => { stubs: { 'router-link': RouterLinkStub }, - propsData: { item } + propsData: { item, dropdownName: 'Languages' } }) expect(wrapper.html()).toMatchSnapshot() }) diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap index 0b060a942e..152a9eb855 100644 --- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap +++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DropdownLink renders dropdown link. 1`] = ` -<div class="dropdown-wrapper"><a class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a> +<div class="dropdown-wrapper"><a aria-label="Languages" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display: none;" name="dropdown"> <li class="dropdown-item"> <!----> <a class="nav-link">Guide</a></li> diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index f84b6d38d9..1b0c641b24 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -4,7 +4,6 @@ :class="{ open }" > <a - href="void:javascript" class="dropdown-title" :aria-label="dropdownName" @click="toggle" @@ -69,7 +68,7 @@ export default { required: true }, dropdownName: { - default: '', + default: 'Dropdown', type: String } }, From 510be5b3b4639fff93aceb06a7df8bf92a96305a Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Sat, 7 Sep 2019 21:26:59 +0300 Subject: [PATCH 04/17] feat: addauto opened & focus dropdown menu when keypress tab --- .../theme-default/components/DropdownLink.vue | 11 +++++++++-- .../@vuepress/theme-default/components/NavLinks.vue | 3 ++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index 1b0c641b24..3401444eb2 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -7,6 +7,7 @@ class="dropdown-title" :aria-label="dropdownName" @click="toggle" + :tabindex="tabIndex" > <span class="title">{{ item.text }}</span> <span @@ -36,12 +37,13 @@ :key="childSubItem.link" v-for="childSubItem in subItem.items" > - <NavLink :item="childSubItem"/> + <NavLink :tabindex="tabIndex" :item="childSubItem"/> </li> </ul> <NavLink v-else + :tabindex="tabIndex" :item="subItem" /> </li> @@ -70,6 +72,10 @@ export default { dropdownName: { default: 'Dropdown', type: String + }, + tabIndex: { + default: 0, + type: Number } }, @@ -154,7 +160,8 @@ export default { @media (min-width: $MQMobile) .dropdown-wrapper height 1.8rem - &:hover .nav-dropdown + &:hover .nav-dropdown, + &:focus-within .nav-dropdown // override the inline style. display block !important .dropdown-title .arrow diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue index cf9641a686..0abd69b626 100644 --- a/packages/@vuepress/theme-default/components/NavLinks.vue +++ b/packages/@vuepress/theme-default/components/NavLinks.vue @@ -7,16 +7,17 @@ <div class="nav-item" v-for="(item, index) in userLinks" - :tabindex="tabIndexStart + index" :key="item.link" > <DropdownLink v-if="item.type === 'links'" :item="item" + :tab-index="tabIndexStart + index" dropdownName="Select Dropdown" /> <NavLink v-else + :tabindex="tabIndexStart + index" :item="item" /> </div> From 380911dd8da34ac76ed4bebab95a0da121f4f207 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Sat, 7 Sep 2019 21:37:37 +0300 Subject: [PATCH 05/17] fix: update test for dropdownLink --- .../theme-default/__tests__/components/DropdownLink.spec.js | 2 +- .../components/__snapshots__/DropdownLink.spec.js.snap | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js index da78e50603..c71cd0d802 100644 --- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js +++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js @@ -22,7 +22,7 @@ describe('DropdownLink', () => { stubs: { 'router-link': RouterLinkStub }, - propsData: { item, dropdownName: 'Languages' } + propsData: { item, dropdownName: 'Languages', tabIndex: 8 } }) expect(wrapper.html()).toMatchSnapshot() }) diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap index 152a9eb855..217950a687 100644 --- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap +++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap @@ -1,12 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DropdownLink renders dropdown link. 1`] = ` -<div class="dropdown-wrapper"><a aria-label="Languages" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a> +<div class="dropdown-wrapper"><a aria-label="Languages" tabindex="8" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display: none;" name="dropdown"> <li class="dropdown-item"> - <!----> <a class="nav-link">Guide</a></li> + <!----> <a class="nav-link" tabindex="8">Guide</a></li> <li class="dropdown-item"> - <!----> <a class="nav-link">Config Reference</a></li> + <!----> <a class="nav-link" tabindex="8">Config Reference</a></li> </ul> </div> `; From fd30a601e53e9d531290588f872ef305e5f82fd4 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Wed, 11 Sep 2019 01:17:01 +0300 Subject: [PATCH 06/17] edit tabindex to navlink & dropdownlink for not focusable --- .../theme-default/components/DropdownLink.vue | 18 +++++++++--------- .../theme-default/components/NavLink.vue | 6 ++++++ .../theme-default/components/NavLinks.vue | 12 +----------- .../theme-default/components/Navbar.vue | 4 +--- 4 files changed, 17 insertions(+), 23 deletions(-) diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index 3401444eb2..c5696c1180 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -3,18 +3,18 @@ class="dropdown-wrapper" :class="{ open }" > - <a + <button class="dropdown-title" :aria-label="dropdownName" + :tabindex="!!item.notFocusable ? -1 : ''" @click="toggle" - :tabindex="tabIndex" > <span class="title">{{ item.text }}</span> <span class="arrow" :class="open ? 'down' : 'right'" ></span> - </a> + </button> <DropdownTransition> <ul @@ -37,13 +37,12 @@ :key="childSubItem.link" v-for="childSubItem in subItem.items" > - <NavLink :tabindex="tabIndex" :item="childSubItem"/> + <NavLink :item="childSubItem"/> </li> </ul> <NavLink v-else - :tabindex="tabIndex" :item="subItem" /> </li> @@ -72,10 +71,6 @@ export default { dropdownName: { default: 'Dropdown', type: String - }, - tabIndex: { - default: 0, - type: Number } }, @@ -92,6 +87,11 @@ export default { cursor pointer .dropdown-title display block + font-size 0.9rem + background transparent + border none + font-weight 500 + color $textColor &:hover border-color transparent .arrow diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue index 452a1c6dc8..25e078ec7d 100644 --- a/packages/@vuepress/theme-default/components/NavLink.vue +++ b/packages/@vuepress/theme-default/components/NavLink.vue @@ -4,11 +4,13 @@ :to="link" v-if="!isExternal(link)" :exact="exact" + :tabindex="isNotFocusableLink ? -1 : ''" >{{ item.text }}</router-link> <a v-else :href="link" class="nav-link external" + :tabindex="isNotFocusableLink ? -1 : ''" :target="isMailto(link) || isTel(link) ? null : '_blank'" :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'" > @@ -32,6 +34,10 @@ export default { return ensureExt(this.item.link) }, + isNotFocusableLink () { + return !!this.item.notFocusable + }, + exact () { if (this.$site.locales) { return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link) diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue index 0abd69b626..e7d0f0ed63 100644 --- a/packages/@vuepress/theme-default/components/NavLinks.vue +++ b/packages/@vuepress/theme-default/components/NavLinks.vue @@ -6,18 +6,16 @@ <!-- user links --> <div class="nav-item" - v-for="(item, index) in userLinks" + v-for="item in userLinks" :key="item.link" > <DropdownLink v-if="item.type === 'links'" :item="item" - :tab-index="tabIndexStart + index" dropdownName="Select Dropdown" /> <NavLink v-else - :tabindex="tabIndexStart + index" :item="item" /> </div> @@ -28,7 +26,6 @@ :href="repoLink" class="repo-link" target="_blank" - :tabindex="tabIndexStart + userLinks.length" rel="noopener noreferrer" > {{ repoLabel }} @@ -45,13 +42,6 @@ import NavLink from '@theme/components/NavLink.vue' export default { components: { NavLink, DropdownLink }, - props: { - tabIndexStart: { - default: 3, - type: Number - } - }, - computed: { userNav () { return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || [] diff --git a/packages/@vuepress/theme-default/components/Navbar.vue b/packages/@vuepress/theme-default/components/Navbar.vue index c86378f4dc..d4f562cf90 100644 --- a/packages/@vuepress/theme-default/components/Navbar.vue +++ b/packages/@vuepress/theme-default/components/Navbar.vue @@ -5,7 +5,6 @@ <router-link :to="$localePath" class="home-link" - tabindex="1" > <img class="logo" @@ -29,10 +28,9 @@ > <AlgoliaSearchBox v-if="isAlgoliaSearch" - tabindex="2" :options="algolia" /> - <SearchBox tabindex="1" v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/> + <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/> <NavLinks class="can-hide"/> </div> </header> From 8bd733f426e68aa80c5e23549da12b96707f2bb3 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Wed, 11 Sep 2019 01:29:04 +0300 Subject: [PATCH 07/17] Update docs for notFocusable props --- packages/docs/docs/theme/default-theme-config.md | 3 ++- packages/docs/docs/zh/theme/default-theme-config.md | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index 7da053b361..dfed680e1a 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -48,7 +48,8 @@ module.exports = { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/' }, - { text: 'External', link: 'https://google.com' }, + { text: 'Theme', link: '/theme/', notFocusable: true }, // for remove focus a link + { text: 'External', link: 'https://google.com' } ] } } diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md index 843079e01d..5e8d797419 100644 --- a/packages/docs/docs/zh/theme/default-theme-config.md +++ b/packages/docs/docs/zh/theme/default-theme-config.md @@ -44,6 +44,7 @@ module.exports = { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/' }, + { text: 'Theme', link: '/theme/', notFocusable: true }, { text: 'External', link: 'https://google.com' }, ] } From 1b38f36dc6613bd7fe5e1eac7d628ffd99754002 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Wed, 11 Sep 2019 01:45:18 +0300 Subject: [PATCH 08/17] Update dropdownlink test --- .../theme-default/__tests__/components/DropdownLink.spec.js | 5 +++-- .../components/__snapshots__/DropdownLink.spec.js.snap | 6 +++--- .../@vuepress/theme-default/components/DropdownLink.vue | 3 ++- packages/@vuepress/theme-default/components/NavLink.vue | 4 ++-- 4 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js index c71cd0d802..0095f282e0 100644 --- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js +++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js @@ -13,7 +13,8 @@ describe('DropdownLink', () => { }, { text: 'Config Reference', - link: '/config/' + link: '/config/', + notFocusable: true } ] } @@ -22,7 +23,7 @@ describe('DropdownLink', () => { stubs: { 'router-link': RouterLinkStub }, - propsData: { item, dropdownName: 'Languages', tabIndex: 8 } + propsData: { item, dropdownName: 'Languages' } }) expect(wrapper.html()).toMatchSnapshot() }) diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap index 217950a687..0effb1c4f2 100644 --- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap +++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap @@ -1,12 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DropdownLink renders dropdown link. 1`] = ` -<div class="dropdown-wrapper"><a aria-label="Languages" tabindex="8" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></a> +<div class="dropdown-wrapper"><button type="button" aria-label="Languages" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display: none;" name="dropdown"> <li class="dropdown-item"> - <!----> <a class="nav-link" tabindex="8">Guide</a></li> + <!----> <a class="nav-link">Guide</a></li> <li class="dropdown-item"> - <!----> <a class="nav-link" tabindex="8">Config Reference</a></li> + <!----> <a tabindex="-1" class="nav-link">Config Reference</a></li> </ul> </div> `; diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index c5696c1180..10da807fb5 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -5,8 +5,9 @@ > <button class="dropdown-title" + type="button" :aria-label="dropdownName" - :tabindex="!!item.notFocusable ? -1 : ''" + :tabindex="!!item.notFocusable ? -1 : null" @click="toggle" > <span class="title">{{ item.text }}</span> diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue index 25e078ec7d..804905fd0b 100644 --- a/packages/@vuepress/theme-default/components/NavLink.vue +++ b/packages/@vuepress/theme-default/components/NavLink.vue @@ -4,13 +4,13 @@ :to="link" v-if="!isExternal(link)" :exact="exact" - :tabindex="isNotFocusableLink ? -1 : ''" + :tabindex="isNotFocusableLink ? -1 : null" >{{ item.text }}</router-link> <a v-else :href="link" class="nav-link external" - :tabindex="isNotFocusableLink ? -1 : ''" + :tabindex="isNotFocusableLink ? -1 : null" :target="isMailto(link) || isTel(link) ? null : '_blank'" :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'" > From a5a66f1fb9a0f3f09b4940cc2a44fc42b876b52c Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Thu, 12 Sep 2019 18:29:16 +0300 Subject: [PATCH 09/17] Add keypress method in navlink and remove tabindex --- .../__tests__/components/DropdownLink.spec.js | 3 +- .../__snapshots__/DropdownLink.spec.js.snap | 2 +- .../theme-default/components/DropdownLink.vue | 30 ++++++++++++++++--- .../theme-default/components/NavLink.vue | 13 ++++---- .../docs/docs/theme/default-theme-config.md | 1 - .../docs/zh/theme/default-theme-config.md | 1 - 6 files changed, 34 insertions(+), 16 deletions(-) diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js index 0095f282e0..da78e50603 100644 --- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js +++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js @@ -13,8 +13,7 @@ describe('DropdownLink', () => { }, { text: 'Config Reference', - link: '/config/', - notFocusable: true + link: '/config/' } ] } diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap index 0effb1c4f2..a4c678776f 100644 --- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap +++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap @@ -6,7 +6,7 @@ exports[`DropdownLink renders dropdown link. 1`] = ` <li class="dropdown-item"> <!----> <a class="nav-link">Guide</a></li> <li class="dropdown-item"> - <!----> <a tabindex="-1" class="nav-link">Config Reference</a></li> + <!----> <a class="nav-link">Config Reference</a></li> </ul> </div> `; diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index 10da807fb5..53dc6e03c1 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -7,7 +7,6 @@ class="dropdown-title" type="button" :aria-label="dropdownName" - :tabindex="!!item.notFocusable ? -1 : null" @click="toggle" > <span class="title">{{ item.text }}</span> @@ -36,14 +35,17 @@ <li class="dropdown-subitem" :key="childSubItem.link" - v-for="childSubItem in subItem.items" + v-for="(childSubItem, subIndex) in subItem.items" > - <NavLink :item="childSubItem"/> + <NavLink + @keypressTab="focusoutDropdown((index + 2) * (subIndex + 1))" + :item="childSubItem"/> </li> </ul> <NavLink v-else + @keypressTab="focusoutDropdown(index + 1)" :item="subItem" /> </li> @@ -75,9 +77,27 @@ export default { } }, + computed: { + AllItemsCount () { + return this.item.items.reduce((totalCount, item) => { + return item.items ? totalCount + item.items.length : totalCount + 1 + }, 0) + } + }, + methods: { toggle () { this.open = !this.open + }, + + focusoutDropdown (index) { + if (this.AllItemsCount === index) this.open = false + } + }, + + watch: { + $route () { + this.open = false } } } @@ -162,9 +182,11 @@ export default { .dropdown-wrapper height 1.8rem &:hover .nav-dropdown, - &:focus-within .nav-dropdown + &.open .nav-dropdown // override the inline style. display block !important + &.open:blur + display none .dropdown-title .arrow // make the arrow always down at desktop border-left 4px solid transparent diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue index 804905fd0b..29879ca655 100644 --- a/packages/@vuepress/theme-default/components/NavLink.vue +++ b/packages/@vuepress/theme-default/components/NavLink.vue @@ -2,15 +2,15 @@ <router-link class="nav-link" :to="link" + @keyup.tab.native="keypressTab" v-if="!isExternal(link)" :exact="exact" - :tabindex="isNotFocusableLink ? -1 : null" >{{ item.text }}</router-link> <a v-else :href="link" + @keyup.tab.prevent="keypressTab" class="nav-link external" - :tabindex="isNotFocusableLink ? -1 : null" :target="isMailto(link) || isTel(link) ? null : '_blank'" :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'" > @@ -34,10 +34,6 @@ export default { return ensureExt(this.item.link) }, - isNotFocusableLink () { - return !!this.item.notFocusable - }, - exact () { if (this.$site.locales) { return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link) @@ -49,7 +45,10 @@ export default { methods: { isExternal, isMailto, - isTel + isTel, + keypressTab () { + this.$emit('keypressTab') + } } } </script> diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index dfed680e1a..0d912c15b8 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -48,7 +48,6 @@ module.exports = { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/' }, - { text: 'Theme', link: '/theme/', notFocusable: true }, // for remove focus a link { text: 'External', link: 'https://google.com' } ] } diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md index 5e8d797419..843079e01d 100644 --- a/packages/docs/docs/zh/theme/default-theme-config.md +++ b/packages/docs/docs/zh/theme/default-theme-config.md @@ -44,7 +44,6 @@ module.exports = { nav: [ { text: 'Home', link: '/' }, { text: 'Guide', link: '/guide/' }, - { text: 'Theme', link: '/theme/', notFocusable: true }, { text: 'External', link: 'https://google.com' }, ] } From 0a2778910a5c6897f16ad9d3909885ab38fa223b Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Sun, 15 Sep 2019 10:48:35 +0300 Subject: [PATCH 10/17] Rename navlink & dropdown action / computed and bugfix for find last item index --- .../theme-default/components/DropdownLink.vue | 17 ++++++++++++----- .../theme-default/components/NavLink.vue | 8 ++++---- 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index 53dc6e03c1..4dd3e9dbb6 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -38,14 +38,14 @@ v-for="(childSubItem, subIndex) in subItem.items" > <NavLink - @keypressTab="focusoutDropdown((index + 2) * (subIndex + 1))" + @focusout-navlink="focusoutNavLink(getSubItemIndex(index, subIndex))" :item="childSubItem"/> </li> </ul> <NavLink v-else - @keypressTab="focusoutDropdown(index + 1)" + @focusout-navlink="focusoutNavLink(index + 1)" :item="subItem" /> </li> @@ -78,7 +78,7 @@ export default { }, computed: { - AllItemsCount () { + allItemsCount () { return this.item.items.reduce((totalCount, item) => { return item.items ? totalCount + item.items.length : totalCount + 1 }, 0) @@ -90,8 +90,15 @@ export default { this.open = !this.open }, - focusoutDropdown (index) { - if (this.AllItemsCount === index) this.open = false + getSubItemIndex (index, subIndex) { + const items = [...this.item.items].splice(0, index) // find up to selected item + return items.reduce((totalCount, item) => { + return item.items ? totalCount + item.items.length : totalCount + }, 0) + subIndex + 1 + }, + + focusoutNavLink (index) { + if (this.allItemsCount === index) this.open = false } }, diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue index 29879ca655..2ac6ccc591 100644 --- a/packages/@vuepress/theme-default/components/NavLink.vue +++ b/packages/@vuepress/theme-default/components/NavLink.vue @@ -2,14 +2,14 @@ <router-link class="nav-link" :to="link" - @keyup.tab.native="keypressTab" + @focusout.native="focusoutAction" v-if="!isExternal(link)" :exact="exact" >{{ item.text }}</router-link> <a v-else :href="link" - @keyup.tab.prevent="keypressTab" + @focusout="focusoutAction" class="nav-link external" :target="isMailto(link) || isTel(link) ? null : '_blank'" :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'" @@ -46,8 +46,8 @@ export default { isExternal, isMailto, isTel, - keypressTab () { - this.$emit('keypressTab') + focusoutAction () { + this.$emit('focusout-navlink') } } } From 96b1287ca0dc6d0fec3b1a4cb9a54de381e24fd0 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Sun, 15 Sep 2019 11:39:03 +0300 Subject: [PATCH 11/17] Make ariaLabel config for dropdown --- .../__tests__/components/DropdownLink.spec.js | 5 +++-- .../components/__snapshots__/DropdownLink.spec.js.snap | 2 +- .../theme-default/components/DropdownLink.vue | 10 +++++----- .../@vuepress/theme-default/components/NavLinks.vue | 2 +- packages/docs/docs/.vuepress/config.js | 2 ++ packages/docs/docs/.vuepress/nav/en.js | 1 + packages/docs/docs/.vuepress/nav/zh.js | 1 + packages/docs/docs/guide/i18n.md | 4 +++- 8 files changed, 17 insertions(+), 10 deletions(-) diff --git a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js index da78e50603..0fe661b830 100644 --- a/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js +++ b/packages/@vuepress/theme-default/__tests__/components/DropdownLink.spec.js @@ -5,7 +5,8 @@ import { createLocalVue } from '@vuepress/test-utils/client' describe('DropdownLink', () => { test('renders dropdown link.', () => { const item = { - text: 'VuePress', + text: 'Learn More', + ariaLabel: 'Learn More Select', items: [ { text: 'Guide', @@ -22,7 +23,7 @@ describe('DropdownLink', () => { stubs: { 'router-link': RouterLinkStub }, - propsData: { item, dropdownName: 'Languages' } + propsData: { item } }) expect(wrapper.html()).toMatchSnapshot() }) diff --git a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap index a4c678776f..967442ec11 100644 --- a/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap +++ b/packages/@vuepress/theme-default/__tests__/components/__snapshots__/DropdownLink.spec.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`DropdownLink renders dropdown link. 1`] = ` -<div class="dropdown-wrapper"><button type="button" aria-label="Languages" class="dropdown-title"><span class="title">VuePress</span> <span class="arrow right"></span></button> +<div class="dropdown-wrapper"><button type="button" aria-label="Learn More Select" class="dropdown-title"><span class="title">Learn More</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display: none;" name="dropdown"> <li class="dropdown-item"> <!----> <a class="nav-link">Guide</a></li> diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index 4dd3e9dbb6..c4bf38c4ea 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -6,7 +6,7 @@ <button class="dropdown-title" type="button" - :aria-label="dropdownName" + :aria-label="dropdownArialLabel" @click="toggle" > <span class="title">{{ item.text }}</span> @@ -70,10 +70,6 @@ export default { props: { item: { required: true - }, - dropdownName: { - default: 'Dropdown', - type: String } }, @@ -82,6 +78,10 @@ export default { return this.item.items.reduce((totalCount, item) => { return item.items ? totalCount + item.items.length : totalCount + 1 }, 0) + }, + + dropdownArialLabel () { + return this.item.ariaLabel || this.item.text } }, diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue index e7d0f0ed63..5f63ed8b3f 100644 --- a/packages/@vuepress/theme-default/components/NavLinks.vue +++ b/packages/@vuepress/theme-default/components/NavLinks.vue @@ -12,7 +12,6 @@ <DropdownLink v-if="item.type === 'links'" :item="item" - dropdownName="Select Dropdown" /> <NavLink v-else @@ -55,6 +54,7 @@ export default { const themeLocales = this.$site.themeConfig.locales || {} const languageDropdown = { text: this.$themeLocaleConfig.selectText || 'Languages', + arialLabel: this.$themeLocaleConfig.selectText || 'Languages', items: Object.keys(locales).map(path => { const locale = locales[path] const text = themeLocales[path] && themeLocales[path].label || locale.lang diff --git a/packages/docs/docs/.vuepress/config.js b/packages/docs/docs/.vuepress/config.js index 63158b8e30..6b9cdf0c71 100755 --- a/packages/docs/docs/.vuepress/config.js +++ b/packages/docs/docs/.vuepress/config.js @@ -39,6 +39,7 @@ module.exports = ctx => ({ '/': { label: 'English', selectText: 'Languages', + ariaLabel: "Languages", editLinkText: 'Edit this page on GitHub', lastUpdated: 'Last Updated', nav: require('./nav/en'), @@ -52,6 +53,7 @@ module.exports = ctx => ({ '/zh/': { label: '简体中文', selectText: '选择语言', + ariaLabel: "选择语言", editLinkText: '在 GitHub 上编辑此页', lastUpdated: '上次更新', nav: require('./nav/zh'), diff --git a/packages/docs/docs/.vuepress/nav/en.js b/packages/docs/docs/.vuepress/nav/en.js index 9952fb4cd7..0564ff9db0 100644 --- a/packages/docs/docs/.vuepress/nav/en.js +++ b/packages/docs/docs/.vuepress/nav/en.js @@ -17,6 +17,7 @@ module.exports = [ }, { text: "Learn More", + ariaLabel: "Learn More", items: [ { text: "API", diff --git a/packages/docs/docs/.vuepress/nav/zh.js b/packages/docs/docs/.vuepress/nav/zh.js index 6ec03ad7c6..1dbf9f0587 100644 --- a/packages/docs/docs/.vuepress/nav/zh.js +++ b/packages/docs/docs/.vuepress/nav/zh.js @@ -17,6 +17,7 @@ module.exports = [ }, { text: "了解更多", + ariaLabel: "了解更多", items: [ { text: "API", diff --git a/packages/docs/docs/guide/i18n.md b/packages/docs/docs/guide/i18n.md index 12dc65465b..674c8e4a14 100644 --- a/packages/docs/docs/guide/i18n.md +++ b/packages/docs/docs/guide/i18n.md @@ -54,6 +54,8 @@ module.exports = { selectText: 'Languages', // label for this locale in the language dropdown label: 'English', + // Arial Label for locale in the dropdown + arialLabel: 'Languages' // text for the edit-on-github link editLinkText: 'Edit this page on GitHub', // config for Service Worker @@ -66,7 +68,7 @@ module.exports = { // algolia docsearch options for current locale algolia: {}, nav: [ - { text: 'Nested', link: '/nested/' } + { text: 'Nested', link: '/nested/' , arialLabel: 'Nested' } ], sidebar: { '/': [/* ... */], From c67010e5fa030e486a25d7d427cd08a62cd9bb93 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Sun, 15 Sep 2019 12:02:06 +0300 Subject: [PATCH 12/17] fix typo --- .../@vuepress/theme-default/components/DropdownLink.vue | 4 ++-- packages/@vuepress/theme-default/components/NavLinks.vue | 2 +- packages/docs/docs/guide/i18n.md | 6 +++--- packages/docs/docs/zh/guide/i18n.md | 3 ++- 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index c4bf38c4ea..e6f4a288ae 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -6,7 +6,7 @@ <button class="dropdown-title" type="button" - :aria-label="dropdownArialLabel" + :aria-label="dropdownariaLabel" @click="toggle" > <span class="title">{{ item.text }}</span> @@ -80,7 +80,7 @@ export default { }, 0) }, - dropdownArialLabel () { + dropdownariaLabel () { return this.item.ariaLabel || this.item.text } }, diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue index 5f63ed8b3f..c96eb71b6a 100644 --- a/packages/@vuepress/theme-default/components/NavLinks.vue +++ b/packages/@vuepress/theme-default/components/NavLinks.vue @@ -54,7 +54,7 @@ export default { const themeLocales = this.$site.themeConfig.locales || {} const languageDropdown = { text: this.$themeLocaleConfig.selectText || 'Languages', - arialLabel: this.$themeLocaleConfig.selectText || 'Languages', + ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Languages', items: Object.keys(locales).map(path => { const locale = locales[path] const text = themeLocales[path] && themeLocales[path].label || locale.lang diff --git a/packages/docs/docs/guide/i18n.md b/packages/docs/docs/guide/i18n.md index 674c8e4a14..b3eccb7774 100644 --- a/packages/docs/docs/guide/i18n.md +++ b/packages/docs/docs/guide/i18n.md @@ -54,8 +54,8 @@ module.exports = { selectText: 'Languages', // label for this locale in the language dropdown label: 'English', - // Arial Label for locale in the dropdown - arialLabel: 'Languages' + // Aria Label for locale in the dropdown + ariaLabel: 'Languages' // text for the edit-on-github link editLinkText: 'Edit this page on GitHub', // config for Service Worker @@ -68,7 +68,7 @@ module.exports = { // algolia docsearch options for current locale algolia: {}, nav: [ - { text: 'Nested', link: '/nested/' , arialLabel: 'Nested' } + { text: 'Nested', link: '/nested/' , ariaLabel: 'Nested' } ], sidebar: { '/': [/* ... */], diff --git a/packages/docs/docs/zh/guide/i18n.md b/packages/docs/docs/zh/guide/i18n.md index 9c1e44407d..5be0f9817d 100644 --- a/packages/docs/docs/zh/guide/i18n.md +++ b/packages/docs/docs/zh/guide/i18n.md @@ -52,6 +52,7 @@ module.exports = { '/': { selectText: 'Languages', label: 'English', + ariaLabel: 'Languages' editLinkText: 'Edit this page on GitHub', serviceWorker: { updatePopup: { @@ -61,7 +62,7 @@ module.exports = { }, algolia: {}, nav: [ - { text: 'Nested', link: '/nested/' } + { text: 'Nested', link: '/nested/', ariaLabel: 'Nested' } ], sidebar: { '/': [/* ... */], From e84b6c6cbe7e3cd55e7192954a5b3c3279e1b783 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Sun, 15 Sep 2019 12:04:43 +0300 Subject: [PATCH 13/17] fix typo dropdown computed --- packages/@vuepress/theme-default/components/DropdownLink.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index e6f4a288ae..dffd817fe7 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -6,7 +6,7 @@ <button class="dropdown-title" type="button" - :aria-label="dropdownariaLabel" + :aria-label="dropdownAriaLabel" @click="toggle" > <span class="title">{{ item.text }}</span> @@ -80,7 +80,7 @@ export default { }, 0) }, - dropdownariaLabel () { + dropdownAriaLabel () { return this.item.ariaLabel || this.item.text } }, From 6da2e5f1fdbdfebcd28902f321fd1b2cf1194c27 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Sun, 15 Sep 2019 16:20:25 +0300 Subject: [PATCH 14/17] edit language dropdown aria-label default value --- packages/@vuepress/theme-default/components/NavLinks.vue | 2 +- packages/docs/docs/.vuepress/config.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/@vuepress/theme-default/components/NavLinks.vue b/packages/@vuepress/theme-default/components/NavLinks.vue index c96eb71b6a..9c2ef18902 100644 --- a/packages/@vuepress/theme-default/components/NavLinks.vue +++ b/packages/@vuepress/theme-default/components/NavLinks.vue @@ -54,7 +54,7 @@ export default { const themeLocales = this.$site.themeConfig.locales || {} const languageDropdown = { text: this.$themeLocaleConfig.selectText || 'Languages', - ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Languages', + ariaLabel: this.$themeLocaleConfig.ariaLabel || 'Select language', items: Object.keys(locales).map(path => { const locale = locales[path] const text = themeLocales[path] && themeLocales[path].label || locale.lang diff --git a/packages/docs/docs/.vuepress/config.js b/packages/docs/docs/.vuepress/config.js index 6b9cdf0c71..e908fb17da 100755 --- a/packages/docs/docs/.vuepress/config.js +++ b/packages/docs/docs/.vuepress/config.js @@ -39,7 +39,7 @@ module.exports = ctx => ({ '/': { label: 'English', selectText: 'Languages', - ariaLabel: "Languages", + ariaLabel: 'Select language', editLinkText: 'Edit this page on GitHub', lastUpdated: 'Last Updated', nav: require('./nav/en'), From 842157d269a7531b2a9073223d12b79903d658e8 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Sun, 15 Sep 2019 16:54:40 +0300 Subject: [PATCH 15/17] update docs for ariaLabel property --- .../docs/docs/theme/default-theme-config.md | 19 +++++++++++++++++++ .../docs/zh/theme/default-theme-config.md | 18 ++++++++++++++++++ 2 files changed, 37 insertions(+) diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index 0d912c15b8..2689912590 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -72,6 +72,25 @@ module.exports = { } ``` +You can change `aria-label` of dropdown button to with a custom aria-label. Default value is text property. if the dropdown menu consists of language items., default value is 'Select language' + +```js +module.exports = { + themeConfig: { + nav: [ + { + text: 'Languages', + ariaLabel: 'Language Menu' + items: [ + { text: 'Chinese', link: '/language/chinese/' }, + { text: 'Japanese', link: '/language/japanese/' } + ] + } + ] + } +} +``` + You can also have sub groups inside a dropdown by having nested items: ```js diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md index 843079e01d..eafa1bfb65 100644 --- a/packages/docs/docs/zh/theme/default-theme-config.md +++ b/packages/docs/docs/zh/theme/default-theme-config.md @@ -68,6 +68,24 @@ module.exports = { } ``` + +```js +module.exports = { + themeConfig: { + nav: [ + { + text: 'Languages', + ariaLabel: 'Language Menu' + items: [ + { text: 'Chinese', link: '/language/chinese/' }, + { text: 'Japanese', link: '/language/japanese/' } + ] + } + ] + } +} +``` + 此外,你还可以通过嵌套的 `items` 来在 `下拉列表` 中设置分组: ```js From 371af79aef26cfa9216d303b4c4daff3596caec8 Mon Sep 17 00:00:00 2001 From: Franck <abgrallkefran@gmail.com> Date: Sun, 15 Sep 2019 16:18:32 +0200 Subject: [PATCH 16/17] feat: Try to improve code readability --- .../theme-default/components/DropdownLink.vue | 27 +++++++------------ .../theme-default/components/NavLink.vue | 2 +- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/@vuepress/theme-default/components/DropdownLink.vue b/packages/@vuepress/theme-default/components/DropdownLink.vue index dffd817fe7..dceb173d8b 100644 --- a/packages/@vuepress/theme-default/components/DropdownLink.vue +++ b/packages/@vuepress/theme-default/components/DropdownLink.vue @@ -35,17 +35,21 @@ <li class="dropdown-subitem" :key="childSubItem.link" - v-for="(childSubItem, subIndex) in subItem.items" + v-for="childSubItem in subItem.items" > <NavLink - @focusout-navlink="focusoutNavLink(getSubItemIndex(index, subIndex))" + @focusout=" + isLastItemOfArray(childSubItem, subItem.items) && + isLastItemOfArray(subItem, item.items) && + toggle() + " :item="childSubItem"/> </li> </ul> <NavLink v-else - @focusout-navlink="focusoutNavLink(index + 1)" + @focusout="isLastItemOfArray(subItem, item.items) && toggle()" :item="subItem" /> </li> @@ -57,6 +61,7 @@ <script> import NavLink from '@theme/components/NavLink.vue' import DropdownTransition from '@theme/components/DropdownTransition.vue' +import last from 'lodash/last' export default { components: { NavLink, DropdownTransition }, @@ -74,11 +79,6 @@ export default { }, computed: { - allItemsCount () { - return this.item.items.reduce((totalCount, item) => { - return item.items ? totalCount + item.items.length : totalCount + 1 - }, 0) - }, dropdownAriaLabel () { return this.item.ariaLabel || this.item.text @@ -90,15 +90,8 @@ export default { this.open = !this.open }, - getSubItemIndex (index, subIndex) { - const items = [...this.item.items].splice(0, index) // find up to selected item - return items.reduce((totalCount, item) => { - return item.items ? totalCount + item.items.length : totalCount - }, 0) + subIndex + 1 - }, - - focusoutNavLink (index) { - if (this.allItemsCount === index) this.open = false + isLastItemOfArray (item, array) { + return last(array) === item } }, diff --git a/packages/@vuepress/theme-default/components/NavLink.vue b/packages/@vuepress/theme-default/components/NavLink.vue index 2ac6ccc591..c73080abb8 100644 --- a/packages/@vuepress/theme-default/components/NavLink.vue +++ b/packages/@vuepress/theme-default/components/NavLink.vue @@ -47,7 +47,7 @@ export default { isMailto, isTel, focusoutAction () { - this.$emit('focusout-navlink') + this.$emit('focusout') } } } From 0ef66cc6efd6f148b2c88fa28c0b17f83afa8523 Mon Sep 17 00:00:00 2001 From: edisdev <hedis285@gmail.com> Date: Sun, 15 Sep 2019 17:37:54 +0300 Subject: [PATCH 17/17] add aria-label property in docs page (theme) --- .../docs/docs/theme/default-theme-config.md | 20 +------------------ .../docs/zh/theme/default-theme-config.md | 19 +----------------- 2 files changed, 2 insertions(+), 37 deletions(-) diff --git a/packages/docs/docs/theme/default-theme-config.md b/packages/docs/docs/theme/default-theme-config.md index 2689912590..6fbfb3cd50 100644 --- a/packages/docs/docs/theme/default-theme-config.md +++ b/packages/docs/docs/theme/default-theme-config.md @@ -62,25 +62,7 @@ module.exports = { nav: [ { text: 'Languages', - items: [ - { text: 'Chinese', link: '/language/chinese/' }, - { text: 'Japanese', link: '/language/japanese/' } - ] - } - ] - } -} -``` - -You can change `aria-label` of dropdown button to with a custom aria-label. Default value is text property. if the dropdown menu consists of language items., default value is 'Select language' - -```js -module.exports = { - themeConfig: { - nav: [ - { - text: 'Languages', - ariaLabel: 'Language Menu' + ariaLabel: 'Language Menu', items: [ { text: 'Chinese', link: '/language/chinese/' }, { text: 'Japanese', link: '/language/japanese/' } diff --git a/packages/docs/docs/zh/theme/default-theme-config.md b/packages/docs/docs/zh/theme/default-theme-config.md index eafa1bfb65..e32433bceb 100644 --- a/packages/docs/docs/zh/theme/default-theme-config.md +++ b/packages/docs/docs/zh/theme/default-theme-config.md @@ -58,24 +58,7 @@ module.exports = { nav: [ { text: 'Languages', - items: [ - { text: 'Chinese', link: '/language/chinese/' }, - { text: 'Japanese', link: '/language/japanese/' } - ] - } - ] - } -} -``` - - -```js -module.exports = { - themeConfig: { - nav: [ - { - text: 'Languages', - ariaLabel: 'Language Menu' + ariaLabel: 'Language Menu', items: [ { text: 'Chinese', link: '/language/chinese/' }, { text: 'Japanese', link: '/language/japanese/' }