Add parenthesis to trailing counter (primer#2807)

Author: khiga8

.changeset/brown-boats-hunt.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Add parenthesis to trailing counter for React parity, and to improve screen reader speech output

app/components/primer/beta/button.html.erb

@@ -8,7 +8,12 @@
     <span class="Button-label"><%= trimmed_content %></span>
     <% if trailing_visual %>
       <span class="Button-visual Button-trailingVisual">
-        <%= trailing_visual %>
+        <% if @trailing_visual_counter %>
+          <span class="sr-only">(<%= trailing_visual %>)</span>
+          <%= trailing_visual %>
+        <% else %>
+          <%= trailing_visual %>
+        <% end %>
       </span>
     <% end %>
   </span>

app/components/primer/beta/button.rb

@@ -68,7 +68,10 @@ class Button < Primer::Component
       renders_one :trailing_visual, types: {
         icon: Primer::Beta::Octicon,
         label: Primer::Beta::Label,
-        counter: Primer::Beta::Counter
+        counter: lambda { |**system_arguments|
+          @trailing_visual_counter = true
+          Primer::Beta::Counter.new("aria-hidden": true, **system_arguments)
+        }
       }
 
       # Trailing action appears to the right of the trailing visual.

test/components/primer/beta/button_test.rb

@@ -27,6 +27,18 @@ def test_renders_with_leading_visual_icon
     assert_selector(".Button .Button-leadingVisual .octicon-alert")
   end
 
+  def test_renders_with_trailing_visual_counter
+    render_inline(Primer::Beta::Button.new) do |component|
+      component.with_trailing_visual_counter(count: 15)
+      "Button"
+    end
+
+    assert_selector(".Button", text: "Button")
+    assert_selector('[aria-hidden="true"]', text: "15")
+    # Parenthesis provides improved screen reader output
+    assert_selector(".sr-only", text: "(15)")
+  end
+
   def test_renders_with_leading_visual_svg
     render_inline(Primer::Beta::Button.new) do |component|
       component.with_leading_visual_svg do