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

SAP · Aug 19, 2024 · 94ebcd4 · 94ebcd4
1 parent f39d554
commit 94ebcd4
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -438,6 +438,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;
+
  /**
  * 'NgSelectA11yDirective' will now provide a count of items for each availble option.
  * Including this count in aria-label will help screen readers to provide more context to the user.
@@ -540,6 +546,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
  a11yFormErrorMuteIcon: false,
  a11yCxMessageFocus: false,
  a11yLinkBtnsToTertiaryBtns: false,
+ a11yRepeatedPageTitleFix: false,
  a11yDeliveryModeRadiogroup: false,
  a11yNgSelectOptionsCount: false,
  a11yRepeatedCancelOrderError: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -343,6 +343,7 @@ if (environment.cpq) {
  a11yCxMessageFocus: true,
  occCartNameAndDescriptionInHttpRequestBody: true,
  a11yLinkBtnsToTertiaryBtns: true,
+ a11yRepeatedPageTitleFix: true,
  a11yDeliveryModeRadiogroup: true,
  a11yNgSelectOptionsCount: true,
  a11yRepeatedCancelOrderError: true,

diff --git a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html b/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 -->

diff --git a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts b/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,