fix: (CXSPA-1047) - stop focus indicator from expanding (#18277)

Co-authored-by: Piotr Bartkowiak <[email protected]>
SAP · Mar 27, 2024 · 07506bb · 07506bb
1 parent d0555a1
commit 07506bb
Show file tree

Hide file tree

Showing 9 changed files with 73 additions and 17 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -97,6 +97,7 @@ if (!environment.production) {
         a11yNavigationUiKeyboardControls: true,
         a11yOrderConfirmationHeadingOrder: true,
         a11yStarRating: true,
+        a11yExpandedFocusIndicator: true,
         a11yCheckoutDeliveryFocus: true,
       },
     }),

diff --git a/...ib/cms-components/product/product-list/product-list-item/product-list-item.component.html b/...ib/cms-components/product/product-list/product-list-item/product-list-item.component.html
@@ -19,12 +19,24 @@
     </a>
   </div>
   <div class="col-12 col-md-8">
-    <a
-      [routerLink]="{ cxRoute: 'product', params: product } | cxUrl"
-      class="cx-product-name"
-    >
-      <h2 [innerHtml]="product.nameHtml"></h2>
-    </a>
+    <ng-container *cxFeature="'a11yExpandedFocusIndicator'">
+      <h2 class="cx-product-name">
+        <a
+          [routerLink]="{ cxRoute: 'product', params: product } | cxUrl"
+          [innerHtml]="product.nameHtml"
+        ></a>
+      </h2>
+    </ng-container>
+
+    <!-- TODO: (CXSPA-5709) Remove feature flag next major -->
+    <ng-container *cxFeature="'!a11yExpandedFocusIndicator'">
+      <a
+        [routerLink]="{ cxRoute: 'product', params: product } | cxUrl"
+        class="cx-product-name"
+      >
+        <h2 [innerHtml]="product.nameHtml"></h2>
+      </a>
+    </ng-container>
 
     <ng-template [cxOutlet]="ProductListOutlets.ITEM_DETAILS">
       <cx-star-rating

diff --git a/...cms-components/product/product-list/product-list-item/product-list-item.component.spec.ts b/...cms-components/product/product-list/product-list-item/product-list-item.component.spec.ts
@@ -16,7 +16,7 @@ import {
   RoutingService,
 } from '@spartacus/core';
 import { OutletDirective, OutletModule } from '@spartacus/storefront';
-import { MockFeatureLevelDirective } from '../../../../shared/test/mock-feature-level-directive';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { ProductListItemContextSource } from '../model/product-list-item-context-source.model';
 import { ProductListItemContext } from '../model/product-list-item-context.model';
 import { ProductListItemComponent } from './product-list-item.component';
@@ -105,7 +105,7 @@ describe('ProductListItemComponent in product-list', () => {
           MockStarRatingComponent,
           MockUrlPipe,
           MockCxIconComponent,
-          MockFeatureLevelDirective,
+          MockFeatureDirective,
           MockOutletDirective,
         ],
         providers: [

diff --git a/...tlib/cms-components/product/product-list/product-list-item/product-list-item.component.ts b/...tlib/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
@@ -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(<ViewConfig>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
@@ -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;