Merge pull request #23061 from opf/implementation/74683-remove-story_points-responsive-behavior

[#74683] Simplify story point metric

app/components/open_project/common/work_package_card_component.html.erb

@@ -27,7 +27,11 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++# %>
 
-<%= grid_layout(card_classes, tag: :article) do |grid| %>
+<%= grid_layout(
+      "op-work-package-card",
+      tag: :article,
+      classes: { "op-work-package-card_with-metric": metric? }
+    ) do |grid| %>
   <% grid.with_area(:info_line) do %>
     <%# TODO(73089): allow callers to pass arguments through to InfoLineComponent (e.g. status presentation, variants). %>
     <%= render(WorkPackages::InfoLineComponent.new(work_package:)) %>

app/components/open_project/common/work_package_card_component.rb

@@ -55,13 +55,6 @@ module OpenProject
         @work_package = work_package
         @menu_src = menu_src
       end
-
-      def card_classes
-        class_names(
-          "op-work-package-card",
-          "op-work-package-card_with-metric": metric?
-        )
-      end
     end
   end
 end

app/components/open_project/common/work_package_card_component.sass

@@ -36,12 +36,13 @@
   margin-bottom: var(--base-size-4)
 
 .op-work-package-card_with-metric
-  grid-template-columns: 1fr minmax(5rem, max-content) auto
+  grid-template-columns: 1fr minmax(2rem, max-content) auto
   grid-template-areas: "info_line metric menu" "subject subject subject"
 
 .op-work-package-card--metric
   margin-left: var(--stack-gap-normal)
   font-variant-numeric: tabular-nums
+  text-align: right
 
 .op-work-package-card--menu
   margin-left: var(--stack-gap-normal)
@@ -50,13 +51,3 @@
   align-self: start // Align to top of second row
   word-wrap: break-word
   overflow-wrap: break-word
-
-// Responsive overrides for the Backlogs page container. The
-// `backlogsListsContainer` named container is established on
-// `.op-backlogs-page`; outside of it these rules are inert.
-@container backlogsListsContainer (max-width: 654px)
-  .op-work-package-card-metric-label
-    display: none
-
-  .op-work-package-card_with-metric
-    grid-template-columns: 1fr minmax(2rem, max-content) auto

modules/backlogs/app/components/backlogs/story_points_component.html.erb

@@ -28,6 +28,6 @@ See COPYRIGHT and LICENSE files for more details.
 ++%>
 
 <%= render(Primer::Beta::Text.new(color: :subtle)) do %>
-  <%= story_points %>
-  <span class="op-work-package-card-metric-label"> <%= t(:"backlogs.points_label", count: story_points) %></span>
+  <span aria-hidden="true"><%= story_points %></span>
+  <span class="sr-only"><%= t(:"backlogs.story_points", count: story_points) %></span>
 <% end %>

modules/backlogs/spec/components/backlogs/bucket_component_spec.rb

@@ -113,7 +113,8 @@ RSpec.describe Backlogs::BucketComponent, type: :component do
       end
 
       it "renders story points on the work package card" do
-        expect(rendered_component).to have_text("3 points", normalize_ws: true)
+        expect(rendered_component).to have_css("span", text: "3", aria: { hidden: true })
+        expect(rendered_component).to have_css(".sr-only", text: "3 story points")
       end
 
       it "wires the bucket drop-target data on the box" do

modules/backlogs/spec/components/backlogs/inbox_component_spec.rb

@@ -100,8 +100,10 @@ RSpec.describe Backlogs::InboxComponent, type: :component do
     end
 
     it "renders story points on each work package card" do
-      expect(page).to have_text("2 points", normalize_ws: true)
-      expect(page).to have_text("4 points", normalize_ws: true)
+      expect(page).to have_css("span", text: "2", aria: { hidden: true })
+      expect(page).to have_css(".sr-only", text: "2 story points")
+      expect(page).to have_css("span", text: "4", aria: { hidden: true })
+      expect(page).to have_css(".sr-only", text: "4 story points")
     end
   end
 

modules/backlogs/spec/components/backlogs/sprint_component_spec.rb

@@ -80,8 +80,10 @@ RSpec.describe Backlogs::SprintComponent, type: :component do
       end
 
       it "renders story points on each work package card" do
-        expect(rendered_component).to have_text("5 points", normalize_ws: true)
-        expect(rendered_component).to have_text("3 points", normalize_ws: true)
+        expect(rendered_component).to have_css("span", text: "5", aria: { hidden: true })
+        expect(rendered_component).to have_css(".sr-only", text: "5 story points")
+        expect(rendered_component).to have_css("span", text: "3", aria: { hidden: true })
+        expect(rendered_component).to have_css(".sr-only", text: "3 story points")
       end
 
       it "renders one Box-row per work package" do

modules/backlogs/spec/components/backlogs/story_points_component_spec.rb

@@ -33,12 +33,20 @@ require "rails_helper"
 RSpec.describe Backlogs::StoryPointsComponent, type: :component do
   shared_let(:project) { create(:project) }
 
-  it "renders the work package story points" do
+  it "renders the story points number visually" do
     work_package = create(:work_package, project:, story_points: 5)
 
     render_inline(described_class.new(work_package:))
 
-    expect(page).to have_text("5 points", normalize_ws: true)
+    expect(page).to have_css("span", text: "5", aria: { hidden: true })
+  end
+
+  it "renders the story points label for screen readers" do
+    work_package = create(:work_package, project:, story_points: 5)
+
+    render_inline(described_class.new(work_package:))
+
+    expect(page).to have_css(".sr-only", text: "5 story points")
   end
 
   it "renders zero when story points are unset" do
@@ -46,6 +54,7 @@ RSpec.describe Backlogs::StoryPointsComponent, type: :component do
 
     render_inline(described_class.new(work_package:))
 
-    expect(page).to have_text("0 points", normalize_ws: true)
+    expect(page).to have_css("span", text: "0", aria: { hidden: true })
+    expect(page).to have_css(".sr-only", text: "0 story points")
   end
 end

modules/backlogs/spec/components/backlogs/work_package_card_box_item_component_spec.rb

@@ -146,14 +146,15 @@ RSpec.describe Backlogs::WorkPackageCardBoxItemComponent, type: :component do
     subject(:rendered_card) { render_inline(item.card) }
 
     it "builds a Backlogs card with story points" do
-      expect(rendered_card).to have_text("5 points", normalize_ws: true)
+      expect(rendered_card).to have_css("span", text: "5", aria: { hidden: true })
+      expect(rendered_card).to have_css(".sr-only", text: "5 story points")
     end
 
     it "supports caller-provided metric content through the item" do
       item.with_metric { "Custom metric" }
 
       expect(rendered_card).to have_text("Custom metric")
-      expect(rendered_card).to have_no_text("5 points", normalize_ws: true)
+      expect(rendered_card).to have_no_css(".sr-only", text: "5 story points")
     end
 
     context "with a sprint container" do

modules/backlogs/spec/components/backlogs/work_package_card_component_spec.rb

@@ -53,7 +53,8 @@ RSpec.describe Backlogs::WorkPackageCardComponent, type: :component do
   end
 
   it "renders story points as the card metric" do
-    expect(rendered_component).to have_text("5 points", normalize_ws: true)
+    expect(rendered_component).to have_css("span", text: "5", aria: { hidden: true })
+    expect(rendered_component).to have_css(".sr-only", text: "5 story points")
   end
 
   it "supports caller-provided metric content" do
@@ -62,7 +63,7 @@ RSpec.describe Backlogs::WorkPackageCardComponent, type: :component do
     end
 
     expect(rendered).to have_text("Custom metric")
-    expect(rendered).to have_no_text("5 points", normalize_ws: true)
+    expect(rendered).to have_no_css(".sr-only", text: "5 story points")
   end
 
   it "passes the menu source to the common card" do
@@ -83,6 +84,7 @@ RSpec.describe Backlogs::WorkPackageCardComponent, type: :component do
       accessible_name: "Backlogs card actions"
     )
     expect(rendered).to have_no_element "include-fragment"
-    expect(rendered).to have_text("5 points", normalize_ws: true)
+    expect(rendered).to have_css("span", text: "5", aria: { hidden: true })
+    expect(rendered).to have_css(".sr-only", text: "5 story points")
   end
 end