Merge branch 'bump/primer-upstream-ref' into bump/primer-upstream

Author: HDinger

.changeset/poor-parrots-fold.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Ensure counter content is exposed to screen reader users

.github/workflows/test.yml

@@ -275,9 +275,9 @@ jobs:
       uses: phulsechinmay/rewritable-pr-comment@v0.3.0
       with:
         message: |
-          ### ⚠️ Visual or Semantic markup differences found
+          ### ⚠️ Visual or ARIA snapshot differences found
 
-          Our visual and semantic markup comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.
+          Our visual and ARIA snapshot tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.
 
 
           [Review differences](https://github.com/opf/view_components/pull/${{ github.event.number }}/files?file-filters%5B%5D=.png&file-filters%5B%5D=.yml&show-viewed-files=false)

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/invisible_all_visuals/aria-snapshot.yml

@@ -1,7 +1,7 @@
 - button "Button"
 - button "Button"
 - button "Button"
-- button "Button ( )": Button ()
-- button "Button ( )": Button ()
-- button "Button ( )": Button ()
+- button "Button ( 15 )"
+- button "Button ( 15 )"
+- button "Button ( 15 )"
 - button "Button with tooltip"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/trailing_counter/aria-snapshot.yml

@@ -1 +1 @@
-- button "Star ( )": Star ()
+- button "Star ( 15 )"

.playwright/screenshots/snapshots.test.ts-snapshots/primer/beta/button/trailing_visual/aria-snapshot.yml

@@ -1 +1 @@
-- button "Comment ( )": Comment ()
+- button "Comment ( 15 )"

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)
         }
       }
 
@@ -108,6 +108,7 @@ class Button < Primer::Component
       # @param align_content [Symbol] <%= one_of(Primer::Beta::Button::ALIGN_CONTENT_OPTIONS) %>
       # @param tag [Symbol] (Primer::Beta::BaseButton::DEFAULT_TAG) <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
       # @param type [Symbol] (Primer::Beta::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
+      # @param inactive [Boolean] Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button.
       # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
       # @param label_wrap [Boolean] Whether or not the button label text wraps and the button height expands.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>

demo/kuby.rb

@@ -42,6 +42,8 @@ def install_from_image(image, dockerfile)
         password ENV["AZURE_ACR_PASSWORD"]
       end
 
+      setup_phase.base_image = "ruby:3.3"
+
       image_url ENV["IMAGE_URL"] || "primer.azurecr.io/primer/view_components_storybook"
 
       # Run bundler, npm, etc in this directory.

package-lock.json

@@ -65,7 +65,7 @@ def tooltip_with_button(direction: :s, tooltip_text: "You can press a button")
 
       # @label Tooltip with Primer::Beta::Link
       def tooltip_with_link(direction: :s, tooltip_text: "You can press a button")
-        render(Primer::Beta::Link.new(href: "#link-with-tooltip", id: "link-with-tooltip")) do |component|
+        render(Primer::Beta::Link.new(href: "#link-with-tooltip", id: "link-with-tooltip", underline: true)) do |component|
           component.with_tooltip(text: tooltip_text, direction: direction)
           "Button"
         end