From 8738e9bf4052d362966689c89e75474f9bd6a755 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20A=C3=ADsa?= Date: Fri, 24 May 2024 20:22:37 +0200 Subject: [PATCH 1/3] Transform item's path to lowercase in navigator --- src/components/Navigator/NavigatorCardItem.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Navigator/NavigatorCardItem.vue b/src/components/Navigator/NavigatorCardItem.vue index c7c950692..ba7421657 100644 --- a/src/components/Navigator/NavigatorCardItem.vue +++ b/src/components/Navigator/NavigatorCardItem.vue @@ -89,7 +89,7 @@ :is="refComponent" :id="item.uid" :class="{ bolded: isBold }" - :url="isGroupMarker ? null : (item.path || '')" + :url="isGroupMarker ? null : (item.path.toLowerCase() || '')" :tabindex="isFocused ? '0' : '-1'" :aria-describedby="`${ariaDescribedBy} ${usageLabel}`" class="leaf-link" From fd27de33bf7377270c3164ce2f1347fdc131a7cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20A=C3=ADsa?= Date: Mon, 27 May 2024 16:11:02 +0200 Subject: [PATCH 2/3] It adds the "router-link-exact-active" class for case insensitive version of technologyPath --- src/components/Navigator/NavigatorCard.vue | 4 +++- src/components/Navigator/NavigatorCardItem.vue | 2 +- tests/unit/components/Navigator/NavigatorCard.spec.js | 9 +++++++++ 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue index 023234c5e..44e50be76 100644 --- a/src/components/Navigator/NavigatorCard.vue +++ b/src/components/Navigator/NavigatorCard.vue @@ -36,7 +36,7 @@ v-if="technology" :id="INDEX_ROOT_KEY" :url="technologyPath" - class="technology-title" + :class="['technology-title', { 'router-link-exact-active': isSameRoute }]" @click.alt.native.prevent="toggleAllNodes" >

@@ -247,6 +247,8 @@ export default { }; }, computed: { + isSameRoute: ({ technologyPath, $route }) => ( + technologyPath.toLowerCase() === $route.path.toLowerCase()), politeAriaLive() { const { hasNodes, navigatorItems } = this; if (!hasNodes) return ''; diff --git a/src/components/Navigator/NavigatorCardItem.vue b/src/components/Navigator/NavigatorCardItem.vue index ba7421657..c7c950692 100644 --- a/src/components/Navigator/NavigatorCardItem.vue +++ b/src/components/Navigator/NavigatorCardItem.vue @@ -89,7 +89,7 @@ :is="refComponent" :id="item.uid" :class="{ bolded: isBold }" - :url="isGroupMarker ? null : (item.path.toLowerCase() || '')" + :url="isGroupMarker ? null : (item.path || '')" :tabindex="isFocused ? '0' : '-1'" :aria-describedby="`${ariaDescribedBy} ${usageLabel}`" class="leaf-link" diff --git a/tests/unit/components/Navigator/NavigatorCard.spec.js b/tests/unit/components/Navigator/NavigatorCard.spec.js index 4dec4b24e..a3e04a7d7 100644 --- a/tests/unit/components/Navigator/NavigatorCard.spec.js +++ b/tests/unit/components/Navigator/NavigatorCard.spec.js @@ -189,6 +189,7 @@ const createWrapper = ({ propsData, ...others } = {}) => shallowMount(NavigatorC BaseNavigatorCard, }, sync: false, + mocks: { $route: { path: defaultProps.technologyPath } }, attachToDocument: true, ...others, }); @@ -370,6 +371,14 @@ describe('NavigatorCard', () => { }); }); + it('adds the "router-link-exact-active" class for case insensitive version of technologyPath', async () => { + const wrapper = createWrapper(); + wrapper.setProps({ + technologyPath: '/documentation/Testkit', + }); + expect(wrapper.find('.technology-title').classes()).toContain('router-link-exact-active'); + }); + it('focus the first item if there is no active item', async () => { const wrapper = createWrapper(); await flushPromises(); From adbbc24f1d67801771e3894b8257f77bb7d09ec7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marina=20A=C3=ADsa?= Date: Wed, 29 May 2024 19:30:08 +0200 Subject: [PATCH 3/3] Replace isSameRoute with isTechnologyRoute --- src/components/Navigator/NavigatorCard.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Navigator/NavigatorCard.vue b/src/components/Navigator/NavigatorCard.vue index 44e50be76..ae7eef6f3 100644 --- a/src/components/Navigator/NavigatorCard.vue +++ b/src/components/Navigator/NavigatorCard.vue @@ -36,7 +36,7 @@ v-if="technology" :id="INDEX_ROOT_KEY" :url="technologyPath" - :class="['technology-title', { 'router-link-exact-active': isSameRoute }]" + :class="['technology-title', { 'router-link-exact-active': isTechnologyRoute }]" @click.alt.native.prevent="toggleAllNodes" >

@@ -247,7 +247,7 @@ export default { }; }, computed: { - isSameRoute: ({ technologyPath, $route }) => ( + isTechnologyRoute: ({ technologyPath, $route }) => ( technologyPath.toLowerCase() === $route.path.toLowerCase()), politeAriaLive() { const { hasNodes, navigatorItems } = this;