From b401e30d6bd6c6f9cd653b9815d2854db5141b3d Mon Sep 17 00:00:00 2001
From: NiclasNorin <niclasn@outlook.com>
Date: Mon, 20 Apr 2026 15:28:06 +0200
Subject: [PATCH] refactor: using components for tabs buttons

---
 .../Tabs/partials/tab-button.blade.php         | 18 ++++++++++++++++++
 source/php/Component/Tabs/tabs.blade.php       |  6 +-----
 source/php/Component/Tabs/tabs.json            |  1 -
 3 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 source/php/Component/Tabs/partials/tab-button.blade.php

diff --git a/source/php/Component/Tabs/partials/tab-button.blade.php b/source/php/Component/Tabs/partials/tab-button.blade.php
new file mode 100644
index 00000000..b927a022
--- /dev/null
+++ b/source/php/Component/Tabs/partials/tab-button.blade.php
@@ -0,0 +1,18 @@
+@button([
+    'classList' => [$baseClass . '__button'],
+    'attributeList' => [
+        'role' => 'tab',
+        'aria-controls' => $baseClass . '__aria-' . $id . '-' . $loop->index,
+        'aria-expanded' => $loop->index === 0 ? 'true' : 'false',
+        'js-expand-button' => true,
+        'style' => 'border-radius: unset;'
+    ]
+])
+    @element([
+        'componentElement' => 'span',
+        'classList' => $baseClass . '__button-wrapper',
+        'attributeList' => ['tabindex' => '-1']
+    ])
+        {{ $tab['title'] ?? '' }}
+    @endelement
+@endbutton
\ No newline at end of file
diff --git a/source/php/Component/Tabs/tabs.blade.php b/source/php/Component/Tabs/tabs.blade.php
index 42e96827..74b393ac 100644
--- a/source/php/Component/Tabs/tabs.blade.php
+++ b/source/php/Component/Tabs/tabs.blade.php
@@ -3,11 +3,7 @@
     <{{$componentElement}} class="{{ $class }}" role="tablist" js-expand-container {!! $attribute !!}>
         <div class="{{ $baseClass }}__header">
             @foreach($tabs as $tab)
-                <{{$headingElement}} role="tab" class="{{$baseClass}}__button" aria-controls="{{ $baseClass }}__aria-{{ $id }}-{{ $loop->index }}" aria-expanded="{{ $loop->index === 0 ? 'true' : 'false' }}" js-expand-button>
-                    <span class="{{$baseClass}}__button-wrapper" tabindex="-1">
-                        {{ $tab['title'] ?? '' }}
-                    </span>
-                </{{$headingElement}}>
+                @include('Tabs.partials.tab-button')
             @endforeach
         </div>
         @foreach($tabs as $tab)
diff --git a/source/php/Component/Tabs/tabs.json b/source/php/Component/Tabs/tabs.json
index 67ba0b46..d08af3fd 100644
--- a/source/php/Component/Tabs/tabs.json
+++ b/source/php/Component/Tabs/tabs.json
@@ -4,7 +4,6 @@
         "id": "",
         "componentElement": "div",
         "tabs": [],
-        "headingElement": "button",
         "contentElement": "div"
     },
     "description": {