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 index 62cd08e4783..6ccbb73d494 100644 --- 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 = { 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 index 066c2bc8c77..d8bc10c7709 100644 --- 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 index 0b6bc95cd89..39ad7ed124a 100644 --- a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html +++ b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html @@ -8,7 +8,9 @@ -

{{ title$ | async }}

+

+ {{ title$ | async }} +

diff --git a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts index dae15ce5392..3a2892af11e 100644 --- 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; + protected router = inject(Router); + private featureConfigService = inject(FeatureConfigService); + + ariaLive$: Observable = 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, protected pageMetaService: PageMetaService,