From 2b51dbad1266ff86e9871418b6ce6678f4bd7c89 Mon Sep 17 00:00:00 2001
From: Stanislav Sukhanov <sukhanov.stas@gmail.com>
Date: Mon, 13 Jan 2025 11:22:32 +0100
Subject: [PATCH] fix: (CXSPA-9029)  Tab. UI activates on receiving focus.

 * closes https://jira.tools.sap/browse/CXSPA-9029
---
 .../feature-toggles/config/feature-toggles.ts |  6 +++++
 .../spartacus/spartacus-features.module.ts    |  1 +
 .../content/tab/tab.component.ts              | 27 ++++++++++++++-----
 3 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
index 29c0075021f..144ac24326c 100644
--- a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
+++ b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -216,6 +216,11 @@ export interface FeatureTogglesInterface {
    */
   a11yPopoverHighContrast?: boolean;
 
+  /**
+   * 'TabComponent' disallow automatic tab activation.
+   */
+  a11yTabsManualActivation?: boolean;
+
   /**
    * Adds Datepicker and Combobox label and corrects heading order for 'CheckoutScheduleReplenishmentOrderComponent'.
    */
@@ -990,6 +995,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yReorderDialog: true,
   a11yPopoverFocus: true,
   a11yPopoverHighContrast: false,
+  a11yTabsManualActivation: false,
   a11yScheduleReplenishment: true,
   a11yScrollToTop: true,
   a11ySavedCartsZoom: true,
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
index f9a02531c6c..c8f4f95b8fd 100644
--- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -318,6 +318,7 @@ if (environment.cpq) {
         a11yReorderDialog: true,
         a11yPopoverFocus: true,
         a11yPopoverHighContrast: true,
+        a11yTabsManualActivation: false,
         a11yScheduleReplenishment: true,
         a11yScrollToTop: true,
         a11ySavedCartsZoom: true,
diff --git a/projects/storefrontlib/cms-components/content/tab/tab.component.ts b/projects/storefrontlib/cms-components/content/tab/tab.component.ts
index 9d8be7da48a..372566721bc 100644
--- a/projects/storefrontlib/cms-components/content/tab/tab.component.ts
+++ b/projects/storefrontlib/cms-components/content/tab/tab.component.ts
@@ -21,7 +21,11 @@ import { BehaviorSubject, Observable, of, Subscription } from 'rxjs';
 import { map, take } from 'rxjs/operators';
 import { Tab, TabConfig, TAB_MODE } from './tab.model';
 import { wrapIntoBounds } from './tab.utils';
-import { TranslationService, useFeatureStyles } from '@spartacus/core';
+import {
+  TranslationService,
+  useFeatureStyles,
+  FeatureConfigService,
+} from '@spartacus/core';
 
 @Component({
   selector: 'cx-tab',
@@ -46,6 +50,9 @@ export class TabComponent implements OnInit, AfterViewInit, OnDestroy {
   protected breakpointService = inject(BreakpointService);
   protected translationService = inject(TranslationService);
   protected cd = inject(ChangeDetectorRef);
+  private featureConfigService = inject(FeatureConfigService, {
+    optional: true,
+  });
 
   @ViewChildren('tabHeader') tabHeaders: QueryList<any>;
 
@@ -111,11 +118,19 @@ export class TabComponent implements OnInit, AfterViewInit, OnDestroy {
   selectOrFocus(tabNum: number, mode: TAB_MODE, event: KeyboardEvent): void {
     event.preventDefault();
 
-    switch (mode) {
-      case TAB_MODE.TAB:
-        return this.select(tabNum, mode);
-      case TAB_MODE.ACCORDIAN:
-        return this.focus(tabNum);
+    if (this.featureConfigService?.isEnabled('a11yTabsManualActivation')) {
+      switch (mode) {
+        case TAB_MODE.TAB:
+        case TAB_MODE.ACCORDIAN:
+          return this.focus(tabNum);
+      }
+    } else {
+      switch (mode) {
+        case TAB_MODE.TAB:
+          return this.select(tabNum, mode);
+        case TAB_MODE.ACCORDIAN:
+          return this.focus(tabNum);
+      }
     }
   }