Fix aria-hidden bug

Apply flex so nested span is centered

Temp

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

@@ -9,8 +9,8 @@
     <% if trailing_visual %>
       <span class="Button-visual Button-trailingVisual">
         <% if @trailing_visual_counter %>
+          <span class="d-flex" aria-hidden="true"><%= trailing_visual %></span>
           <span class="sr-only">(<%= trailing_visual %>)</span>
-          <%= trailing_visual %>
         <% else %>
           <%= trailing_visual %>
         <% end %>

app/components/primer/beta/button.rb

@@ -70,7 +70,7 @@ class Button < Primer::Component
         label: Primer::Beta::Label,
         counter: lambda { |**system_arguments|
           @trailing_visual_counter = true
-          Primer::Beta::Counter.new("aria-hidden": true, **system_arguments)
+          Primer::Beta::Counter.new(**system_arguments)
         }
       }
 

test/playwright/beta/button.test.ts

@@ -0,0 +1,10 @@
+import {test, expect} from '@playwright/test'
+
+test.describe('Button', () => {
+  test('With trailing counter', async ({page}) => {
+    await page.goto(`/rails/view_components/beta/button/trailing_counter`)
+    const component = await page.locator('#component-preview')
+
+    expect(component.getByRole('button', {name: 'Star (15)'}))
+  })
+})