Fix Primer::ButtonComponent rendering with a summary tag
Previously, the "type" attribute was being applied to "summary" buttons,
which is invalid and broke visual styling in Safari.
MODIFY
app/components/primer/button_component.rb
app/components/primer/button_component.rb
@@ -55,10 +55,10 @@ module Primer
@system_arguments = system_arguments
@system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
- if @system_arguments[:tag] == :a
- @system_arguments[:role] = :button
- else
+ if @system_arguments[:tag] == :button
@system_arguments[:type] = type
+ else
+ @system_arguments[:role] = :button
end
@system_arguments[:classes] = class_names(

MODIFY
test/components/button_component_test.rb
test/components/button_component_test.rb
@@ -21,6 +21,14 @@ class PrimerButtonComponentTest < Minitest::Test
render_inline(Primer::ButtonComponent.new(tag: :a)) { "content" }
assert_selector("a.btn[role='button']")
+ refute_selector("a[type]")
+ end
+
+ def test_renders_summary_as_a_button
+ render_inline(Primer::ButtonComponent.new(tag: :summary)) { "content" }
+
+ assert_selector("summary.btn[role='button']")
+ refute_selector("summary[type]")
end
def test_renders_href

Fix Primer::ButtonComponent rendering with a summary tag

Previously, the "type" attribute was being applied to "summary" buttons,
which is invalid and broke visual styling in Safari.