fix: (CXSPA-9029) Tab. UI activates on receiving focus.

* closes https://jira.tools.sap/browse/CXSPA-9029
SAP · Jan 13, 2025 · 2b51dba · 2b51dba
1 parent bf10fab
commit 2b51dba
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 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
@@ -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
@@ -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
@@ -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);
+      }
     }
   }