From 4a09cb0489e5b2d257bdb1aeae06c04fb411b14b Mon Sep 17 00:00:00 2001 From: D026976 Date: Fri, 3 Jul 2026 08:29:55 +0200 Subject: [PATCH 1/2] CXSPA-13724 remove feature toggle a11yConfiguratorOverviewHeaderVPC --- .../feature-toggles/config/feature-toggles.ts | 7 ---- .../testing/mock-feature-toggles.ts | 4 +-- .../configurator-overview-form.component.html | 28 ++++------------ ...nfigurator-overview-form.component.spec.ts | 33 ------------------- .../spartacus/spartacus-features.module.ts | 1 - 5 files changed, 8 insertions(+), 65 deletions(-) diff --git a/core-libs/core/src/features-config/feature-toggles/config/feature-toggles.ts b/core-libs/core/src/features-config/feature-toggles/config/feature-toggles.ts index 5e495ab33e9..1fb8a1e0c68 100644 --- a/core-libs/core/src/features-config/feature-toggles/config/feature-toggles.ts +++ b/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 = { readMoreDirective: true, productListItemSummaryReadMore: false, productReviewCharactersLeft: true, - a11yConfiguratorOverviewHeaderVPC: true, a11yFutureStockAccordionAriaControls: true, consistentSizeProductCards: true, disableCxPageSlotMarginAnimation: true, diff --git a/core-libs/core/src/features-config/feature-toggles/testing/mock-feature-toggles.ts b/core-libs/core/src/features-config/feature-toggles/testing/mock-feature-toggles.ts index fc67a054e1b..d4ae0d3a37e 100644 --- a/core-libs/core/src/features-config/feature-toggles/testing/mock-feature-toggles.ts +++ b/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): void { diff --git a/feature-libs/product-configurator/rulebased/components/overview-form/configurator-overview-form.component.html b/feature-libs/product-configurator/rulebased/components/overview-form/configurator-overview-form.component.html index b801e1ae20a..8928034b272 100644 --- a/feature-libs/product-configurator/rulebased/components/overview-form/configurator-overview-form.component.html +++ b/feature-libs/product-configurator/rulebased/components/overview-form/configurator-overview-form.component.html @@ -35,33 +35,17 @@

{{ 'configurator.overviewForm.noAttributeHeader' | cxTranslate }}

id="{{ getGroupId(idPrefix, group.id) }}" [ngClass]="getGroupLevelStyleClasses(level, group.subGroups)" > - -

- - {{ - 'configurator.a11y.group' - | cxTranslate: { group: group.groupDescription } - }} - - -

- - +

{{ 'configurator.a11y.group' - | cxTranslate - : { - group: group.groupDescription, - } + | cxTranslate: { group: group.groupDescription } }} -

- + +
{ } 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,6 @@ 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); - const h2s = htmlElem.querySelectorAll('h2'); expectSpan( h2s[0] as HTMLElement, @@ -523,18 +502,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', () => { diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index 11822e5778a..1b0ff4cf264 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/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, From 4d07dcc137f6c6d33ef7c8e04c34ac0a4b383562 Mon Sep 17 00:00:00 2001 From: D026976 Date: Fri, 3 Jul 2026 08:40:34 +0200 Subject: [PATCH 2/2] CXSPA-13724 AI review feedback --- .../overview-form/configurator-overview-form.component.spec.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/feature-libs/product-configurator/rulebased/components/overview-form/configurator-overview-form.component.spec.ts b/feature-libs/product-configurator/rulebased/components/overview-form/configurator-overview-form.component.spec.ts index 1666b04c36c..2b05da203b5 100644 --- a/feature-libs/product-configurator/rulebased/components/overview-form/configurator-overview-form.component.spec.ts +++ b/feature-libs/product-configurator/rulebased/components/overview-form/configurator-overview-form.component.spec.ts @@ -494,6 +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", () => { + initialize(); const h2s = htmlElem.querySelectorAll('h2'); expectSpan( h2s[0] as HTMLElement,