From 8f6abb65bf9765f7401e36acbfd376978af60b38 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Wed, 18 Oct 2023 14:45:02 -0700 Subject: [PATCH 1/8] fix(NcAppSidebarTabs): Adjust styles Signed-off-by: Christopher Ng --- src/components/NcAppSidebar/NcAppSidebarTabs.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue index f6baa13201..62251c07db 100644 --- a/src/components/NcAppSidebar/NcAppSidebarTabs.vue +++ b/src/components/NcAppSidebar/NcAppSidebarTabs.vue @@ -294,7 +294,7 @@ export default { } // Override max-width to use all available space - :deep(.checkbox-radio-switch__label) { + :deep(.checkbox-radio-switch__content) { max-width: unset; } } From 5f8f3e2ae6648c7c371df165202a358c4b4805aa Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Wed, 18 Oct 2023 14:45:02 -0700 Subject: [PATCH 2/8] feat(NcCheckboxRadioSwitch): Sidebar tab usage Signed-off-by: Christopher Ng --- .../NcCheckboxRadioSwitch.vue | 182 ++++++------------ 1 file changed, 60 insertions(+), 122 deletions(-) diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue index 2fa7e42231..5a934b6bb8 100644 --- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue +++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue @@ -267,51 +267,44 @@ export default { 'checkbox-radio-switch--button-variant': buttonVariant, 'checkbox-radio-switch--button-variant-v-grouped': buttonVariant && buttonVariantGrouped === 'vertical', 'checkbox-radio-switch--button-variant-h-grouped': buttonVariant && buttonVariantGrouped === 'horizontal', + 'button-vue': isButtonType, }" + class="checkbox-radio-switch" :style="cssVars" - class="checkbox-radio-switch"> - + - + + + + From a2e2c168c7eebf497b3f51fa7651080fc74f21e5 Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Wed, 18 Oct 2023 14:45:02 -0700 Subject: [PATCH 4/8] fix(NcAppSidebarTabs): Always add aria-selected Signed-off-by: Christopher Ng --- src/components/NcAppSidebar/NcAppSidebarTabs.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue index 62251c07db..8900d37dc9 100644 --- a/src/components/NcAppSidebar/NcAppSidebarTabs.vue +++ b/src/components/NcAppSidebar/NcAppSidebarTabs.vue @@ -41,7 +41,7 @@ Date: Wed, 18 Oct 2023 14:45:02 -0700 Subject: [PATCH 5/8] fix(NcAppSidebarTabs): Tests Signed-off-by: Christopher Ng --- .../NcAppSidebar/NcAppSidebarTabs.spec.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js b/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js index ca252420e7..3f91d44a4b 100644 --- a/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js +++ b/tests/unit/components/NcAppSidebar/NcAppSidebarTabs.spec.js @@ -121,17 +121,17 @@ describe('NcAppSidebarTabs.vue', () => { expect(liList.length).toEqual(3) }) it('emit "update:active" event with the selected tab id when clicking on a tab', () => { - const lastLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch:last-of-type>label') + const lastLink = wrapper.find('div[role="tablist"]>button.checkbox-radio-switch:last-of-type') lastLink.trigger('click') expect(wrapper.emitted('update:active')[0]).toEqual(['last']) }) it('emit "update:active" event with the first tab id when keydown pageup is pressed', () => { - const lastLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch:last-of-type>label') + const lastLink = wrapper.find('div[role="tablist"]>button.checkbox-radio-switch:last-of-type') lastLink.trigger('keydown.pageup') expect(wrapper.emitted('update:active')[0]).toEqual(['first']) }) it('emit "update:active" event with the last tab id when keydown pagedown is pressed', () => { - const lastLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch:last-of-type>label') + const lastLink = wrapper.find('div[role="tablist"]>button.checkbox-radio-switch:last-of-type') lastLink.trigger('keydown.pagedown') expect(wrapper.emitted('update:active')[0]).toEqual(['last']) }) @@ -141,12 +141,12 @@ describe('NcAppSidebarTabs.vue', () => { }) it('does not emit "update:active" event when keydown left is pressed', () => { expect(wrapper.emitted('update:active')).toBeFalsy() - const firstLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch>label') + const firstLink = wrapper.find('div[role="tablist"]>button.checkbox-radio-switch') firstLink.trigger('keydown.left') expect(wrapper.emitted('update:active')).toBeFalsy() }) it('emit "update:active" event with the next tab id when keydown right is pressed', () => { - const firstLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch>label') + const firstLink = wrapper.find('div[role="tablist"]>button.checkbox-radio-switch') firstLink.trigger('keydown.right') expect(wrapper.emitted('update:active')[0]).toEqual(['second']) }) @@ -156,13 +156,13 @@ describe('NcAppSidebarTabs.vue', () => { wrapper.setData({ activeTab: 'last' }) }) it('emit "update:active" event with the previous tab id when keydown left is pressed', () => { - const lastLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch:last-of-type>label') + const lastLink = wrapper.find('div[role="tablist"]>button.checkbox-radio-switch:last-of-type') lastLink.trigger('keydown.left') expect(wrapper.emitted('update:active')[0]).toEqual(['second']) }) it('does not emit "update:active" event when keydown right is pressed', () => { expect(wrapper.emitted('update:active')).toBeFalsy() - const lastLink = wrapper.find('div[role="tablist"]>.checkbox-radio-switch:last-of-type>label') + const lastLink = wrapper.find('div[role="tablist"]>button.checkbox-radio-switch:last-of-type') lastLink.trigger('keydown.right') expect(wrapper.emitted('update:active')).toBeFalsy() }) From e9281b6a8d371bad6909ca18240eb20ea8ca1dba Mon Sep 17 00:00:00 2001 From: Christopher Ng Date: Wed, 18 Oct 2023 14:45:02 -0700 Subject: [PATCH 6/8] fix(NcCheckboxRadioSwitch): Enforce button type Signed-off-by: Christopher Ng --- src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue index 5a934b6bb8..29ff7a869a 100644 --- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue +++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue @@ -271,6 +271,7 @@ export default { }" class="checkbox-radio-switch" :style="cssVars" + :type="isButtonType ? 'button' : null" v-on="isButtonType ? listeners : null"> Date: Wed, 18 Oct 2023 14:45:02 -0700 Subject: [PATCH 7/8] fix(NcAppSidebarTabs): Correct association between tab button and tabpanel Signed-off-by: Christopher Ng --- src/components/NcAppSidebar/NcAppSidebarTabs.vue | 4 ++-- src/components/NcAppSidebarTab/NcAppSidebarTab.vue | 2 +- .../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue | 10 +++++++++- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue index 8900d37dc9..085d5655e0 100644 --- a/src/components/NcAppSidebar/NcAppSidebarTabs.vue +++ b/src/components/NcAppSidebar/NcAppSidebarTabs.vue @@ -44,7 +44,7 @@ :aria-selected="String(activeTab === tab.id)" :button-variant="true" :checked="activeTab === tab.id" - :data-id="tab.id" + :wrapper-id="`tab-button-${tab.id}`" :tabindex="activeTab === tab.id ? 0 : -1" button-variant-grouped="horizontal" class="app-sidebar-tabs__tab" @@ -201,7 +201,7 @@ export default { * Focus the current active tab */ focusActiveTab() { - this.$el.querySelector(`[data-id="${this.activeTab}"]`).focus() + this.$el.querySelector(`#tab-button-${this.activeTab}`).focus() }, /** diff --git a/src/components/NcAppSidebarTab/NcAppSidebarTab.vue b/src/components/NcAppSidebarTab/NcAppSidebarTab.vue index 6ec7f22ce2..45899ac7bc 100644 --- a/src/components/NcAppSidebarTab/NcAppSidebarTab.vue +++ b/src/components/NcAppSidebarTab/NcAppSidebarTab.vue @@ -27,7 +27,7 @@