From a4786b96541a2b9aa0f932c34e14c539647dfe40 Mon Sep 17 00:00:00 2001 From: Luka van der Plas Date: Thu, 15 Aug 2024 11:54:31 +0200 Subject: [PATCH] fix tabs IDs en ARIA roles --- .../document-view.component.spec.ts | 2 +- .../src/app/shared/tabs/tabs.component.html | 25 ++++++++++++------- .../app/shared/tabs/tabs.component.spec.ts | 2 ++ .../src/app/shared/tabs/tabs.component.ts | 13 +++++----- 4 files changed, 26 insertions(+), 16 deletions(-) diff --git a/frontend/src/app/document-view/document-view.component.spec.ts b/frontend/src/app/document-view/document-view.component.spec.ts index 9f1e799ee..f58dea86e 100644 --- a/frontend/src/app/document-view/document-view.component.spec.ts +++ b/frontend/src/app/document-view/document-view.component.spec.ts @@ -39,7 +39,7 @@ describe('DocumentViewComponent', () => { }); it('should create tabs', () => { - const debug = fixture.debugElement.queryAll(By.css('a[role=tab]')); + const debug = fixture.debugElement.queryAll(By.css('[role=tab]')); expect(debug.length).toBe(2); expect(debug[0].attributes['id']).toBe('tab-speech'); expect(debug[1].attributes['id']).toBe('tab-scan'); diff --git a/frontend/src/app/shared/tabs/tabs.component.html b/frontend/src/app/shared/tabs/tabs.component.html index 854c2bc58..738ef3020 100644 --- a/frontend/src/app/shared/tabs/tabs.component.html +++ b/frontend/src/app/shared/tabs/tabs.component.html @@ -1,20 +1,27 @@
-
+
diff --git a/frontend/src/app/shared/tabs/tabs.component.spec.ts b/frontend/src/app/shared/tabs/tabs.component.spec.ts index 24182bc1f..792c19c5f 100644 --- a/frontend/src/app/shared/tabs/tabs.component.spec.ts +++ b/frontend/src/app/shared/tabs/tabs.component.spec.ts @@ -16,9 +16,11 @@ describe('TabsComponent', () => { component = fixture.componentInstance; component.tabs = [{ label: 'First tab', + elementId: 'tab-1', id: 1 }, { label: 'Second tab', + elementId: 'tab-2', id: 2 }]; fixture.detectChanges(); diff --git a/frontend/src/app/shared/tabs/tabs.component.ts b/frontend/src/app/shared/tabs/tabs.component.ts index 3908a227a..34ee33ede 100644 --- a/frontend/src/app/shared/tabs/tabs.component.ts +++ b/frontend/src/app/shared/tabs/tabs.component.ts @@ -6,11 +6,12 @@ import * as _ from 'lodash'; import { TabPanelDirective } from './tab-panel.directive'; import { IconDefinition } from '@fortawesome/free-solid-svg-icons'; import { modulo } from '@utils/utils'; -import { SlugifyPipe } from '../pipes/slugify.pipe'; +import { SlugifyPipe } from '@shared/pipes/slugify.pipe'; interface Tab { label: string; // display name id: string | number; + elementId: string; icon?: IconDefinition; }; @@ -34,6 +35,7 @@ export class TabsComponent implements AfterContentInit { ngAfterContentInit(): void { this.tabs = this.tabPanels.map(tabPanel => ({ id: tabPanel.id, + elementId: this.tabLinkId(tabPanel.id), label: tabPanel.title, icon: tabPanel.icon, })); @@ -48,8 +50,7 @@ export class TabsComponent implements AfterContentInit { cycleTab(event: KeyboardEvent) { const target = event.target as Element; - const id = target.id; - const tabIndex = this.tabs.findIndex(tab => this.tabLinkId(tab.id) === id); + const tabIndex = this.tabs.findIndex(tab => tab.elementId === target.id); const keyBindings = { ArrowLeft: -1, @@ -59,14 +60,14 @@ export class TabsComponent implements AfterContentInit { const shift = keyBindings[event.key]; const newIndex = modulo(tabIndex + shift, this.tabs.length); const newTab = this.tabs[newIndex]; - this.setTabLinkFocus(newTab.id); + this.setTabLinkFocus(newTab.elementId); this.selectTab(newTab); } - setTabLinkFocus(id: string | number) { + setTabLinkFocus(elementId: string) { this.tabLinks.forEach(tabLink => { const element = tabLink.nativeElement; - const focus = element.id === this.tabLinkId(id); + const focus = element.id === elementId; element.tabIndex = focus ? 0 : -1; if (focus) { element.focus();