diff --git a/feature-libs/cart/saved-cart/components/add-to-saved-cart/add-to-saved-cart.component.ts b/feature-libs/cart/saved-cart/components/add-to-saved-cart/add-to-saved-cart.component.ts index 125fe8f05e4..e0f9f4c248c 100644 --- a/feature-libs/cart/saved-cart/components/add-to-saved-cart/add-to-saved-cart.component.ts +++ b/feature-libs/cart/saved-cart/components/add-to-saved-cart/add-to-saved-cart.component.ts @@ -14,9 +14,9 @@ import { ViewContainerRef, } from '@angular/core'; import { ActiveCartFacade, Cart } from '@spartacus/cart/base/root'; -import { AuthService, RoutingService } from '@spartacus/core'; -import { LaunchDialogService, LAUNCH_CALLER } from '@spartacus/storefront'; -import { combineLatest, Observable, Subscription } from 'rxjs'; +import { AuthService, RoutingService, useFeatureStyles } from '@spartacus/core'; +import { LAUNCH_CALLER, LaunchDialogService } from '@spartacus/storefront'; +import { Observable, Subscription, combineLatest } from 'rxjs'; import { map, take, tap } from 'rxjs/operators'; @Component({ @@ -43,7 +43,9 @@ export class AddToSavedCartComponent implements OnInit, OnDestroy { protected routingService: RoutingService, protected vcr: ViewContainerRef, protected launchDialogService: LaunchDialogService - ) {} + ) { + useFeatureStyles('a11yExpandedFocusIndicator'); + } ngOnInit(): void { this.cart$ = combineLatest([ diff --git a/feature-libs/cart/saved-cart/styles/_add-to-saved-cart.scss b/feature-libs/cart/saved-cart/styles/_add-to-saved-cart.scss index 2cd12a5a119..85c0741abfd 100644 --- a/feature-libs/cart/saved-cart/styles/_add-to-saved-cart.scss +++ b/feature-libs/cart/saved-cart/styles/_add-to-saved-cart.scss @@ -20,6 +20,24 @@ cx-add-to-saved-cart { } } + // TODO: (CXSPA-5709) Remove feature flag next major + @include forFeature('a11yExpandedFocusIndicator') { + .cx-action-link { + &:nth-child(n + 2) { + margin-inline-end: unset; + position: relative; + margin-inline-start: 1rem; + &:before { + display: unset; + position: absolute; + left: -0.75rem; + margin-inline-start: unset; + margin-inline-end: unset; + } + } + } + } + @include media-breakpoint-up(sm) { justify-content: flex-end; } diff --git a/projects/storefrontapp-e2e-cypress/cypress/helpers/product-search.ts b/projects/storefrontapp-e2e-cypress/cypress/helpers/product-search.ts index f6f6c6a8ffe..86c6bbc4de9 100644 --- a/projects/storefrontapp-e2e-cypress/cypress/helpers/product-search.ts +++ b/projects/storefrontapp-e2e-cypress/cypress/helpers/product-search.ts @@ -13,7 +13,7 @@ export const firstProductItemSelector = `${productItemSelector}:first`; export const pageLinkSelector = 'cx-pagination a.current'; export const sortingOptionSelector = 'cx-sorting .ng-select:first'; export const firstProductPriceSelector = `${firstProductItemSelector} .cx-product-price`; -export const firstProductNameSelector = `${firstProductItemSelector} a.cx-product-name`; +export const firstProductNameSelector = `${firstProductItemSelector} .cx-product-name`; export const searchUrlPrefix = `${Cypress.env('OCC_PREFIX')}/${Cypress.env( 'BASE_SITE' )}/products/search`; @@ -111,9 +111,7 @@ export function searchResult() { 'have.length', PRODUCT_LISTING.PRODUCTS_PER_PAGE ); - cy.get(firstProductItemSelector).within(() => { - cy.get('a.cx-product-name').should('be.visible'); - }); + cy.get(firstProductNameSelector).should('be.visible'); }); } diff --git a/projects/storefrontapp/src/app/app.module.ts b/projects/storefrontapp/src/app/app.module.ts index 0c271f6731b..f1a977f1a6a 100644 --- a/projects/storefrontapp/src/app/app.module.ts +++ b/projects/storefrontapp/src/app/app.module.ts @@ -97,6 +97,7 @@ if (!environment.production) { a11yNavigationUiKeyboardControls: true, a11yOrderConfirmationHeadingOrder: true, a11yStarRating: true, + a11yExpandedFocusIndicator: true, a11yCheckoutDeliveryFocus: true, }, }), diff --git a/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.html b/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.html index 20c222341df..ab33d434cab 100644 --- a/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.html +++ b/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.html @@ -19,12 +19,24 @@
- -

- + +

+ +

+ + + + + +

+ + { MockStarRatingComponent, MockUrlPipe, MockCxIconComponent, - MockFeatureLevelDirective, + MockFeatureDirective, MockOutletDirective, ], providers: [ diff --git a/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.ts b/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.ts index 122c9c501de..46262deaba8 100644 --- a/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.ts +++ b/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.ts @@ -11,6 +11,7 @@ import { OnChanges, SimpleChanges, } from '@angular/core'; +import { useFeatureStyles } from '@spartacus/core'; import { ProductListOutlets } from '../../product-outlets.model'; import { ProductListItemContextSource } from '../model/product-list-item-context-source.model'; import { ProductListItemContext } from '../model/product-list-item-context.model'; @@ -33,7 +34,9 @@ export class ProductListItemComponent implements OnChanges { constructor( protected productListItemContextSource: ProductListItemContextSource - ) {} + ) { + useFeatureStyles('a11yExpandedFocusIndicator'); + } ngOnChanges(changes?: SimpleChanges): void { if (changes?.product) { diff --git a/projects/storefrontlib/cms-components/product/product-list/product-list.module.ts b/projects/storefrontlib/cms-components/product/product-list/product-list.module.ts index 2c2d02a28ea..8151f03a6c1 100644 --- a/projects/storefrontlib/cms-components/product/product-list/product-list.module.ts +++ b/projects/storefrontlib/cms-components/product/product-list/product-list.module.ts @@ -9,6 +9,7 @@ import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { CmsConfig, + FeaturesConfigModule, I18nModule, provideDefaultConfig, UrlModule, @@ -49,6 +50,7 @@ import { ProductViewComponent } from './product-view/product-view.component'; SpinnerModule, StarRatingModule, UrlModule, + FeaturesConfigModule, ], providers: [ provideDefaultConfig(defaultViewConfig), diff --git a/projects/storefrontstyles/scss/components/product/list/_product-list-item.scss b/projects/storefrontstyles/scss/components/product/list/_product-list-item.scss index e84316dfff4..ffadc4f074d 100644 --- a/projects/storefrontstyles/scss/components/product/list/_product-list-item.scss +++ b/projects/storefrontstyles/scss/components/product/list/_product-list-item.scss @@ -45,6 +45,26 @@ } } + // TODO: (CXSPA-5709) Remove feature flag next major + @include forFeature('a11yExpandedFocusIndicator') { + .cx-product-name { + a { + margin: 0 0 3px 0; + color: var(--cx-color-text); + text-decoration: none; + @include type('5'); + @include media-breakpoint-down(sm) { + text-align: center; + min-height: 48px; + } + + &:hover { + color: var(--cx-color-primary); + } + } + } + } + .cx-product-price { @include type('3'); text-align: start;