SFD-181: Implement ARIA tabs patterns

playwright/tests/test_17_EstTool_UI_AssumpLimitations.py

@@ -92,7 +92,7 @@ def test_example(page: Page) -> None:
     expect(page.get_by_text("Clearly there is a large")).to_be_visible()
     expect(page.get_by_text("The estimated kWh of cloud")).to_be_visible()
     expect(page.get_by_role("heading", name="Downstream Emissions")).to_be_visible()
-    expect(page.get_by_text("At present we focus on the")).to_be_visible()
+    expect(page.get_by_text("To do this we have collated")).to_be_visible()
     expect(page.get_by_role("cell", name="Type", exact=True)).to_be_visible()
     expect(page.get_by_text("These figures are combined")).to_be_visible()
     expect(page.get_by_role("heading", name="Network Data Transfer")).to_be_visible()

src/app/carbon-estimator-form/carbon-estimator-form.component.html

@@ -1,4 +1,8 @@
-<form (ngSubmit)="handleSubmit()" [formGroup]="estimatorForm" class="tce-w-full tce-flex tce-flex-col tce-gap-6">
+<form
+  (ngSubmit)="handleSubmit()"
+  [formGroup]="estimatorForm"
+  class="tce-w-full tce-flex tce-flex-col tce-gap-6"
+  tabindex="0">
   <div formGroupName="upstream">
     @if (errorSummaryState.showErrorSummary) {
       <error-summary [validationErrors]="errorSummaryState.validationErrors"></error-summary>

src/app/tab/tab-item/tab-item.component.html

@@ -1,3 +1,3 @@
-@if (active()) {
+<div role="tabpanel" [hidden]="!active()" [id]="tabIdPrefix + 'Tabpanel'" [attr.aria-labelledby]="tabIdPrefix + 'Tab'">
   <ng-content></ng-content>
-}
+</div>

src/app/tab/tab-item/tab-item.component.spec.ts

@@ -13,6 +13,7 @@ describe('TabItemComponent', () => {
     .compileComponents();
 
     fixture = TestBed.createComponent(TabItemComponent);
+    fixture.componentRef.setInput('title', 'Tab Title');
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/tab/tab-item/tab-item.component.ts

@@ -1,15 +1,17 @@
 import { CommonModule } from '@angular/common';
-import { Component, effect, EventEmitter, input, model, Output } from '@angular/core';
+import { Component, effect, EventEmitter, input, model, OnInit, Output } from '@angular/core';
+import { camelCase } from 'lodash-es';
 
 @Component({
   selector: 'tab-item',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './tab-item.component.html',
 })
-export class TabItemComponent {
+export class TabItemComponent implements OnInit {
   public active = model(false);
   public title = input.required<string>();
+  public tabIdPrefix!: string;
   @Output() public tabSelected = new EventEmitter<void>();
 
   constructor() {
@@ -19,4 +21,8 @@ export class TabItemComponent {
       }
     });
   }
+
+  ngOnInit(): void {
+    this.tabIdPrefix = camelCase(this.title());
+  }
 }

src/app/tab/tabs/tabs.component.html

@@ -1,16 +1,18 @@
 <div class="tce-w-full tce-flex tce-mb-2" role="tablist">
-  @for (tab of tabs; track tab.title) {
-    <div
+  @for (tab of tabs; track tab.title()) {
+    <button
+      #tabButton
       role="tab"
+      [id]="tab.tabIdPrefix + 'Tab'"
+      [attr.aria-controls]="tab.tabIdPrefix + 'Tabpanel'"
       [class.tce-active-tab]="tab.active()"
+      [tabindex]="tab.active() ? 0 : -1"
+      [attr.aria-selected]="tab.active() ? true : false"
       (click)="selectTab(tab)"
-      (keydown.enter)="selectTab(tab)"
-      tabindex="0"
+      (keydown)="onKeydown($event, $index)"
       class="tce-p-2 tce-cursor-pointer tce-border-b-2 tce-border-transparent hover:tce-border-slate-300">
       {{ tab.title() }}
-    </div>
+    </button>
   }
 </div>
-<div role="tabpanel">
-  <ng-content></ng-content>
-</div>
+<ng-content></ng-content>

src/app/tab/tabs/tabs.component.ts

@@ -1,4 +1,4 @@
-import { AfterContentInit, Component, ContentChildren, QueryList } from '@angular/core';
+import { AfterContentInit, Component, ContentChildren, ElementRef, QueryList, ViewChildren } from '@angular/core';
 import { TabItemComponent } from '../tab-item/tab-item.component';
 
 @Component({
@@ -9,6 +9,7 @@ import { TabItemComponent } from '../tab-item/tab-item.component';
 })
 export class TabsComponent implements AfterContentInit {
   @ContentChildren(TabItemComponent) tabs!: QueryList<TabItemComponent>;
+  @ViewChildren('tabButton') tabButtons!: QueryList<ElementRef<HTMLButtonElement>>;
 
   public ngAfterContentInit() {
     const activeTabs = this.tabs.filter(tab => tab.active());
@@ -24,4 +25,63 @@ export class TabsComponent implements AfterContentInit {
     this.tabs.filter(tab => tab.active()).forEach(tab => tab.active.set(false));
     selectedTab.active.set(true);
   }
+
+  selectAndFocusTab(selectedTabIndex: number) {
+    const newTab = this.tabs.get(selectedTabIndex)!;
+    const newTabButton = this.tabButtons.get(selectedTabIndex)!;
+    this.selectTab(newTab);
+    newTabButton.nativeElement.focus();
+  }
+
+  setSelectedToNextTab(currentTabIndex: number) {
+    let newTabIndex: number;
+    if (currentTabIndex === this.tabs.length - 1) {
+      newTabIndex = 0;
+    } else {
+      newTabIndex = currentTabIndex + 1;
+    }
+    this.selectAndFocusTab(newTabIndex);
+  }
+
+  setSelectedToPreviousTab(currentTabIndex: number) {
+    let newTabIndex: number;
+    if (currentTabIndex === 0) {
+      newTabIndex = this.tabs.length - 1;
+    } else {
+      newTabIndex = currentTabIndex - 1;
+    }
+    this.selectAndFocusTab(newTabIndex);
+  }
+
+  public onKeydown(event: KeyboardEvent, currentIndex: number) {
+    let flag = false;
+    switch (event.key) {
+      case 'ArrowRight':
+        flag = true;
+        this.setSelectedToNextTab(currentIndex);
+        break;
+
+      case 'ArrowLeft':
+        flag = true;
+        this.setSelectedToPreviousTab(currentIndex);
+        break;
+
+      case 'Home':
+        flag = true;
+        this.selectAndFocusTab(0);
+        break;
+
+      case 'End':
+        flag = true;
+        this.selectAndFocusTab(this.tabs.length - 1);
+        break;
+
+      default:
+        break;
+    }
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
 }

src/app/tech-carbon-estimator/tech-carbon-estimator.component.html

@@ -11,7 +11,7 @@ <h1 class="tce-text-3xl tce-mb-6">Technology Carbon Estimator</h1>
             (formReset)="handleFormReset()"></carbon-estimator-form>
         </tab-item>
         <tab-item [title]="'Assumptions and Limitations'">
-          <assumptions-and-limitation aria-live="polite"></assumptions-and-limitation>
+          <assumptions-and-limitation></assumptions-and-limitation>
         </tab-item>
       </tabs>
     </div>

src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts

@@ -54,8 +54,8 @@ describe('TechCarbonEstimatorComponent', () => {
     const formElement = fixture.nativeElement.querySelector('carbon-estimator-form');
     const assumptionsElement = fixture.nativeElement.querySelector('assumptions-and-limitation');
 
-    expect(formElement).toBeTruthy();
-    expect(assumptionsElement).toBeFalsy();
+    expect(formElement.checkVisibility()).toBeTrue();
+    expect(assumptionsElement.checkVisibility()).toBeFalse();
   });
 
   it('should call estimationService.calculateCarbonEstimation when handleFormSubmit is called', () => {