From 294e6254c2feb63fef59f28cc03040d07de5a37f Mon Sep 17 00:00:00 2001 From: Ehsan Rezaei Date: Fri, 27 Feb 2026 14:23:48 +0100 Subject: [PATCH] AAE-42804 Adding adf active class to activated link (#11698) * AAE-42804 Adding adf active class to activated link * AAE-42804 Adding unit tests * AAE-42804 Adding aria current attribute --- .../process-filters-cloud.component.html | 2 + .../process-filters-cloud.component.spec.ts | 38 +++++++++++++++++-- .../task-filters-cloud.component.html | 2 + .../task-filters-cloud.component.spec.ts | 37 ++++++++++++++++-- 4 files changed, 71 insertions(+), 8 deletions(-) diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.html b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.html index 955b1b3343..84ae98548f 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.html +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.html @@ -7,6 +7,8 @@ [queryParams]="{ filterId: filter.id }" [attr.data-automation-id]="filter.key + '_filter'" class="adf-process-filters__entry" + [class.adf-active]="filter.id === currentRouteFilterId()" + [attr.aria-current]="filter.id === currentRouteFilterId() ? 'page' : null" [id]="filter.id" [title]="filter.name ?? '' | translate" [attr.aria-label]="filter.name ?? '' | translate" diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.spec.ts index 7a6ad2e62f..4956388ccb 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters/process-filters-cloud.component.spec.ts @@ -72,7 +72,7 @@ describe('ProcessFiltersCloudComponent', () => { queryParamMap: of({ get: (param: string) => { if (param === 'filterId') { - return 'fake-process-filter-id'; + return mockProcessFilters[0].id; } return null; } @@ -205,6 +205,7 @@ describe('ProcessFiltersCloudComponent', () => { describe('Highlight Selected Filter', () => { const allProcessesFilterKey = mockProcessFilters[0].key; + const allProcessesFilterId = mockProcessFilters[0].id; it('should apply active CSS class on filter click', async () => { component.enableNotifications = true; @@ -214,13 +215,42 @@ describe('ProcessFiltersCloudComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const link = fixture.debugElement.query(By.css(`[data-automation-id="${allProcessesFilterKey}_filter"]`)).nativeElement; - expect(link.getAttribute('href')).toBe('/process-list-cloud?filterId=10'); + let link = fixture.debugElement.query(By.css(`[data-automation-id="${allProcessesFilterKey}_filter"]`)).nativeElement; + expect(link.getAttribute('href')).toBe(`/process-list-cloud?filterId=${allProcessesFilterId}`); link.click(); fixture.detectChanges(); await fixture.whenStable(); - expect(router.url).toBe('/process-list-cloud?filterId=10'); + expect(router.url).toBe(`/process-list-cloud?filterId=${allProcessesFilterId}`); + + link = fixture.debugElement.query(By.css(`[data-automation-id="${allProcessesFilterKey}_filter"]`)).nativeElement; + expect(link.classList).toContain('adf-active'); + }); + + it('should add aria-current attribute with value "page" to the active filter', async () => { + component.enableNotifications = true; + component.appName = 'mock-app-name'; + const appNameChange = new SimpleChange(null, 'mock-app-name', true); + + component.ngOnChanges({ appName: appNameChange }); + fixture.detectChanges(); + await fixture.whenStable(); + + const link = fixture.debugElement.query(By.css(`[data-automation-id="${allProcessesFilterKey}_filter"]`)).nativeElement; + expect(link.getAttribute('aria-current')).toBe('page'); + }); + + it('should not have aria-current attribute when filter is not active', async () => { + component.enableNotifications = true; + component.appName = 'mock-app-name'; + const appNameChange = new SimpleChange(null, 'mock-app-name', true); + + component.ngOnChanges({ appName: appNameChange }); + fixture.detectChanges(); + await fixture.whenStable(); + + const link = fixture.debugElement.query(By.css(`[data-automation-id="${mockProcessFilters[1].key}_filter"]`)).nativeElement; + expect(link.getAttribute('aria-current')).toBeNull(); }); }); }); diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.html index 909caffa19..095def18b7 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.html +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.html @@ -7,6 +7,8 @@ [queryParams]="{ filter: filter.id }" [attr.data-automation-id]="filter.key + '_filter'" class="adf-task-filters__entry" + [class.adf-active]="filter.id === currentRouteFilterId()" + [attr.aria-current]="filter.id === currentRouteFilterId() ? 'page' : null" [id]="filter.id" [title]="filter.name | translate" [attr.aria-label]="filter.name | translate" diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.spec.ts index d6162fd0bb..f449ded05b 100644 --- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters/task-filters-cloud.component.spec.ts @@ -64,7 +64,7 @@ describe('TaskFiltersCloudComponent', () => { queryParamMap: of({ get: (param: string) => { if (param === 'filter') { - return 'fake-task-filter-id'; + return defaultTaskFiltersMock[0].id; } return null; } @@ -601,7 +601,7 @@ describe('TaskFiltersCloudComponent', () => { }); describe('Highlight Selected Filter', () => { - const assignedTasksFilterKey = defaultTaskFiltersMock[1].key; + const assignedTasksFilterKey = defaultTaskFiltersMock[0].key; it('Should highlight task filter on filter click', async () => { getTaskListFiltersSpy.and.returnValue(of(defaultTaskFiltersMock)); @@ -611,12 +611,41 @@ describe('TaskFiltersCloudComponent', () => { fixture.detectChanges(); await fixture.whenStable(); - const filterLink = fixture.debugElement.query(By.css(`[data-automation-id="${assignedTasksFilterKey}_filter"]`)); + let filterLink = fixture.debugElement.query(By.css(`[data-automation-id="${assignedTasksFilterKey}_filter"]`)); filterLink.nativeElement.click(); fixture.detectChanges(); await fixture.whenStable(); - expect(router.url).toBe('/task-list-cloud?filter=2'); + expect(router.url).toBe(`/task-list-cloud?filter=${defaultTaskFiltersMock[0].id}`); + + filterLink = fixture.debugElement.query(By.css(`[data-automation-id="${assignedTasksFilterKey}_filter"]`)); + expect(filterLink.nativeElement.classList).toContain('adf-active'); + }); + + it('should add aria-current attribute with value "page" to the active filter', async () => { + getTaskListFiltersSpy.and.returnValue(of(defaultTaskFiltersMock)); + component.appName = 'mock-app-name'; + const appNameChange = new SimpleChange(null, 'mock-app-name', true); + + component.ngOnChanges({ appName: appNameChange }); + fixture.detectChanges(); + await fixture.whenStable(); + + const filterLink = fixture.debugElement.query(By.css(`[data-automation-id="${assignedTasksFilterKey}_filter"]`)); + expect(filterLink.nativeElement.getAttribute('aria-current')).toBe('page'); + }); + + it('should not have aria-current attribute when filter is not active', async () => { + getTaskListFiltersSpy.and.returnValue(of(defaultTaskFiltersMock)); + component.appName = 'mock-app-name'; + const appNameChange = new SimpleChange(null, 'mock-app-name', true); + + component.ngOnChanges({ appName: appNameChange }); + fixture.detectChanges(); + await fixture.whenStable(); + + const otherFilterLink = fixture.debugElement.query(By.css(`[data-automation-id="${defaultTaskFiltersMock[1].key}_filter"]`)); + expect(otherFilterLink.nativeElement.getAttribute('aria-current')).toBeNull(); }); }); });