refactor: (CXSPA-13724) remove feature toggle a11yConfiguratorOverviewHeaderVPC

core-libs/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -67,12 +67,6 @@ export interface FeatureTogglesInterface {
    */
   productReviewCharactersLeft?: boolean;
 
-  /**
-   * Ensures on configurator overview page, that group titles are recognized as heading
-   * in VPC mode when navigating with the 'H' key.
-   */
-  a11yConfiguratorOverviewHeaderVPC?: boolean;
-
   /**
    * Fixes accessibility issue in FutureStockAccordionComponent where aria-controls
    * references a non-existent element when accordion is collapsed.
@@ -691,7 +685,6 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   readMoreDirective: true,
   productListItemSummaryReadMore: false,
   productReviewCharactersLeft: true,
-  a11yConfiguratorOverviewHeaderVPC: true,
   a11yFutureStockAccordionAriaControls: true,
   consistentSizeProductCards: true,
   disableCxPageSlotMarginAnimation: true,

core-libs/core/src/features-config/feature-toggles/testing/mock-feature-toggles.ts

@@ -52,7 +52,7 @@ export class MockFeatureTogglesController {
    * @example
    * ```ts
    * const toggles = TestBed.inject(MockFeatureTogglesController);
-   * toggles.set('a11yConfiguratorOverviewHeaderVPC', true);
+   * toggles.set('toggleName', true);
    * fixture.detectChanges();
    * ```
    */
@@ -70,7 +70,7 @@ export class MockFeatureTogglesController {
    * @example
    * ```ts
    * const toggles = TestBed.inject(MockFeatureTogglesController);
-   * toggles.reset({ a11yConfiguratorOverviewHeaderVPC: true });
+   * toggles.reset({ toggleName: true });
    * ```
    */
   reset(_toggles?: Partial<FeatureTogglesInterface>): void {

feature-libs/product-configurator/rulebased/components/overview-form/configurator-overview-form.component.html

@@ -35,33 +35,17 @@ <h2>{{ 'configurator.overviewForm.noAttributeHeader' | cxTranslate }}</h2>
       id="{{ getGroupId(idPrefix, group.id) }}"
       [ngClass]="getGroupLevelStyleClasses(level, group.subGroups)"
     >
-      <ng-container *cxFeature="'a11yConfiguratorOverviewHeaderVPC'">
-        <h2>
-          <span class="cx-visually-hidden">
-            {{
-              'configurator.a11y.group'
-                | cxTranslate: { group: group.groupDescription }
-            }}
-          </span>
-          <span aria-hidden="true">
-            {{ group.groupDescription }}
-          </span>
-        </h2>
-      </ng-container>
-      <ng-container *cxFeature="'!a11yConfiguratorOverviewHeaderVPC'">
+      <h2>
         <span class="cx-visually-hidden">
           {{
             'configurator.a11y.group'
-              | cxTranslate
-                : {
-                    group: group.groupDescription,
-                  }
+              | cxTranslate: { group: group.groupDescription }
           }}
         </span>
-        <h2 aria-hidden="true">
-          <span>{{ group.groupDescription }}</span>
-        </h2>
-      </ng-container>
+        <span aria-hidden="true">
+          {{ group.groupDescription }}
+        </span>
+      </h2>
 
       <div
         *ngFor="let attributeOverview of group.attributes; let i = index"

feature-libs/product-configurator/rulebased/components/overview-form/configurator-overview-form.component.spec.ts

@@ -5,7 +5,6 @@ import { RouterState } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
 import {
   FeaturesConfigModule,
-  FeatureToggles,
   I18nTestingModule,
   MockTranslatePipe,
   RoutingService,
@@ -30,10 +29,6 @@ import {
 } from '../price/configurator-price.component';
 import { ConfiguratorStorefrontUtilsService } from '../service/configurator-storefront-utils.service';
 import { ConfiguratorOverviewFormComponent } from './configurator-overview-form.component';
-import {
-  MockFeatureTogglesController,
-  provideMockFeatureToggles,
-} from 'core-libs/core/src/features-config/feature-toggles/testing';
 
 const owner: CommonConfigurator.Owner =
   ConfigurationTestData.productConfiguration.owner;
@@ -163,8 +158,6 @@ class MockDirectionService implements Partial<DirectionService> {
 }
 
 describe('ConfigurationOverviewFormComponent', () => {
-  let featureToggles: MockFeatureTogglesController;
-
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -188,9 +181,6 @@ describe('ConfigurationOverviewFormComponent', () => {
           useClass: MockConfiguratorStorefrontUtilsService,
         },
         { provide: DirectionService, useClass: MockDirectionService },
-        provideMockFeatureToggles({
-          a11yConfiguratorOverviewHeaderVPC: false,
-        }),
       ],
     })
       .overrideComponent(ConfiguratorOverviewFormComponent, {
@@ -209,7 +199,6 @@ describe('ConfigurationOverviewFormComponent', () => {
     overviewObservable = null;
     defaultRouterStateObservable = of(mockRouterState);
     defaultConfigObservable = of(configCreate2);
-    featureToggles = TestBed.inject(MockFeatureTogglesController);
   });
 
   it('should create component', () => {
@@ -480,14 +469,6 @@ describe('ConfigurationOverviewFormComponent', () => {
   });
 
   describe('Accessibility', () => {
-    function setFeatureToggle(
-      featureToggle: keyof FeatureToggles,
-      value: boolean
-    ) {
-      featureToggles.set(featureToggle, value);
-      initialize();
-    }
-
     function expectSpan(
       container: HTMLElement,
       selector: string,
@@ -513,8 +494,7 @@ describe('ConfigurationOverviewFormComponent', () => {
     });
 
     it("should contain action span element with class name 'cx-visually-hidden' within a H2 section, that hides span element content on the UI", () => {
-      setFeatureToggle('a11yConfiguratorOverviewHeaderVPC', true);
-
+      initialize();
       const h2s = htmlElem.querySelectorAll('h2');
       expectSpan(
         h2s[0] as HTMLElement,
@@ -523,18 +503,6 @@ describe('ConfigurationOverviewFormComponent', () => {
       );
       expectSpan(h2s[0] as HTMLElement, 'span[aria-hidden="true"]', 'Group 1');
     });
-
-    it("should contain action span element with class name 'cx-visually-hidden' that hides span element content on the UI", () => {
-      setFeatureToggle('a11yConfiguratorOverviewHeaderVPC', false);
-
-      const divs = htmlElem.querySelectorAll('div.cx-group.topLevel');
-      expectSpan(
-        divs[0] as HTMLElement,
-        'span.cx-visually-hidden',
-        'configurator.a11y.group group:Group 1'
-      );
-      expectSpan(divs[0] as HTMLElement, 'h2[aria-hidden="true"]', 'Group 1');
-    });
   });
 
   describe('getGroupLevelStyleClasses', () => {

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -310,7 +310,6 @@ if (environment.cpq) {
         readMoreDirective: true,
         productListItemSummaryReadMore: true,
         productReviewCharactersLeft: true,
-        a11yConfiguratorOverviewHeaderVPC: true,
         a11yFutureStockAccordionAriaControls: true,
         consistentSizeProductCards: true,
         disableCxPageSlotMarginAnimation: true,