From 94577bd2fc6012687ec5144e024e716ff15c3a6c Mon Sep 17 00:00:00 2001 From: Piotr Bartkowiak Date: Tue, 9 Jul 2024 12:57:04 +0200 Subject: [PATCH 1/6] repeated page title fix --- .../feature-toggles/config/feature-toggles.ts | 7 ++++ .../spartacus/spartacus-features.module.ts | 1 + .../breadcrumb/breadcrumb.component.html | 4 +- .../breadcrumb/breadcrumb.component.ts | 42 +++++++++++++++++-- 4 files changed, 49 insertions(+), 5 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 index f6ab7cee2e5..0f8780f5fe4 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 @@ -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. + */ + a11yReapeatedPageTitleFix?: 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 = { a11yDisabledCouponAndQuickOrderActionButtonsInsteadOfRequiredFields: false, a11yFacetsDialogFocusHandling: false, a11yLinkBtnsToTertiaryBtns: false, + a11yReapeatedPageTitleFix: false, cmsBottomHeaderSlotUsingFlexStyles: false, }; diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index 953b5be73d0..515a635a985 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -327,6 +327,7 @@ if (environment.estimatedDeliveryDate) { true, a11yFacetsDialogFocusHandling: true, a11yLinkBtnsToTertiaryBtns: true, + a11yReapeatedPageTitleFix: true, cmsBottomHeaderSlotUsingFlexStyles: true, }; return appFeatureToggles; diff --git a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html index 0b6bc95cd89..0bfeef0600e 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..09456f5ccc5 100644 --- a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts +++ b/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; + protected subscription = new Subscription(); + + private router = inject(Router); + private featureConfigService = inject(FeatureConfigService); + + ariaLiveEnabled = true; constructor( public component: CmsComponentData, @@ -36,6 +53,19 @@ export class BreadcrumbComponent extends PageTitleComponent implements OnInit { ngOnInit(): void { super.ngOnInit(); this.setCrumbs(); + if (this.featureConfigService.isEnabled('a11yReapeatedPageTitleFix')) { + 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(); + } } From e46f0484d7333af2fe43430ee4d50a3ae96edc61 Mon Sep 17 00:00:00 2001 From: Piotr Bartkowiak Date: Tue, 9 Jul 2024 15:11:41 +0200 Subject: [PATCH 2/6] typo --- .../features-config/feature-toggles/config/feature-toggles.ts | 4 ++-- .../src/app/spartacus/spartacus-features.module.ts | 2 +- .../navigation/breadcrumb/breadcrumb.component.ts | 2 +- 3 files changed, 4 insertions(+), 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 index 0f8780f5fe4..c6e10fc0abf 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 @@ -368,7 +368,7 @@ export interface FeatureTogglesInterface { * Aria-live inside the 'BreadcrumbComponent' will be toggled based on the active element. * This removes the repeated announcement of the page title. */ - a11yReapeatedPageTitleFix?: boolean; + a11yRepeatedPageTitleFix?: boolean; /** * When enabled, styles for the `cx-bottom-header-slot` class will be applied. These styles are necessary to display @@ -435,6 +435,6 @@ export const defaultFeatureToggles: Required = { a11yDisabledCouponAndQuickOrderActionButtonsInsteadOfRequiredFields: false, a11yFacetsDialogFocusHandling: false, a11yLinkBtnsToTertiaryBtns: false, - a11yReapeatedPageTitleFix: false, + a11yRepeatedPageTitleFix: false, cmsBottomHeaderSlotUsingFlexStyles: false, }; diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts index 515a635a985..01b5ad1b1c2 100644 --- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts +++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts @@ -327,7 +327,7 @@ if (environment.estimatedDeliveryDate) { true, a11yFacetsDialogFocusHandling: true, a11yLinkBtnsToTertiaryBtns: true, - a11yReapeatedPageTitleFix: true, + a11yRepeatedPageTitleFix: true, cmsBottomHeaderSlotUsingFlexStyles: true, }; return appFeatureToggles; diff --git a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts index 09456f5ccc5..cd29f207c4b 100644 --- a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts +++ b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts @@ -53,7 +53,7 @@ export class BreadcrumbComponent ngOnInit(): void { super.ngOnInit(); this.setCrumbs(); - if (this.featureConfigService.isEnabled('a11yReapeatedPageTitleFix')) { + if (this.featureConfigService.isEnabled('a11yRepeatedPageTitleFix')) { this.subscription.add( this.router.events .pipe(filter((e) => e instanceof NavigationEnd)) From e142d29f9a885445e5ebbf8d9740943637e5abc8 Mon Sep 17 00:00:00 2001 From: Piotr Bartkowiak Date: Thu, 11 Jul 2024 12:53:14 +0200 Subject: [PATCH 3/6] CR changes --- .../breadcrumb/breadcrumb.component.html | 2 +- .../breadcrumb/breadcrumb.component.ts | 33 +++++-------------- 2 files changed, 10 insertions(+), 25 deletions(-) diff --git a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html index 0bfeef0600e..bfdf5ace7f3 100644 --- a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html +++ b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html @@ -8,7 +8,7 @@ -

+

{{ 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 cd29f207c4b..cbdbcdf32a5 100644 --- a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts +++ b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts @@ -8,7 +8,6 @@ import { ChangeDetectionStrategy, Component, inject, - OnDestroy, OnInit, } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; @@ -19,7 +18,7 @@ import { TranslationService, useFeatureStyles, } from '@spartacus/core'; -import { combineLatest, Observable, Subscription } from 'rxjs'; +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'; @@ -29,18 +28,13 @@ import { PageTitleComponent } from '../page-header/page-title.component'; templateUrl: './breadcrumb.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) -export class BreadcrumbComponent - extends PageTitleComponent - implements OnInit, OnDestroy -{ +export class BreadcrumbComponent extends PageTitleComponent implements OnInit { crumbs$: Observable; - protected subscription = new Subscription(); + ariaLiveDisabled$: Observable = of(false); - private router = inject(Router); + protected router = inject(Router); private featureConfigService = inject(FeatureConfigService); - ariaLiveEnabled = true; - constructor( public component: CmsComponentData, protected pageMetaService: PageMetaService, @@ -54,16 +48,11 @@ export class BreadcrumbComponent 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; - }) + this.ariaLiveDisabled$ = this.router.events.pipe( + filter((e) => e instanceof NavigationEnd), + map(() => { + return document.activeElement === document.body; + }) ); } } @@ -78,8 +67,4 @@ export class BreadcrumbComponent ) ); } - - ngOnDestroy(): void { - this.subscription.unsubscribe(); - } } From 6ff07d46c67179abf9540cb082a8d459f53fd9c8 Mon Sep 17 00:00:00 2001 From: Piotr Bartkowiak Date: Fri, 12 Jul 2024 13:05:42 +0200 Subject: [PATCH 4/6] CR changes --- .../navigation/breadcrumb/breadcrumb.component.html | 2 +- .../navigation/breadcrumb/breadcrumb.component.ts | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.html index bfdf5ace7f3..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,7 @@ -

+

{{ 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 cbdbcdf32a5..4720a28537f 100644 --- a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts +++ b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts @@ -30,7 +30,7 @@ import { PageTitleComponent } from '../page-header/page-title.component'; }) export class BreadcrumbComponent extends PageTitleComponent implements OnInit { crumbs$: Observable; - ariaLiveDisabled$: Observable = of(false); + ariaLive$: Observable = of(true); protected router = inject(Router); private featureConfigService = inject(FeatureConfigService); @@ -48,10 +48,10 @@ export class BreadcrumbComponent extends PageTitleComponent implements OnInit { super.ngOnInit(); this.setCrumbs(); if (this.featureConfigService.isEnabled('a11yRepeatedPageTitleFix')) { - this.ariaLiveDisabled$ = this.router.events.pipe( + this.ariaLive$ = this.router.events.pipe( filter((e) => e instanceof NavigationEnd), map(() => { - return document.activeElement === document.body; + return document.activeElement !== document.body; }) ); } From 603be869d288491f28a3335a6e88f2d9748b5b0a Mon Sep 17 00:00:00 2001 From: Piotr Bartkowiak Date: Mon, 15 Jul 2024 11:11:43 +0200 Subject: [PATCH 5/6] CR changes --- .../navigation/breadcrumb/breadcrumb.component.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts index 4720a28537f..24553914623 100644 --- a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts +++ b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts @@ -30,11 +30,21 @@ import { PageTitleComponent } from '../page-header/page-title.component'; }) export class BreadcrumbComponent extends PageTitleComponent implements OnInit { crumbs$: Observable; - ariaLive$: Observable = of(true); 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, From 2cbaf4878d597879176090ed2e3faf161ef35a3a Mon Sep 17 00:00:00 2001 From: Piotr Bartkowiak Date: Mon, 15 Jul 2024 15:43:16 +0200 Subject: [PATCH 6/6] Removed old code --- .../navigation/breadcrumb/breadcrumb.component.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts index 24553914623..3a2892af11e 100644 --- a/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts +++ b/projects/storefrontlib/cms-components/navigation/breadcrumb/breadcrumb.component.ts @@ -57,14 +57,6 @@ export class BreadcrumbComponent extends PageTitleComponent implements OnInit { ngOnInit(): void { super.ngOnInit(); this.setCrumbs(); - if (this.featureConfigService.isEnabled('a11yRepeatedPageTitleFix')) { - this.ariaLive$ = this.router.events.pipe( - filter((e) => e instanceof NavigationEnd), - map(() => { - return document.activeElement !== document.body; - }) - ); - } } private setCrumbs(): void {