Update tabs to use buttons

Update playwright test to use tab button instead of close

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()
 

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>