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 index 3cb14a693d5..39b500e0bf4 100644 --- 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/feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.ts b/feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.ts index bf9332e5686..c1735bc433d 100644 --- a/feature-libs/cart/base/components/clear-cart/clear-cart-dialog/clear-cart-dialog.component.ts +++ b/feature-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/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.ts b/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.ts index 34ab11023dd..7a345a359f6 100644 --- a/feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-entries-dialog.component.ts +++ b/feature-libs/cart/import-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 index f6c6e52eae7..49c741b960e 100644 --- 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/feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.ts b/feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.ts index 6d700e52e44..953c085232b 100644 --- a/feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.ts +++ b/feature-libs/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/feature-libs/order/components/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.ts b/feature-libs/order/components/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.ts index 414a7b2ec88..8473185daa6 100644 --- a/feature-libs/order/components/order-details/order-detail-reorder/reorder-dialog/reorder-dialog.component.ts +++ b/feature-libs/order/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/feature-libs/pickup-in-store/components/container/pickup-option-dialog/pickup-option-dialog.component.ts b/feature-libs/pickup-in-store/components/container/pickup-option-dialog/pickup-option-dialog.component.ts index 396ed40e7b3..52c1917a02a 100644 --- a/feature-libs/pickup-in-store/components/container/pickup-option-dialog/pickup-option-dialog.component.ts +++ b/feature-libs/pickup-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/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.ts b/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.ts index e09c5147f0f..adeebbb4f26 100644 --- a/feature-libs/product/image-zoom/components/product-image-zoom/product-image-zoom-dialog/product-image-zoom-dialog.component.ts +++ b/feature-libs/product/image-zoom/components/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 index 37aad3bc834..18cf9090fba 100644 --- 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/feature-libs/user/profile/components/address-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.ts b/feature-libs/user/profile/components/address-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.ts index 396e935a926..09b2a0c26ab 100644 --- a/feature-libs/user/profile/components/address-book/address-form/suggested-addresses-dialog/suggested-addresses-dialog.component.ts +++ b/feature-libs/user/profile/components/address-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 index 8ad909b085f..342504dec49 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 @@ -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 = { 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 index 79101456904..714e827683a 100644 --- 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/projects/storefrontlib/cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.ts b/projects/storefrontlib/cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.ts index dfbe64827f0..00e1ea98748 100644 --- a/projects/storefrontlib/cms-components/myaccount/my-coupons/coupon-card/coupon-dialog/coupon-dialog.component.ts +++ b/projects/storefrontlib/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/projects/storefrontlib/cms-components/product/stock-notification/stock-notification-dialog/stock-notification-dialog.component.ts b/projects/storefrontlib/cms-components/product/stock-notification/stock-notification-dialog/stock-notification-dialog.component.ts index f53ae7b89e3..158c22fd7fe 100644 --- a/projects/storefrontlib/cms-components/product/stock-notification/stock-notification-dialog/stock-notification-dialog.component.ts +++ b/projects/storefrontlib/cms-components/product/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/projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.ts b/projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.ts index 2f14eb64594..37cf44bdac3 100644 --- a/projects/storefrontlib/shared/components/anonymous-consents-dialog/anonymous-consent-dialog.component.ts +++ b/projects/storefrontlib/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 index 6bcd3298927..c4fecd9c179 100644 --- 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; }