From 2955cbc9f1c99f8e5c69f460187eac4cfbc4a933 Mon Sep 17 00:00:00 2001
From: Matthew Griffin <mgriffin@scottlogic.com>
Date: Mon, 19 Aug 2024 14:12:24 +0100
Subject: [PATCH] Update tabs to use buttons Update playwright test to use tab
 button instead of close

---
 playwright/tests/test_17_EstTool_UI_AssumpLimitations.py | 6 ++----
 src/app/tab/tabs/tabs.component.html                     | 5 +++--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/playwright/tests/test_17_EstTool_UI_AssumpLimitations.py b/playwright/tests/test_17_EstTool_UI_AssumpLimitations.py
index e2e335c7..c25fbb12 100644
--- a/playwright/tests/test_17_EstTool_UI_AssumpLimitations.py
+++ b/playwright/tests/test_17_EstTool_UI_AssumpLimitations.py
@@ -62,8 +62,7 @@ def test_example(page: Page) -> None:
     expect(page.get_by_role("button", name="Assumptions and limitations")).to_be_visible()
     page.get_by_role("button", name="Assumptions and limitations").click()
     expect(page.get_by_role("heading", name="Assumptions and Limitations")).to_be_visible()
-    expect(page.get_by_label("Close assumptions and").filter(has_text=re.compile("close"))).to_be_visible() # 'X' close button
-    # Need regex because has_text="close" is case insensitive and other close button has the text 'Close'
+    expect(page.get_by_role("button", name="Estimation Input")).to_be_visible()
     expect(page.get_by_text("The Technology Carbon Estimator tool is designed to")).to_be_visible()
     expect(page.get_by_role("heading", name="Assumptions", exact=True)).to_be_visible()
     expect(page.get_by_role("heading", name="Time period")).to_be_visible()
@@ -114,8 +113,7 @@ def test_example(page: Page) -> None:
     expect(page.get_by_text("Like Off the shelf and open")).to_be_visible()
     expect(page.get_by_role("heading", name="Managed Services")).to_be_visible()
     expect(page.get_by_text("We currently do not make a")).to_be_visible()
-    expect(page.get_by_label("Close assumptions and").filter(has_text=re.compile("Close"))).to_be_visible()
-    page.get_by_label("Close assumptions and").filter(has_text=re.compile("Close")).click()
+    page.get_by_role("button", name="Estimation Input").click()
     expect(page.get_by_role("heading", name="Technology Carbon Estimator")).to_be_visible()
     expect(page.get_by_role("heading", name="Organisation")).to_be_visible()
 
diff --git a/src/app/tab/tabs/tabs.component.html b/src/app/tab/tabs/tabs.component.html
index aab2b2a3..9faf66bc 100644
--- a/src/app/tab/tabs/tabs.component.html
+++ b/src/app/tab/tabs/tabs.component.html
@@ -1,13 +1,14 @@
 <div class="tce-w-full tce-flex tce-mb-2">
   @for (tab of tabs; track tab.title) {
-    <div
+    <button
+      type="button"
       [class.tce-active-tab]="tab.active()"
       (click)="selectTab(tab)"
       (keydown.enter)="selectTab(tab)"
       tabindex="0"
       class="tce-p-2 tce-cursor-pointer tce-border-b-2 tce-border-transparent hover:tce-border-slate-300">
       {{ tab.title() }}
-    </div>
+    </button>
   }
 </div>
 <ng-content></ng-content>