fix: (CXSPA-8015) - Dialog close buttons expanded focus indicator (#1…

…9261)
SAP · Sep 24, 2024 · ad65a90 · ad65a90
1 parent 43276eb
commit ad65a90
Show file tree

Hide file tree

Showing 16 changed files with 52 additions and 37 deletions.
diff --git a/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.ts b/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.ts
@@ -21,7 +21,7 @@ import {
   OrderEntry,
   PromotionLocation,
 } from '@spartacus/cart/base/root';
-import { RoutingService } from '@spartacus/core';
+import { RoutingService, useFeatureStyles } from '@spartacus/core';
 import {
   FocusConfig,
   ICON_TYPE,
@@ -92,7 +92,9 @@ export class AddedToCartDialogComponent implements OnInit, OnDestroy {
     protected launchDialogService: LaunchDialogService,
     protected routingService: RoutingService,
     protected el: ElementRef
-  ) {}
+  ) {
+    useFeatureStyles('a11yExpandedFocusIndicator');
+  }
 
   ngOnInit(): void {
     this.subscription.add(

diff --git a/...ure-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.ts b/...ure-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.ts
@@ -11,8 +11,9 @@ import {
   HostListener,
   OnDestroy,
 } from '@angular/core';
+import { useFeatureStyles } from '@spartacus/core';
+import { FocusConfig, ICON_TYPE } from '@spartacus/storefront';
 import { ClearCartDialogComponentService } from './clear-cart-dialog-component.service';
-import { ICON_TYPE, FocusConfig } from '@spartacus/storefront';
 
 @Component({
   selector: 'cx-clear-cart-dialog',
@@ -42,7 +43,9 @@ export class ClearCartDialogComponent implements OnDestroy {
   constructor(
     protected el: ElementRef,
     protected clearCartDialogComponentService: ClearCartDialogComponentService
-  ) {}
+  ) {
+    useFeatureStyles('a11yExpandedFocusIndicator');
+  }
 
   clearCart(): void {
     this.isClearing = true;

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
@@ -53,7 +53,7 @@ export class ImportEntriesDialogComponent {
     );
 
   constructor(protected launchDialogService: LaunchDialogService) {
-    useFeatureStyles('a11yVisibleFocusOverflows');
+    useFeatureStyles('a11yExpandedFocusIndicator');
   }
 
   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,13 +21,6 @@ cx-import-entries-dialog {
           font-weight: var(--cx-font-weight-semi);
           line-height: var(--cx-line-height, 1.2222222222);
         }
-        // TODO: (CXSPA-7208) Remove feature flag next major
-        @include forFeature('a11yVisibleFocusOverflows') {
-          .cx-import-entries-close {
-            margin: 0;
-            padding: 0;
-          }
-        }
       }
 
       cx-import-entries-form,

diff --git a/...ibs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.ts b/...ibs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.ts
@@ -32,6 +32,7 @@ import {
   GlobalMessageService,
   GlobalMessageType,
   RoutingService,
+  useFeatureStyles,
 } from '@spartacus/core';
 import {
   FocusConfig,
@@ -97,7 +98,9 @@ export class SavedCartFormDialogComponent implements OnInit, OnDestroy {
     protected eventService: EventService,
     protected routingService: RoutingService,
     protected globalMessageService: GlobalMessageService
-  ) {}
+  ) {
+    useFeatureStyles('a11yVisibleFocusOverflows');
+  }
 
   ngOnInit(): void {
     this.resetSavedCartStates();

diff --git a/.../components/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.ts b/.../components/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.ts
@@ -17,7 +17,11 @@ import {
   CartValidationStatusCode,
   MultiCartFacade,
 } from '@spartacus/cart/base/root';
-import { FeatureConfigService, OCC_CART_ID_CURRENT } from '@spartacus/core';
+import {
+  FeatureConfigService,
+  OCC_CART_ID_CURRENT,
+  useFeatureStyles,
+} from '@spartacus/core';
 import { ReorderOrderFacade } from '@spartacus/order/root';
 import {
   FocusConfig,
@@ -61,7 +65,9 @@ export class ReorderDialogComponent {
     protected launchDialogService: LaunchDialogService,
     protected reorderOrderFacade: ReorderOrderFacade,
     protected multiCartFacade: MultiCartFacade
-  ) {}
+  ) {
+    useFeatureStyles('a11yExpandedFocusIndicator');
+  }
 
   createCartFromOrder(orderCode: string): void {
     this.showDecisionPrompt$.next(false);

diff --git a/...ckup-in-store/components/container/pickup-option-dialog/pickup-option-dialog.component.ts b/...ckup-in-store/components/container/pickup-option-dialog/pickup-option-dialog.component.ts
@@ -12,6 +12,7 @@ import {
   OnInit,
 } from '@angular/core';
 import { ActiveCartFacade } from '@spartacus/cart/base/root';
+import { useFeatureStyles } from '@spartacus/core';
 import {
   AugmentedPointOfService,
   cartWithIdAndUserId,
@@ -69,6 +70,7 @@ export class PickupOptionDialogComponent implements OnInit, OnDestroy {
     protected pickupOptionFacade: PickupOptionFacade
   ) {
     // Intentional empty constructor
+    useFeatureStyles('a11yExpandedFocusIndicator');
   }
 
   @HostListener('click', ['$event'])

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,7 +47,7 @@ export class ProductImageZoomDialogComponent {
     protected launchDialogService: LaunchDialogService,
     protected el: ElementRef
   ) {
-    useFeatureStyles('a11yCloseProductImageBtnFocus');
+    useFeatureStyles('a11yExpandedFocusIndicator');
   }
 
   close(reason = ''): void {

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,12 +39,6 @@ cx-product-image-zoom-dialog {
           padding: 1rem;
         }
 
-        // TODO: (CXSPA-7212) - Remove feature flag next major release
-        @include forFeature('a11yCloseProductImageBtnFocus') {
-          .close {
-            outline-offset: -4px;
-          }
-        }
         @include cx-highContrastTheme {
           background-color: var(--cx-color-background);
         }

diff --git a/...ress-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.ts b/...ress-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.ts
@@ -11,7 +11,7 @@ import {
   HostListener,
   OnInit,
 } from '@angular/core';
-import { Address } from '@spartacus/core';
+import { Address, useFeatureStyles } from '@spartacus/core';
 import {
   FocusConfig,
   ICON_TYPE,
@@ -47,7 +47,9 @@ export class SuggestedAddressDialogComponent implements OnInit {
   constructor(
     protected launchDialogService: LaunchDialogService,
     protected el: ElementRef
-  ) {}
+  ) {
+    useFeatureStyles('a11yExpandedFocusIndicator');
+  }
 
   ngOnInit(): void {
     this.data$.pipe(take(1)).subscribe((data) => this.setSelectedAddress(data));

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
@@ -219,6 +219,7 @@ export interface FeatureTogglesInterface {
 
   /**
    * Fixes unnecessarily expanded focus indicator in 'ProductListItemComponent' and 'AddToSavedCartComponent'.
+   * Modifies dialog styles to stop the focus indicator from expanding when 'close' button is focused.
    */
   a11yExpandedFocusIndicator?: boolean;
 
@@ -372,12 +373,6 @@ export interface FeatureTogglesInterface {
    */
   a11yMyAccountLinkOutline?: boolean;
 
-  /**
-   * When enabled focus outline on the close button inside `ProductImageZoomDialogComponent`
-   * will be fully visible
-   */
-  a11yCloseProductImageBtnFocus?: boolean;
-
   /**
    * Improve colour contrast in the demonstration theme Santorini
    * to comply with accessibility standards. On activation, colour
@@ -616,7 +611,6 @@ 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
@@ -341,7 +341,6 @@ if (environment.cpq) {
         a11ySemanticPaginationLabel: true,
         a11yPreventCartItemsFormRedundantRecreation: true,
         a11yMyAccountLinkOutline: true,
-        a11yCloseProductImageBtnFocus: true,
         a11yNotificationPreferenceFieldset: true,
         a11yImproveContrast: true,
         a11yEmptyWishlistHeading: true,

diff --git a/.../cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.ts b/.../cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.ts
@@ -12,7 +12,7 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
-import { CustomerCoupon } from '@spartacus/core';
+import { CustomerCoupon, useFeatureStyles } from '@spartacus/core';
 import { Subscription } from 'rxjs';
 import { ICON_TYPE } from '../../../../../cms-components/misc/icon/index';
 import { FocusConfig, LaunchDialogService } from '../../../../../layout/index';
@@ -44,7 +44,9 @@ export class CouponDialogComponent implements OnDestroy, OnInit {
   constructor(
     protected launchDialogService: LaunchDialogService,
     protected el: ElementRef
-  ) {}
+  ) {
+    useFeatureStyles('a11yExpandedFocusIndicator');
+  }
 
   ngOnInit(): void {
     this.subscription.add(

diff --git a/...oduct/stock-notification/stock-notification-dialog/stock-notification-dialog.component.ts b/...oduct/stock-notification/stock-notification-dialog/stock-notification-dialog.component.ts
@@ -12,7 +12,11 @@ import {
   OnDestroy,
   OnInit,
 } from '@angular/core';
-import { NotificationPreference, UserInterestsService } from '@spartacus/core';
+import {
+  NotificationPreference,
+  useFeatureStyles,
+  UserInterestsService,
+} from '@spartacus/core';
 import { Observable, Subscription } from 'rxjs';
 import { FocusConfig } from '../../../../layout/a11y/keyboard-focus/keyboard-focus.model';
 import { LaunchDialogService } from '../../../../layout/index';
@@ -46,7 +50,9 @@ export class StockNotificationDialogComponent implements OnInit, OnDestroy {
     private interestsService: UserInterestsService,
     protected launchDialogService: LaunchDialogService,
     protected el: ElementRef
-  ) {}
+  ) {
+    useFeatureStyles('a11yExpandedFocusIndicator');
+  }
 
   close(reason?: any) {
     this.launchDialogService.closeDialog(reason);

diff --git a/...rontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.ts b/...rontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.ts
@@ -9,10 +9,10 @@ import {
   ElementRef,
   HostBinding,
   HostListener,
+  inject,
   OnDestroy,
   OnInit,
   Optional,
-  inject,
 } from '@angular/core';
 import {
   AnonymousConsent,
@@ -82,6 +82,7 @@ export class AnonymousConsentDialogComponent implements OnInit, OnDestroy {
       }
     }
     useFeatureStyles('a11yUseButtonsForBtnLinks');
+    useFeatureStyles('a11yExpandedFocusIndicator');
   }
 
   ngOnInit(): void {

diff --git a/projects/storefrontstyles/scss/cxbase/blocks/modal.scss b/projects/storefrontstyles/scss/cxbase/blocks/modal.scss
@@ -50,6 +50,14 @@ $modal-min-width-asm: 95% !important;
     }
   }
 
+  @include forFeature('a11yExpandedFocusIndicator') {
+    .cx-dialog-header button.close,
+    button.close {
+      padding: 0;
+      margin: 0 0 0 auto;
+    }
+  }
+
   &[aria-hidden='false'] {
     display: block;
   }