fix: (CXSPA-944) - Repeated page title fix

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

@@ -364,6 +364,12 @@ export interface FeatureTogglesInterface {
  */
  a11yLinkBtnsToTertiaryBtns?: boolean;
 
+ /**
+ * Aria-live inside the 'BreadcrumbComponent' will be toggled based on the active element.
+ * This removes the repeated announcement of the page title.
+ */
+ a11yRepeatedPageTitleFix?: boolean;
+
  /**
  * When enabled, styles for the `cx-bottom-header-slot` class will be applied. These styles are necessary to display
  * customization buttons in the BottomHeaderSlot in SmartEdit.
@@ -429,5 +435,6 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
  a11yDisabledCouponAndQuickOrderActionButtonsInsteadOfRequiredFields: false,
  a11yFacetsDialogFocusHandling: false,
  a11yLinkBtnsToTertiaryBtns: false,
+ a11yRepeatedPageTitleFix: false,
  cmsBottomHeaderSlotUsingFlexStyles: false,
 };

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

@@ -327,6 +327,7 @@ if (environment.estimatedDeliveryDate) {
  true,
  a11yFacetsDialogFocusHandling: true,
  a11yLinkBtnsToTertiaryBtns: true,
+ a11yRepeatedPageTitleFix: true,
  cmsBottomHeaderSlotUsingFlexStyles: true,
  };
  return appFeatureToggles;

projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html

@@ -8,7 +8,9 @@
 
 <!-- TODO: Remove feature flag next major release -->
 <ng-container *cxFeature="'a11yPreventSRFocusOnHiddenElements'">
- <h1 aria-live="polite" aria-atomic="true">{{ title$ | async }}</h1>
+ <h1 [attr.aria-live]="ariaLiveEnabled ? 'polite' : null">
+ {{ title$ | async }}
+ </h1>
 </ng-container>
 <ng-container *cxFeature="'!a11yPreventSRFocusOnHiddenElements'">
  <!-- Hidden page title for Screen Reader initialized after view to avoid old values -->

projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts

@@ -4,15 +4,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ inject,
+ OnDestroy,
+ OnInit,
+} from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import {
  CmsBreadcrumbsComponent,
+ FeatureConfigService,
  PageMetaService,
  TranslationService,
  useFeatureStyles,
 } from '@spartacus/core';
-import { combineLatest, Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { combineLatest, Observable, Subscription } from 'rxjs';
+import { filter, map } from 'rxjs/operators';
 import { CmsComponentData } from '../../../cms-structure/page/model/cms-component-data';
 import { PageTitleComponent } from '../page-header/page-title.component';
 
@@ -21,8 +29,17 @@ import { PageTitleComponent } from '../page-header/page-title.component';
  templateUrl: './breadcrumb.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class BreadcrumbComponent extends PageTitleComponent implements OnInit {
+export class BreadcrumbComponent
+ extends PageTitleComponent
+ implements OnInit, OnDestroy
+{
  crumbs$: Observable<any[]>;
+ protected subscription = new Subscription();
+
+ private router = inject(Router);
+ private featureConfigService = inject(FeatureConfigService);
+
+ ariaLiveEnabled = true;
 
  constructor(
  public component: CmsComponentData<CmsBreadcrumbsComponent>,
@@ -36,6 +53,19 @@ export class BreadcrumbComponent extends PageTitleComponent implements OnInit {
  ngOnInit(): void {
  super.ngOnInit();
  this.setCrumbs();
+ if (this.featureConfigService.isEnabled('a11yRepeatedPageTitleFix')) {
+ this.subscription.add(
+ this.router.events
+ .pipe(filter((e) => e instanceof NavigationEnd))
+ .subscribe(() => {
+ if (document.activeElement === document.body) {
+ this.ariaLiveEnabled = false;
+ return;
+ }
+ this.ariaLiveEnabled = true;
+ })
+ );
+ }
  }
 
  private setCrumbs(): void {
@@ -48,4 +78,8 @@ export class BreadcrumbComponent extends PageTitleComponent implements OnInit {
  )
  );
  }
+
+ ngOnDestroy(): void {
+ this.subscription.unsubscribe();
+ }
 }