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

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

@@ -379,6 +379,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;
+
  /**
  * In OCC cart requests, it puts parameters of a cart name and cart description
  * into a request body, instead of query params.
@@ -454,6 +460,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
  a11yFormErrorMuteIcon: false,
  a11yCxMessageFocus: false,
  a11yLinkBtnsToTertiaryBtns: false,
+ a11yRepeatedPageTitleFix: false,
  occCartNameAndDescriptionInHttpRequestBody: false,
  cmsBottomHeaderSlotUsingFlexStyles: false,
 };

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

@@ -335,6 +335,7 @@ if (environment.cpq) {
  a11yCxMessageFocus: true,
  occCartNameAndDescriptionInHttpRequestBody: 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]="(ariaLive$ | async) ? '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,22 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ inject,
+ 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, of } 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';
 
@@ -24,6 +31,20 @@ import { PageTitleComponent } from '../page-header/page-title.component';
 export class BreadcrumbComponent extends PageTitleComponent implements OnInit {
  crumbs$: Observable<any[]>;
 
+ protected router = inject(Router);
+ private featureConfigService = inject(FeatureConfigService);
+
+ ariaLive$: Observable<boolean> = this.featureConfigService.isEnabled(
+ 'a11yRepeatedPageTitleFix'
+ )
+ ? this.router.events.pipe(
+ filter((e) => e instanceof NavigationEnd),
+ map(() => {
+ return document.activeElement !== document.body;
+ })
+ )
+ : of(true);
+
  constructor(
  public component: CmsComponentData<CmsBreadcrumbsComponent>,
  protected pageMetaService: PageMetaService,