From 09f8d74a573097221b1c32c4a940ccc5e55a2143 Mon Sep 17 00:00:00 2001
From: Uros Lates <uroslates@gmail.com>
Date: Wed, 27 Nov 2024 17:57:36 +0100
Subject: [PATCH] fix: (CXSPA-8015) improve tab focus visibility (show all four
 sides of focused ring) #19637 (#19645)

Closes: https://jira.tools.sap/browse/CXSPA-8015
---
 .../feature-toggles/config/feature-toggles.ts          |  2 +-
 .../cms-components/content/tab/tab.component.ts        |  6 +++++-
 .../scss/components/content/tab/_tab.scss              | 10 ++++++++++
 3 files changed, 16 insertions(+), 2 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 28ece1d1b5c..98f6719981d 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
@@ -695,7 +695,7 @@ export interface FeatureTogglesInterface {
   /**
    * Fixes various instances of the focus ring being cropped in the UI.
    * The focus ring on interactive elements should have all its sides visible and not include any extra padding.
-   * Affects styles of: 'CartItemListComponent, CartItemComponent, ListComponent, FutureStockAccordionComponent, QuoteConfirmDialogComponent, MessagingComponent
+   * Affects styles of: 'CartItemListComponent, CartItemComponent, ListComponent, FutureStockAccordionComponent, QuoteConfirmDialogComponent, MessagingComponent, TabComponent
    */
   a11yCroppedFocusRing?: boolean;
 
diff --git a/projects/storefrontlib/cms-components/content/tab/tab.component.ts b/projects/storefrontlib/cms-components/content/tab/tab.component.ts
index 0a7cbeb66ff..52737a83558 100644
--- a/projects/storefrontlib/cms-components/content/tab/tab.component.ts
+++ b/projects/storefrontlib/cms-components/content/tab/tab.component.ts
@@ -21,7 +21,7 @@ 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 } from '@spartacus/core';
+import { TranslationService, useFeatureStyles } from '@spartacus/core';
 
 @Component({
   selector: 'cx-tab',
@@ -53,6 +53,10 @@ export class TabComponent implements OnInit, AfterViewInit, OnDestroy {
   mode$: Observable<TAB_MODE>;
   protected subscriptions = new Subscription();
 
+  constructor() {
+    useFeatureStyles('a11yCroppedFocusRing');
+  }
+
   ngOnInit(): void {
     this.openTabs$ = new BehaviorSubject<number[]>(this.config?.openTabs ?? []);
     this.mode$ = this.getMode();
diff --git a/projects/storefrontstyles/scss/components/content/tab/_tab.scss b/projects/storefrontstyles/scss/components/content/tab/_tab.scss
index 4b886eae851..f6cad2b2917 100644
--- a/projects/storefrontstyles/scss/components/content/tab/_tab.scss
+++ b/projects/storefrontstyles/scss/components/content/tab/_tab.scss
@@ -42,6 +42,11 @@
     &:focus {
       z-index: 1;
     }
+    @include forFeature('a11yCroppedFocusRing') {
+      &:focus-visible {
+        outline-offset: -3px;
+      }
+    }
 
     &.active:after,
     &:hover:not([disabled]):after {
@@ -83,6 +88,11 @@
     border-radius: var(--cx-tab-panel-border-radius);
     padding: var(--cx-tab-panel-padding);
     background: var(--cx-tab-panel-bg);
+    @include forFeature('a11yCroppedFocusRing') {
+      &.active:focus-visible {
+        outline-offset: -3px;
+      }
+    }
   }
 
   .tab {