fix: (CXSPA-8015) improve tab focus visibility (show all four sides o…

…f focused ring) (#19637) Closes: https://jira.tools.sap/browse/CXSPA-8015
SAP · Nov 27, 2024 · 44c66f4 · 44c66f4
1 parent 8702aa8
commit 44c66f4
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 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
@@ -700,7 +700,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
@@ -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
@@ -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 {