[Feature] Allow TabsTrigger to render as an anchor via as: (#425)

* [Feature] Allow TabsTrigger to render as an anchor via as:

Add an `as:` option to `RubyUI::TabsTrigger` (default `:button`) so a
trigger can render as `<a href>` for tabs that are navigation links.
This avoids nesting a `<button>` inside an `<a>` (invalid HTML and a
keyboard/accessibility issue) when tabs are server-rendered links.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* [Bug Fix] Emit type="button" for any non-anchor TabsTrigger

Tie the `type="button"` attribute to the element actually rendered
(`unless @as == :a`) instead of an exact `@as == :button` check. An
unexpected/mistyped `as:` value fell through to the `<button>` branch
without a type, which defaults to `type="submit"` and could trigger
accidental form submission. Issue identified by cubic.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* [Chore] Rebuild MCP registry for TabsTrigger as: option

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: jacksonpires

docs/app/views/docs/tabs.rb

@@ -102,6 +102,20 @@ def view_template
         RUBY
       end
 
+      render Docs::VisualCodeExample.new(title: "As navigation links", context: self) do
+        <<~RUBY
+          # Render triggers as `<a>` instead of `<button>` for tabs that navigate
+          # (e.g. server-rendered tabs driven by a query param). This avoids
+          # nesting interactive elements and keeps the markup valid and accessible.
+          Tabs(default_value: "account", class: 'w-96') do
+            TabsList do
+              TabsTrigger(value: "account", as: :a, href: "?tab=account") { "Account" }
+              TabsTrigger(value: "password", as: :a, href: "?tab=password") { "Password" }
+            end
+          end
+        RUBY
+      end
+
       render Docs::VisualCodeExample.new(title: "Change default value", context: self) do
         <<~RUBY
           Tabs(default: "password", class: 'w-96') do

gem/lib/ruby_ui/tabs/tabs_trigger.rb

@@ -2,20 +2,24 @@
 
 module RubyUI
   class TabsTrigger < Base
-    def initialize(value:, **attrs)
+    def initialize(value:, as: :button, **attrs)
       @value = value
+      @as = as
       super(**attrs)
     end
 
     def view_template(&)
-      button(**attrs, &)
+      if @as == :a
+        a(**attrs, &)
+      else
+        button(**attrs, &)
+      end
     end
 
     private
 
     def default_attrs
-      {
-        type: :button,
+      base = {
         data: {
           ruby_ui__tabs_target: "trigger",
           action: "click->ruby-ui--tabs#show",
@@ -29,6 +33,8 @@ def default_attrs
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ]
       }
+      base[:type] = :button unless @as == :a
+      base
     end
   end
 end

gem/test/ruby_ui/tabs_trigger_test.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::TabsTriggerTest < ComponentTest
+  def test_renders_as_button_by_default
+    output = phlex { RubyUI.TabsTrigger(value: "account") { "Account" } }
+
+    assert_match(/\A<button/, output)
+    assert_match(/type="button"/, output)
+    assert_match(/Account/, output)
+    refute_match(/<a[\s>]/, output)
+  end
+
+  def test_renders_as_anchor_with_href_when_as_a
+    output = phlex { RubyUI.TabsTrigger(value: "account", as: :a, href: "/account") { "Account" } }
+
+    assert_match(/\A<a/, output)
+    assert_match(/href="\/account"/, output)
+    assert_match(/Account/, output)
+    refute_match(/<button/, output)
+    refute_match(/type="button"/, output)
+  end
+
+  def test_unexpected_as_value_still_renders_a_typed_button
+    output = phlex { RubyUI.TabsTrigger(value: "account", as: :buton) { "Account" } }
+
+    assert_match(/\A<button/, output)
+    assert_match(/type="button"/, output)
+  end
+
+  def test_keeps_trigger_data_attributes_when_rendered_as_anchor
+    output = phlex { RubyUI.TabsTrigger(value: "account", as: :a, href: "/account") { "Account" } }
+
+    assert_match(/data-ruby-ui--tabs-target="trigger"/, output)
+    assert_match(/data-value="account"/, output)
+  end
+end

mcp/data/registry.json

@@ -2301,7 +2301,7 @@
         },
         {
           "path": "tabs_trigger.rb",
-          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class TabsTrigger < Base\n    def initialize(value:, **attrs)\n      @value = value\n      super(**attrs)\n    end\n\n    def view_template(&)\n      button(**attrs, &)\n    end\n\n    private\n\n    def default_attrs\n      {\n        type: :button,\n        data: {\n          ruby_ui__tabs_target: \"trigger\",\n          action: \"click->ruby-ui--tabs#show\",\n          value: @value\n        },\n        class: [\n          \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all\",\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed\",\n          \"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        ]\n      }\n    end\n  end\nend\n"
+          "content": "# frozen_string_literal: true\n\nmodule RubyUI\n  class TabsTrigger < Base\n    def initialize(value:, as: :button, **attrs)\n      @value = value\n      @as = as\n      super(**attrs)\n    end\n\n    def view_template(&)\n      if @as == :a\n        a(**attrs, &)\n      else\n        button(**attrs, &)\n      end\n    end\n\n    private\n\n    def default_attrs\n      base = {\n        data: {\n          ruby_ui__tabs_target: \"trigger\",\n          action: \"click->ruby-ui--tabs#show\",\n          value: @value\n        },\n        class: [\n          \"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all\",\n          \"disabled:pointer-events-none disabled:opacity-50\",\n          \"aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed\",\n          \"data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow\",\n          \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\"\n        ]\n      }\n      base[:type] = :button unless @as == :a\n      base\n    end\n  end\nend\n"
         }
       ],
       "dependencies": {