fix: (CXSPA-9643) - Product search page automated a11y tests (#20149)

Author: Pio-Bar

projects/storefrontapp-e2e-cypress/cypress/e2e/accessibility/product-search-page.a11y-e2e.cy.ts

@@ -0,0 +1,49 @@
+/*
+ * SPDX-FileCopyrightText: 2025 SAP Spartacus team <spartacus-team@sap.com>
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { viewportContext } from '../../helpers/viewport-context';
+
+describe('Product Search Page', { testIsolation: false }, () => {
+  beforeEach(() => {
+    cy.a11yContinuumSetup();
+  });
+
+  it('Searchbar', () => {
+    cy.visit('/search/camera');
+    cy.get('cx-product-list-item');
+    cy.get('cx-searchbox input').type('cam').get('.products a');
+    cy.get('cx-searchbox').a11yRunContinuumTest();
+    cy.get('body').click(0, 0);
+  });
+
+  it('Page content with list view', () => {
+    cy.get('cx-product-list').a11yRunContinuumTest();
+  });
+
+  it('Grid view', () => {
+    cy.get('button.cx-product-grid').first().click();
+    cy.get('#product-results-list').a11yRunContinuumTest();
+  });
+
+  it('Sorting dropdown', () => {
+    cy.get('cx-sorting').first().click();
+    cy.get('ng-dropdown-panel').a11yRunContinuumTest();
+  });
+
+  it('Facets', () => {
+    cy.visit('/search/camera?query=camera:relevance:availableInStores:Chiba');
+    cy.get('cx-active-facets a');
+    cy.get('cx-product-facet-navigation').a11yRunContinuumTest();
+  });
+
+  viewportContext(['mobile'], () => {
+    it('Facets Modal', () => {
+      cy.get('cx-product-facet-navigation .dialog-trigger').click();
+      cy.get('cx-facet-list .value');
+      cy.get('.dialog.active').a11yRunContinuumTest();
+    });
+  });
+});

projects/storefrontlib/cms-components/content/tab/tab.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="mode$ | async as mode">
   <!-- Tab List is the list of buttons to open tabs -->
   <div
-    [attr.role]="mode === TAB_MODE.ACCORDIAN ? 'presentation' : 'tablist'"
+    [attr.role]="mode === TAB_MODE.ACCORDIAN ? 'null' : 'tablist'"
     [attr.aria-label]="config.label | cxTranslate"
     [class]="mode.toLowerCase()"
   >

projects/storefrontlib/cms-components/content/tab/tab.component.spec.ts

@@ -352,7 +352,7 @@ describe('TabComponent', () => {
 
     it('should display menu buttons for tabs', () => {
       const accordianEl = document.querySelector('div[class="accordian"]');
-      expect(accordianEl?.role).toEqual('presentation');
+      expect(accordianEl?.role).toEqual('null');
       const buttonEls = document.querySelectorAll('button[role="button"]');
       expect(buttonEls.length).toEqual(4);
 

projects/storefrontlib/cms-components/navigation/search-box/search-box.component.html

@@ -134,7 +134,6 @@
   class="results"
   id="results"
   (click)="close($any($event), true)"
-  role="listbox"
   [class.no-headers]="
     !isEnabledFeature(searchBoxFeatures.TRENDING_SEARCHES_FEATURE) &&
     !isEnabledFeature(searchBoxFeatures.SEARCH_BOX_V2)
@@ -173,7 +172,7 @@ <h3>
         !isEnabledFeature(searchBoxFeatures.SEARCH_BOX_V2)
       "
     >
-      <li *ngFor="let suggestion of result.suggestions">
+      <li *ngFor="let suggestion of result.suggestions" role="option">
         <a
           role="option"
           [innerHTML]="
@@ -252,7 +251,7 @@ <h3 *ngIf="result.products?.length">
       role="listbox"
       [class.hidden]="hasSearchBoxV2"
     >
-      <li *ngFor="let product of result.products">
+      <li *ngFor="let product of result.products" role="option">
         <a
           role="option"
           [routerLink]="

projects/storefrontlib/cms-components/product/product-list/product-facet-navigation/facet-list/facet-list.component.ts

@@ -5,6 +5,7 @@
  */
 
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   ElementRef,
@@ -15,22 +16,21 @@ import {
   OnInit,
   Optional,
   Output,
+  QueryList,
   Renderer2,
+  TemplateRef,
   ViewChild,
-  inject,
-  AfterViewInit,
   ViewChildren,
-  QueryList,
-  TemplateRef,
+  inject,
 } from '@angular/core';
 import { Facet, FeatureConfigService, useFeatureStyles } from '@spartacus/core';
-import { Tab, TabConfig, TAB_MODE } from '../../../../content/tab/tab.model';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { filter, map, take } from 'rxjs/operators';
 import {
   FocusConfig,
   KeyboardFocusService,
 } from '../../../../../layout/a11y/keyboard-focus/index';
+import { TAB_MODE, Tab, TabConfig } from '../../../../content/tab/tab.model';
 import { ICON_TYPE } from '../../../../misc/icon/icon.model';
 import { FacetGroupCollapsedState, FacetList } from '../facet.model';
 import { FacetComponent } from '../facet/facet.component';
@@ -137,6 +137,7 @@ export class FacetListComponent implements OnInit, OnDestroy, AfterViewInit {
         header: facet.name,
         content: this.facetsRef?.get(i),
         disableBorderFocus: true,
+        id: i,
       }));
 
       this.tabs$.next(tabs);

projects/storefrontlib/cms-components/product/product-list/product-grid-item/product-grid-item.component.html

@@ -7,13 +7,14 @@
     class="cx-product-image"
     [container]="product.images?.PRIMARY"
     format="product"
-    [alt]="product.summary"
+    [alt]="product.name || product.summary"
   ></cx-media>
 </a>
 <a
   [routerLink]="{ cxRoute: 'product', params: product } | cxUrl"
   class="cx-product-name"
   [innerHTML]="product.nameHtml"
+  [id]="product.code + '_header'"
 ></a>
 
 <ng-template [cxOutlet]="ProductListOutlets.ITEM_DETAILS">