From 7f29cc363007a3ef55c594b8a1fe8b7a084cc316 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Wed, 2 Oct 2024 16:17:47 +0100
Subject: [PATCH 01/17] Add only active tab to tab sequence

---
 src/app/tab/tabs/tabs.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/tab/tabs/tabs.component.html b/src/app/tab/tabs/tabs.component.html
index 4f8e386..b437a45 100644
--- a/src/app/tab/tabs/tabs.component.html
+++ b/src/app/tab/tabs/tabs.component.html
@@ -5,7 +5,7 @@
       [class.tce-active-tab]="tab.active()"
       (click)="selectTab(tab)"
       (keydown.enter)="selectTab(tab)"
-      tabindex="0"
+      [attr.tabindex]="tab.active() ? 0 : -1"
       class="tce-p-2 tce-cursor-pointer tce-border-b-2 tce-border-transparent hover:tce-border-slate-300">
       {{ tab.title() }}
     </div>

From 7542d5a149933606154cdb68f3296e46aa7e200e Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Wed, 2 Oct 2024 16:18:45 +0100
Subject: [PATCH 02/17] Use button element for tabs

---
 src/app/tab/tabs/tabs.component.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/tab/tabs/tabs.component.html b/src/app/tab/tabs/tabs.component.html
index b437a45..f74faa3 100644
--- a/src/app/tab/tabs/tabs.component.html
+++ b/src/app/tab/tabs/tabs.component.html
@@ -1,6 +1,6 @@
 <div class="tce-w-full tce-flex tce-mb-2" role="tablist">
   @for (tab of tabs; track tab.title) {
-    <div
+    <button
       role="tab"
       [class.tce-active-tab]="tab.active()"
       (click)="selectTab(tab)"
@@ -8,7 +8,7 @@
       [attr.tabindex]="tab.active() ? 0 : -1"
       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">

From 4f25d20c6f4694ca0afa2e7451f3febe3f9d5f54 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Wed, 2 Oct 2024 16:19:23 +0100
Subject: [PATCH 03/17] Remove enter key handler

---
 src/app/tab/tabs/tabs.component.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/tab/tabs/tabs.component.html b/src/app/tab/tabs/tabs.component.html
index f74faa3..dbc8976 100644
--- a/src/app/tab/tabs/tabs.component.html
+++ b/src/app/tab/tabs/tabs.component.html
@@ -4,7 +4,6 @@
       role="tab"
       [class.tce-active-tab]="tab.active()"
       (click)="selectTab(tab)"
-      (keydown.enter)="selectTab(tab)"
       [attr.tabindex]="tab.active() ? 0 : -1"
       class="tce-p-2 tce-cursor-pointer tce-border-b-2 tce-border-transparent hover:tce-border-slate-300">
       {{ tab.title() }}

From ab53330874f04edcccc564b8243df9a96dda1a1b Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Wed, 2 Oct 2024 16:28:21 +0100
Subject: [PATCH 04/17] Add onKeydown event handler template

---
 src/app/tab/tabs/tabs.component.html |  1 +
 src/app/tab/tabs/tabs.component.ts   | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/app/tab/tabs/tabs.component.html b/src/app/tab/tabs/tabs.component.html
index dbc8976..4f0028f 100644
--- a/src/app/tab/tabs/tabs.component.html
+++ b/src/app/tab/tabs/tabs.component.html
@@ -4,6 +4,7 @@
       role="tab"
       [class.tce-active-tab]="tab.active()"
       (click)="selectTab(tab)"
+      (keydown)="onKeydown($event)"
       [attr.tabindex]="tab.active() ? 0 : -1"
       class="tce-p-2 tce-cursor-pointer tce-border-b-2 tce-border-transparent hover:tce-border-slate-300">
       {{ tab.title() }}
diff --git a/src/app/tab/tabs/tabs.component.ts b/src/app/tab/tabs/tabs.component.ts
index 1c217dc..bbb73de 100644
--- a/src/app/tab/tabs/tabs.component.ts
+++ b/src/app/tab/tabs/tabs.component.ts
@@ -24,4 +24,27 @@ export class TabsComponent implements AfterContentInit {
     this.tabs.filter(tab => tab.active()).forEach(tab => tab.active.set(false));
     selectedTab.active.set(true);
   }
+
+  public onKeydown(event: KeyboardEvent) {
+    switch (event.key) {
+      case 'ArrowRight':
+        console.log('right');
+        break;
+
+      case 'ArrowLeft':
+        console.log('left');
+        break;
+
+      case 'Home':
+        console.log('home');
+        break;
+
+      case 'End':
+        console.log('end');
+        break;
+
+      default:
+        break;
+    }
+  }
 }

From 44f87aa2f1748a68adc5ce1edf52b23652cc1345 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Thu, 3 Oct 2024 09:48:05 +0100
Subject: [PATCH 05/17] Implement right arrow key tab switching

---
 src/app/tab/tabs/tabs.component.html |  3 ++-
 src/app/tab/tabs/tabs.component.ts   | 24 +++++++++++++++++++++---
 2 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/app/tab/tabs/tabs.component.html b/src/app/tab/tabs/tabs.component.html
index 4f0028f..0d197bb 100644
--- a/src/app/tab/tabs/tabs.component.html
+++ b/src/app/tab/tabs/tabs.component.html
@@ -1,10 +1,11 @@
 <div class="tce-w-full tce-flex tce-mb-2" role="tablist">
   @for (tab of tabs; track tab.title) {
     <button
+      #tabButton
       role="tab"
       [class.tce-active-tab]="tab.active()"
       (click)="selectTab(tab)"
-      (keydown)="onKeydown($event)"
+      (keydown)="onKeydown($event, $index)"
       [attr.tabindex]="tab.active() ? 0 : -1"
       class="tce-p-2 tce-cursor-pointer tce-border-b-2 tce-border-transparent hover:tce-border-slate-300">
       {{ tab.title() }}
diff --git a/src/app/tab/tabs/tabs.component.ts b/src/app/tab/tabs/tabs.component.ts
index bbb73de..10744ec 100644
--- a/src/app/tab/tabs/tabs.component.ts
+++ b/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());
@@ -25,10 +26,27 @@ export class TabsComponent implements AfterContentInit {
     selectedTab.active.set(true);
   }
 
-  public onKeydown(event: KeyboardEvent) {
+  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);
+  }
+
+  public onKeydown(event: KeyboardEvent, currentIndex: number) {
     switch (event.key) {
       case 'ArrowRight':
-        console.log('right');
+        this.setSelectedToNextTab(currentIndex);
         break;
 
       case 'ArrowLeft':

From a564db493bd02ef602b409b47e99e37cad806b21 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Thu, 3 Oct 2024 10:00:41 +0100
Subject: [PATCH 06/17] Implement left arrow, home and end key navigation

---
 src/app/tab/tabs/tabs.component.ts | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/app/tab/tabs/tabs.component.ts b/src/app/tab/tabs/tabs.component.ts
index 10744ec..42dd034 100644
--- a/src/app/tab/tabs/tabs.component.ts
+++ b/src/app/tab/tabs/tabs.component.ts
@@ -43,26 +43,45 @@ export class TabsComponent implements AfterContentInit {
     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':
-        console.log('left');
+        flag = true;
+        this.setSelectedToPreviousTab(currentIndex);
         break;
 
       case 'Home':
-        console.log('home');
+        flag = true;
+        this.selectAndFocusTab(0);
         break;
 
       case 'End':
-        console.log('end');
+        flag = true;
+        this.selectAndFocusTab(this.tabs.length - 1);
         break;
 
       default:
         break;
     }
+    if (flag) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
   }
 }

From 60b15365b3da07ce975aa65850aa11075e7deac1 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Thu, 3 Oct 2024 10:57:37 +0100
Subject: [PATCH 07/17] Add aria-selected property to tab buttons

---
 src/app/tab/tabs/tabs.component.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/tab/tabs/tabs.component.html b/src/app/tab/tabs/tabs.component.html
index 0d197bb..9560e67 100644
--- a/src/app/tab/tabs/tabs.component.html
+++ b/src/app/tab/tabs/tabs.component.html
@@ -7,6 +7,7 @@
       (click)="selectTab(tab)"
       (keydown)="onKeydown($event, $index)"
       [attr.tabindex]="tab.active() ? 0 : -1"
+      [attr.aria-selected]="tab.active() ? true : false"
       class="tce-p-2 tce-cursor-pointer tce-border-b-2 tce-border-transparent hover:tce-border-slate-300">
       {{ tab.title() }}
     </button>

From de3e4554a6f5b59f48a7c4a1cf19165711182227 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Thu, 3 Oct 2024 11:07:05 +0100
Subject: [PATCH 08/17] Add aria-live="off" to tabpanel

Used so that the 'Diagram' and 'Table' tabs are announced by the screen
reader when navigating with the 'left', 'right', 'home' and 'end' keys.
---
 src/app/tab/tabs/tabs.component.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/tab/tabs/tabs.component.html b/src/app/tab/tabs/tabs.component.html
index 9560e67..89f861c 100644
--- a/src/app/tab/tabs/tabs.component.html
+++ b/src/app/tab/tabs/tabs.component.html
@@ -13,6 +13,6 @@
     </button>
   }
 </div>
-<div role="tabpanel">
+<div role="tabpanel" aria-live="off">
   <ng-content></ng-content>
 </div>

From 69f87af602bbb967bcb61e0d421ee0da4474512c Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Thu, 3 Oct 2024 12:31:26 +0100
Subject: [PATCH 09/17] Add aria-controls and aria-labelledby

---
 src/app/tab/tab-item/tab-item.component.html |  9 +++++++--
 src/app/tab/tabs/tabs.component.html         | 12 ++++++------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/tab/tab-item/tab-item.component.html b/src/app/tab/tab-item/tab-item.component.html
index 751f66c..46bed80 100644
--- a/src/app/tab/tab-item/tab-item.component.html
+++ b/src/app/tab/tab-item/tab-item.component.html
@@ -1,3 +1,8 @@
-@if (active()) {
+<div
+  role="tabpanel"
+  aria-live="off"
+  [hidden]="!active()"
+  [id]="title() + '-tabpanel'"
+  [attr.aria-labelledby]="title() + '-tab'">
   <ng-content></ng-content>
-}
+</div>
diff --git a/src/app/tab/tabs/tabs.component.html b/src/app/tab/tabs/tabs.component.html
index 89f861c..5ef4ccc 100644
--- a/src/app/tab/tabs/tabs.component.html
+++ b/src/app/tab/tabs/tabs.component.html
@@ -1,18 +1,18 @@
 <div class="tce-w-full tce-flex tce-mb-2" role="tablist">
-  @for (tab of tabs; track tab.title) {
+  @for (tab of tabs; track tab.title()) {
     <button
       #tabButton
       role="tab"
+      [id]="tab.title() + '-tab'"
+      [attr.aria-controls]="tab.title() + '-tabpanel'"
       [class.tce-active-tab]="tab.active()"
+      [tabindex]="tab.active() ? 0 : -1"
+      [attr.aria-selected]="tab.active() ? true : false"
       (click)="selectTab(tab)"
       (keydown)="onKeydown($event, $index)"
-      [attr.tabindex]="tab.active() ? 0 : -1"
-      [attr.aria-selected]="tab.active() ? true : false"
       class="tce-p-2 tce-cursor-pointer tce-border-b-2 tce-border-transparent hover:tce-border-slate-300">
       {{ tab.title() }}
     </button>
   }
 </div>
-<div role="tabpanel" aria-live="off">
-  <ng-content></ng-content>
-</div>
+<ng-content></ng-content>

From 0d66af4b5294081b6c2eb49b8519566844137181 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Thu, 3 Oct 2024 12:38:56 +0100
Subject: [PATCH 10/17] Fix assumptions and limitations tab screen reader
 announcement

---
 .../tech-carbon-estimator/tech-carbon-estimator.component.html  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html
index c2db968..f1210c1 100644
--- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.html
+++ b/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>

From d0eaed22c67b093fb180e1689540be8a6d31e587 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Thu, 3 Oct 2024 14:10:40 +0100
Subject: [PATCH 11/17] Update Playwright test

---
 playwright/tests/test_17_EstTool_UI_AssumpLimitations.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright/tests/test_17_EstTool_UI_AssumpLimitations.py b/playwright/tests/test_17_EstTool_UI_AssumpLimitations.py
index 138f3e2..25a1518 100644
--- a/playwright/tests/test_17_EstTool_UI_AssumpLimitations.py
+++ b/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()

From ff7238886d0d05ae1df1f617d714f5b9f221c858 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Thu, 3 Oct 2024 15:49:27 +0100
Subject: [PATCH 12/17] Update 'form shown by default' test'

---
 .../tech-carbon-estimator.component.spec.ts                   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts b/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts
index 87b44cf..16a5965 100644
--- a/src/app/tech-carbon-estimator/tech-carbon-estimator.component.spec.ts
+++ b/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', () => {

From eddf8ae7503cbf8a35b18b4819ff2418041a8892 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Thu, 3 Oct 2024 15:58:50 +0100
Subject: [PATCH 13/17] Update tab-item component test

---
 src/app/tab/tab-item/tab-item.component.spec.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/tab/tab-item/tab-item.component.spec.ts b/src/app/tab/tab-item/tab-item.component.spec.ts
index 204f325..686860a 100644
--- a/src/app/tab/tab-item/tab-item.component.spec.ts
+++ b/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();
   });

From ef084dcf086c161b8d14b419a8046f582b442d57 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Thu, 3 Oct 2024 16:21:57 +0100
Subject: [PATCH 14/17] Remove whitespace from ids

---
 src/app/tab/tab-item/tab-item.component.html | 4 ++--
 src/app/tab/tabs/tabs.component.html         | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/tab/tab-item/tab-item.component.html b/src/app/tab/tab-item/tab-item.component.html
index 46bed80..ac830fd 100644
--- a/src/app/tab/tab-item/tab-item.component.html
+++ b/src/app/tab/tab-item/tab-item.component.html
@@ -2,7 +2,7 @@
   role="tabpanel"
   aria-live="off"
   [hidden]="!active()"
-  [id]="title() + '-tabpanel'"
-  [attr.aria-labelledby]="title() + '-tab'">
+  [id]="title().replaceAll(' ', '-') + '-tabpanel'"
+  [attr.aria-labelledby]="title().replaceAll(' ', '-') + '-tab'">
   <ng-content></ng-content>
 </div>
diff --git a/src/app/tab/tabs/tabs.component.html b/src/app/tab/tabs/tabs.component.html
index 5ef4ccc..3c63d74 100644
--- a/src/app/tab/tabs/tabs.component.html
+++ b/src/app/tab/tabs/tabs.component.html
@@ -3,8 +3,8 @@
     <button
       #tabButton
       role="tab"
-      [id]="tab.title() + '-tab'"
-      [attr.aria-controls]="tab.title() + '-tabpanel'"
+      [id]="tab.title().replaceAll(' ', '-') + '-tab'"
+      [attr.aria-controls]="tab.title().replaceAll(' ', '-') + '-tabpanel'"
       [class.tce-active-tab]="tab.active()"
       [tabindex]="tab.active() ? 0 : -1"
       [attr.aria-selected]="tab.active() ? true : false"

From 4aa19b6eeeddd9d51bbd18040ae76397462cbd89 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Thu, 3 Oct 2024 16:35:13 +0100
Subject: [PATCH 15/17] Refactor tab ids

---
 src/app/tab/tab-item/tab-item.component.html |  4 ++--
 src/app/tab/tab-item/tab-item.component.ts   | 10 ++++++++--
 src/app/tab/tabs/tabs.component.html         |  4 ++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/app/tab/tab-item/tab-item.component.html b/src/app/tab/tab-item/tab-item.component.html
index ac830fd..aa502ca 100644
--- a/src/app/tab/tab-item/tab-item.component.html
+++ b/src/app/tab/tab-item/tab-item.component.html
@@ -2,7 +2,7 @@
   role="tabpanel"
   aria-live="off"
   [hidden]="!active()"
-  [id]="title().replaceAll(' ', '-') + '-tabpanel'"
-  [attr.aria-labelledby]="title().replaceAll(' ', '-') + '-tab'">
+  [id]="tabIdPrefix + 'Tabpanel'"
+  [attr.aria-labelledby]="tabIdPrefix + 'Tab'">
   <ng-content></ng-content>
 </div>
diff --git a/src/app/tab/tab-item/tab-item.component.ts b/src/app/tab/tab-item/tab-item.component.ts
index d40fb03..d194254 100644
--- a/src/app/tab/tab-item/tab-item.component.ts
+++ b/src/app/tab/tab-item/tab-item.component.ts
@@ -1,5 +1,6 @@
 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',
@@ -7,9 +8,10 @@ import { Component, effect, EventEmitter, input, model, Output } from '@angular/
   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());
+  }
 }
diff --git a/src/app/tab/tabs/tabs.component.html b/src/app/tab/tabs/tabs.component.html
index 3c63d74..cbb2242 100644
--- a/src/app/tab/tabs/tabs.component.html
+++ b/src/app/tab/tabs/tabs.component.html
@@ -3,8 +3,8 @@
     <button
       #tabButton
       role="tab"
-      [id]="tab.title().replaceAll(' ', '-') + '-tab'"
-      [attr.aria-controls]="tab.title().replaceAll(' ', '-') + '-tabpanel'"
+      [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"

From ee2ffc39809f310c1dc1708024ce47e63fe9a57e Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Fri, 4 Oct 2024 08:53:19 +0100
Subject: [PATCH 16/17] Add estimator form to tab sequence

---
 .../carbon-estimator-form.component.html                    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/carbon-estimator-form/carbon-estimator-form.component.html b/src/app/carbon-estimator-form/carbon-estimator-form.component.html
index aa957e7..004b86e 100644
--- a/src/app/carbon-estimator-form/carbon-estimator-form.component.html
+++ b/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>

From 743960306fa593db376e0b703e9fc69f5001b5d3 Mon Sep 17 00:00:00 2001
From: jantoun-scottlogic <jantoun@scottlogic.com>
Date: Fri, 4 Oct 2024 09:15:26 +0100
Subject: [PATCH 17/17] Remove aria-live="off"

This no longer seems to be needed after refactoring the tab panels.
---
 src/app/tab/tab-item/tab-item.component.html | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/app/tab/tab-item/tab-item.component.html b/src/app/tab/tab-item/tab-item.component.html
index aa502ca..6f207e2 100644
--- a/src/app/tab/tab-item/tab-item.component.html
+++ b/src/app/tab/tab-item/tab-item.component.html
@@ -1,8 +1,3 @@
-<div
-  role="tabpanel"
-  aria-live="off"
-  [hidden]="!active()"
-  [id]="tabIdPrefix + 'Tabpanel'"
-  [attr.aria-labelledby]="tabIdPrefix + 'Tab'">
+<div role="tabpanel" [hidden]="!active()" [id]="tabIdPrefix + 'Tabpanel'" [attr.aria-labelledby]="tabIdPrefix + 'Tab'">
   <ng-content></ng-content>
 </div>