remove the button option for tab and fix tests

Author: Mihai-Munteanu

app/components/avo/u_i/tabs/tab_component.html.erb

@@ -1,13 +1,26 @@
 <%= content_tag :div, class: class_names(
   "tabs__item-wrapper",
   "tabs__item-wrapper--#{@variant}",
-  "#{ACTIVE_CLASS}": scope? && @active
+  "#{ACTIVE_CLASS}": @variant == :scope && @active
 ) do %>
-
-  <% content = capture do %>
+  <%= link_to(@href,
+    class: class_names(
+      @classes,
+      "tabs__item",
+      "tabs__item--group": @variant == :group,
+      "tabs__item--disabled": @disabled,
+      "#{ACTIVE_CLASS}": @active
+    ),
+    data: @data,
+    title: @title,
+    role: "tab",
+    id: @id,
+    "aria-selected": @active,
+    "aria-controls": @aria_controls,
+    "aria-disabled": @disabled,
+    tabindex: @disabled ? -1 : 0
+  ) do %>
     <%= svg @icon, class: "tabs__item-icon", "aria-hidden": "true" if @icon.present? %>
     <%= tag.span @label, class: "tabs__item-label" if @label.present? %>
   <% end %>
-
-  <%= @href.present? ? link_to(content, @href, shared_attributes) : button_tag(content, button_attributes) %>
 <% end %>

app/components/avo/u_i/tabs/tab_component.rb

@@ -12,57 +12,13 @@ class TabComponent < Avo::BaseComponent
         prop :variant, default: :scope
         prop :active, default: false
         prop :icon
-        prop :href
+        prop :href, default: "#"
         prop :id, default: -> { "tab-#{object_id}" }
         prop :disabled, default: false
         prop :aria_controls, default: -> { "#{@id}-panel" }
         prop :data, default: {}.freeze
         prop :classes
         prop :title
-
-        def shared_attributes
-          {
-            class: element_classes,
-            data: @data,
-            title: @title,
-            **tab_attributes.except(:"aria-disabled")
-          }
-        end
-
-        def button_attributes
-          shared_attributes.merge(
-            type: "button",
-            disabled: @disabled,
-            "aria-disabled": @disabled
-          )
-        end
-
-        private
-
-        def scope?
-          @variant == :scope
-        end
-
-        def tab_attributes
-          {
-            role: "tab",
-            id: @id,
-            "aria-selected": @active,
-            "aria-controls": @aria_controls,
-            "aria-disabled": @disabled,
-            tabindex: @disabled ? -1 : 0
-          }
-        end
-
-        def element_classes
-          class_names(
-            @classes,
-            "tabs__item",
-            "tabs__item--group": @variant == :group,
-            "tabs__item--disabled": @disabled,
-            "#{ACTIVE_CLASS}": @active
-          )
-        end
       end
     end
   end

spec/components/avo/u_i/tabs/tab_component_spec.rb

@@ -14,10 +14,10 @@ def render_component(**opts)
   end
 
   describe "rendering" do
-    it "renders a button tab by default" do
+    it "renders a link tab by default" do
       render_component
 
-      expect(page).to have_css("button[type='button']")
+      expect(page).to have_css("a[href='#']")
       expect(page).to have_css("span.tabs__item-label", text: "Tab")
       expect(page).to have_css(".tabs__item")
       expect(page).to have_css(".tabs__item-wrapper")
@@ -79,58 +79,56 @@ def render_component(**opts)
         data: {testid: "test-tab", action: "click->tabs#select"}
       )
 
-      expect(page).to have_css("button#custom-tab-id")
-      expect(page).to have_css("button[title='Click to view settings']")
+      expect(page).to have_css("a#custom-tab-id[href='#']")
+      expect(page).to have_css("a[title='Click to view settings']")
       expect(page).to have_css(".tabs__item.my-custom-class")
-      expect(page).to have_css("button[data-testid='test-tab'][data-action='click->tabs#select']")
+      expect(page).to have_css("a[data-testid='test-tab'][data-action='click->tabs#select']")
     end
   end
 
   describe "disabled state" do
-    it "applies disabled attributes to button" do
+    it "applies disabled attributes to link" do
       render_component(disabled: true)
 
-      expect(page).to have_css("button[disabled]")
-      expect(page).to have_css("button[aria-disabled='true']")
-      expect(page).to have_css("button[tabindex='-1']")
+      expect(page).to have_css("a[aria-disabled='true']")
+      expect(page).to have_css("a[tabindex='-1']")
       expect(page).to have_css(".tabs__item--disabled")
     end
 
     it "sets tabindex to 0 when enabled" do
       render_component(disabled: false)
-      expect(page).to have_css("button[tabindex='0']")
+      expect(page).to have_css("a[tabindex='0']")
     end
   end
 
   describe "ARIA attributes" do
     it "includes proper ARIA attributes" do
       render_component(id: "my-tab", active: true)
 
-      expect(page).to have_css("button[role='tab']")
-      expect(page).to have_css("button[aria-selected='true']")
-      expect(page).to have_css("button[id='my-tab']")
-      expect(page).to have_css("button[aria-controls]")
+      expect(page).to have_css("a[role='tab']")
+      expect(page).to have_css("a[aria-selected='true']")
+      expect(page).to have_css("a[id='my-tab']")
+      expect(page).to have_css("a[aria-controls]")
     end
 
     it "uses custom aria-controls when provided" do
       render_component(aria_controls: "custom-panel")
-      expect(page).to have_css("button[aria-controls='custom-panel']")
+      expect(page).to have_css("a[aria-controls='custom-panel']")
     end
 
     it "sets aria-selected based on active state" do
       render_component(active: false)
-      expect(page).to have_css("button[aria-selected='false']")
+      expect(page).to have_css("a[aria-selected='false']")
     end
   end
 
   describe "data attributes" do
     it "preserves custom data attributes" do
       render_component(data: {custom: "value"})
-      expect(page).to have_css("button[data-custom='value']")
+      expect(page).to have_css("a[data-custom='value']")
     end
   end
 
-
   describe "variants" do
     describe "group variant" do
       it "applies group variant classes" do