From 9b1905c80190d2678b1eb0e4ae47b93c68e26b8b Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 23 Apr 2025 12:40:27 +0000 Subject: [PATCH 1/3] Create PR for #1679 From 37a405ad96462c48aa1f1fb64cfd8e5fd442efd8 Mon Sep 17 00:00:00 2001 From: Magdalena Marinkov Date: Wed, 23 Apr 2025 14:54:42 +0200 Subject: [PATCH 2/3] a11y(bal-tabs): controlling navigation via keyboard through new property --- .changeset/clever-mangos-check.md | 5 +++++ packages/core/src/components.d.ts | 8 ++++++++ packages/core/src/components/bal-tabs/bal-tabs.tsx | 13 +++++++++++-- 3 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 .changeset/clever-mangos-check.md diff --git a/.changeset/clever-mangos-check.md b/.changeset/clever-mangos-check.md new file mode 100644 index 0000000000..c9ae3ec998 --- /dev/null +++ b/.changeset/clever-mangos-check.md @@ -0,0 +1,5 @@ +--- +'@baloise/ds-core': minor +--- + +**tabs**: new property handleAsTabList to control navigation via keyboard to use arrow or either tabulator diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 71d08f0789..bfcc7852fb 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -3289,6 +3289,10 @@ export namespace Components { * Find the options properties by its value */ "getOptionByValue": (value: string) => Promise; + /** + * If `true` then isTabList becomes true even if there is a link in the list. + */ + "handleAsTabList": boolean; /** * Defines the layout of the tabs. */ @@ -8442,6 +8446,10 @@ declare namespace LocalJSX { * If `true` the tabs is a block element and uses 100% of the width */ "fullwidth"?: boolean; + /** + * If `true` then isTabList becomes true even if there is a link in the list. + */ + "handleAsTabList"?: boolean; /** * Defines the layout of the tabs. */ diff --git a/packages/core/src/components/bal-tabs/bal-tabs.tsx b/packages/core/src/components/bal-tabs/bal-tabs.tsx index 31457860b6..4abc2a5732 100644 --- a/packages/core/src/components/bal-tabs/bal-tabs.tsx +++ b/packages/core/src/components/bal-tabs/bal-tabs.tsx @@ -211,6 +211,11 @@ export class Tabs */ @Prop() dimInactiveElements = false + /** + * If `true` then isTabList becomes true even if there is a link in the list. + */ + @Prop() handleAsTabList = false + @Watch('value') protected async valueChanged(newValue?: string, oldValue?: string) { if (newValue !== oldValue) { @@ -426,8 +431,12 @@ export class Tabs return Array.from(this.el.querySelectorAll('.bal-tabs__nav__item')) } + /** + * Tells if the component acts as a tab or link list. + * If only one link is in the list and handleAsTabList has been set to false it will be a link list + */ private get isTabList(): boolean { - return this.store.filter(tab => !!tab.href).length === 0 + return this.store.filter(tab => !!tab.href).length === 0 || this.handleAsTabList } private get items(): HTMLBalTabItemElement[] { @@ -772,7 +781,7 @@ export class Tabs } async focus(tab: BalTabOption) { - const hasKeyboardFocus = this.el.querySelector(`button.bal-focused`) !== null + const hasKeyboardFocus = this.el.querySelector(`button.bal-focused, a.bal-focused`) !== null if (this.swiper.isActive()) { const options = await this.getOptions() From d5028098ae8c99502e68fa986d818b1ebc17514a Mon Sep 17 00:00:00 2001 From: Magdalena Marinkov Date: Wed, 23 Apr 2025 15:10:08 +0200 Subject: [PATCH 3/3] format --- packages/core/src/components/bal-tabs/bal-tabs.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/core/src/components/bal-tabs/bal-tabs.tsx b/packages/core/src/components/bal-tabs/bal-tabs.tsx index 4abc2a5732..2289c9a8ae 100644 --- a/packages/core/src/components/bal-tabs/bal-tabs.tsx +++ b/packages/core/src/components/bal-tabs/bal-tabs.tsx @@ -781,7 +781,8 @@ export class Tabs } async focus(tab: BalTabOption) { - const hasKeyboardFocus = this.el.querySelector(`button.bal-focused, a.bal-focused`) !== null + const hasKeyboardFocus = + this.el.querySelector(`button.bal-focused, a.bal-focused`) !== null if (this.swiper.isActive()) { const options = await this.getOptions()