fix: Brought back a11yCloseProductImageBtnFocus focus flag (#19340)

SAP · Oct 7, 2024 · ee513d2 · ee513d2
1 parent fc29094
commit ee513d2
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 0 deletions.
diff --git a/...export/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.ts b/...export/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.ts
@@ -54,6 +54,7 @@ export class ImportEntriesDialogComponent {
 
   constructor(protected launchDialogService: LaunchDialogService) {
     useFeatureStyles('a11yExpandedFocusIndicator');
+    useFeatureStyles('a11yVisibleFocusOverflows');
   }
 
   isNewCartForm(context: AddOrderEntriesContext) {

diff --git a/feature-libs/cart/import-export/styles/_import-entries-dialog.scss b/feature-libs/cart/import-export/styles/_import-entries-dialog.scss
@@ -21,6 +21,13 @@ cx-import-entries-dialog {
           font-weight: var(--cx-font-weight-semi);
           line-height: var(--cx-line-height, 1.2222222222);
         }
+
+        @include forFeature('a11yVisibleFocusOverflows') {
+          .cx-import-entries-close {
+            margin: 0;
+            padding: 0;
+          }
+        }
       }
 
       cx-import-entries-form,

diff --git a/...nents/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.ts b/...nents/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.ts
@@ -47,6 +47,7 @@ export class ProductImageZoomDialogComponent {
     protected launchDialogService: LaunchDialogService,
     protected el: ElementRef
   ) {
+    useFeatureStyles('a11yCloseProductImageBtnFocus');
     useFeatureStyles('a11yExpandedFocusIndicator');
   }
 

diff --git a/feature-libs/product/image-zoom/styles/_product-image-zoom-dialog.scss b/feature-libs/product/image-zoom/styles/_product-image-zoom-dialog.scss
@@ -39,6 +39,15 @@ cx-product-image-zoom-dialog {
           padding: 1rem;
         }
 
+        @include forFeature('a11yCloseProductImageBtnFocus') {
+          .close {
+            outline-offset: -4px;
+            @include forFeature('a11yExpandedFocusIndicator') {
+              outline-offset: unset;
+            }
+          }
+        }
+
         @include cx-highContrastTheme {
           background-color: var(--cx-color-background);
         }

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
@@ -369,6 +369,12 @@ export interface FeatureTogglesInterface {
    */
   a11yTruncatedTextForResponsiveView?: boolean;
 
+  /**
+   * When enabled focus outline on the close button inside `ProductImageZoomDialogComponent`
+   * will be fully visible
+   */
+  a11yCloseProductImageBtnFocus?: boolean;
+
   /**
    * Modifies getAriaLabel method in 'PaginationComponent' to return a sematic label.
    */
@@ -671,6 +677,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yPreventCartItemsFormRedundantRecreation: false,
   a11yPreventSRFocusOnHiddenElements: false,
   a11yMyAccountLinkOutline: false,
+  a11yCloseProductImageBtnFocus: false,
   a11yNotificationPreferenceFieldset: false,
   a11yImproveContrast: false,
   a11yEmptyWishlistHeading: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -344,6 +344,7 @@ if (environment.cpq) {
         a11ySemanticPaginationLabel: true,
         a11yPreventCartItemsFormRedundantRecreation: true,
         a11yMyAccountLinkOutline: true,
+        a11yCloseProductImageBtnFocus: true,
         a11yNotificationPreferenceFieldset: true,
         a11yImproveContrast: true,
         a11yEmptyWishlistHeading: true,