[AGILE-361] Drop the visible selection count

Reserving a line above both planning columns shifted every card beneath
it, which moved drop geometry enough to break positional drags: the
unchanged drag_in_bucket spec failed on reordering to a bucket's first
position and on dragging out to the inbox. Design had not settled on
needing an on-screen count, so it goes rather than earning a workaround.

The shared description stays, renamed with its component: permanently
hidden, so it costs no layout, and it is what tells a screen-reader user
which cards are in the batch. Counts still announce through the live
region.

https://community.openproject.org/wp/AGILE-361

Author: myabc

frontend/src/global_styles/content/modules/_backlogs.sass

@@ -44,11 +44,7 @@
       padding-right: 15px
 
 .op-backlogs-page
-  // A column so the persistent selection count (a sibling of
-  // .op-sprint-planning-container, rendered once above both scroll columns)
-  // stacks above it instead of overlapping it.
-  display: flex
-  flex-direction: column
+  display: block
   height: 100%
   container-name: backlogsListsContainer
   container-type: inline-size
@@ -57,11 +53,7 @@
   display: flex
   flex-direction: row
   gap: var(--stack-gap-normal)
-  // Shares the page height with the selection count above it rather than
-  // claiming the full 100% for itself, which would push it past the bottom
-  // of .op-backlogs-page.
-  flex: 1 1 auto
-  min-height: 0
+  height: 100%
   align-items: stretch
   overflow: hidden
 

frontend/src/stimulus/controllers/dynamic/sortable-lists.controller.ts

@@ -83,8 +83,6 @@ interface MoveAnnouncementContext { label:string|null; listName:string|null; cro
 export default class SortableListsController extends Controller<HTMLElement> implements SortableListsRoot {
   static outlets = ['sortable-lists--list', 'sortable-lists--item', 'sortable-lists--scrollable'];
 
-  static targets = ['selectionCount'];
-
   static values = {
     moveUrlTemplate: String,
     selectionEnabled: { type: Boolean, default: false },
@@ -101,8 +99,6 @@ export default class SortableListsController extends Controller<HTMLElement> imp
   declare readonly selectionEnabledValue:boolean;
   declare readonly announcementScopeValue:string;
   declare readonly selectionDescriptionIdValue:string;
-  declare readonly selectionCountTarget:HTMLElement;
-  declare readonly hasSelectionCountTarget:boolean;
 
   private readonly selection = new BatchSelection();
 
@@ -883,27 +879,6 @@ export default class SortableListsController extends Controller<HTMLElement> imp
 
   private syncSelectionPresentation():void {
     applySelectionPresentation(this.element, this.selection.ids, this.selectionDescriptionIdValue);
-    this.renderSelectionCount();
-  }
-
-  private renderSelectionCount():void {
-    if (!this.hasSelectionCountTarget) {
-      return;
-    }
-
-    const { size } = this.selection;
-    const empty = size <= 1;
-    // Its own key, distinct from the `selected` announcement: the on-screen
-    // count is read alongside the rest of the page's static chrome, not
-    // spoken once at gesture time, so it drops the announcement's trailing
-    // period rather than reusing that sentence verbatim.
-    this.selectionCountTarget.textContent = empty ? '' : this.selectionMessage('count_label');
-    // A class, not the `hidden` attribute: `hidden` pulls the element out
-    // of flow, so the planning columns beneath it jump every time the
-    // selection crosses the one/two-card boundary. The stylesheet keeps
-    // this element's height reserved at all times and only changes its
-    // visibility on this class, so toggling it causes no reflow.
-    this.selectionCountTarget.classList.toggle('op-backlogs-selection-count--empty', empty);
   }
 
   private announceSelection(key:'selected'|'cleared'|'not_selectable'|'range_unavailable'|'range_blocked'|'range_restarted'):void {

modules/backlogs/app/components/_index.sass

@@ -1,2 +1 @@
-@import "./backlogs/selection_count_component.sass"
 @import "./backlogs/work_package_card_list_component.sass"

modules/backlogs/app/components/backlogs/selection_count_component.sass

@@ -27,29 +27,9 @@ See COPYRIGHT and LICENSE files for more details.
 
 ++%>
 
-<%=
-  render(
-    Primer::Box.new(
-      tag: :p,
-      mb: 2,
-      color: :muted,
-      font_size: :small,
-      data: { sortable_lists_target: "selectionCount" },
-      # Off, not merely the browser default: the root already announces
-      # selection changes through the shared Primer live region, so this
-      # region must stay silent or every change would announce twice.
-      aria: { live: :off },
-      # Stays in the layout at all times (no `hidden`/`display: none`): the
-      # stylesheet reserves this element's line height unconditionally, and
-      # `--empty` only ever toggles `visibility`, so a count appearing or
-      # disappearing never pushes the planning columns below it up or down.
-      # The controller flips the same class on selection change; this is
-      # only the empty-until-JS-runs starting state.
-      classes: "op-backlogs-selection-count op-backlogs-selection-count--empty"
-    )
-  )
-%>
-
+<%# Permanently hidden: `aria-describedby` reaches it regardless, and keeping
+    it out of the visual flow is what leaves the planning columns' geometry
+    untouched. %>
 <%= render(Primer::Box.new(tag: :span, id: DESCRIPTION_ID, hidden: true)) do %>
   <%= I18n.t("js.backlogs.selection.card_state") %>
 <% end %>

…klogs/selection_count_component.html.erb …selection_description_component.html.erbmodules/backlogs/app/components/backlogs/selection_count_component.html.erb renamed to modules/backlogs/app/components/backlogs/selection_description_component.html.erb modules/backlogs/app/components/backlogs/selection_count_component.html.erb renamed to modules/backlogs/app/components/backlogs/selection_description_component.html.erb

@@ -29,14 +29,14 @@
 #++
 
 module Backlogs
-  # Persistent visible count of the current batch selection, plus the single
-  # description that every selected card points at.
+  # The single description that every selected card points at through
+  # `aria-describedby`, so batch membership reaches assistive technology per
+  # card without duplicating the string onto every one of them.
   #
-  # Neither carries server-rendered state: the count is client state and would
-  # be stale the moment the next card is selected, and the description is one
-  # shared element so membership reaches assistive technology per card without
-  # duplicating a string onto every card.
-  class SelectionCountComponent < ApplicationComponent
+  # It carries no server-rendered state: selection is client state and would be
+  # stale the moment the next card is selected. The element is permanently
+  # hidden, which is also why it costs the planning columns no layout space.
+  class SelectionDescriptionComponent < ApplicationComponent
     DESCRIPTION_ID = "op-backlogs-batch-selected-description"
   end
 end

…ts/backlogs/selection_count_component.rb …klogs/selection_description_component.rbmodules/backlogs/app/components/backlogs/selection_count_component.rb renamed to modules/backlogs/app/components/backlogs/selection_description_component.rb modules/backlogs/app/components/backlogs/selection_count_component.rb renamed to modules/backlogs/app/components/backlogs/selection_description_component.rb

@@ -29,11 +29,9 @@ See COPYRIGHT and LICENSE files for more details.
 
 <%# Attributes on this frame tag are ignored; only its children are reconciled — set them in show.html.erb. %>
 <%= turbo_frame_tag "backlogs_container" do %>
-  <%# Rendered once, above both scroll columns: the count has to persist and
-      stay visible regardless of which column's selection changed or how far
-      either column has scrolled, and a column's own overflow would carry it
-      out of view if it lived inside one. %>
-  <%= render(Backlogs::SelectionCountComponent.new) %>
+  <%# Rendered once for the whole page: every selected card in either column
+      points its `aria-describedby` at this one element. %>
+  <%= render(Backlogs::SelectionDescriptionComponent.new) %>
 
   <div class="op-sprint-planning-container">
     <div id="owner_backlogs_container" class="op-sprint-planning-lists" data-controller="sortable-lists--scrollable">

modules/backlogs/app/views/backlogs/backlog/_backlog_list.html.erb

@@ -54,7 +54,7 @@ See COPYRIGHT and LICENSE files for more details.
                         sortable_lists_selection_enabled_value: true,
                         sortable_lists_announcement_scope_value: "js.backlogs.selection",
                         sortable_lists_selection_description_id_value:
-                          Backlogs::SelectionCountComponent::DESCRIPTION_ID,
+                          Backlogs::SelectionDescriptionComponent::DESCRIPTION_ID,
                         sortable_lists_sortable_lists__list_outlet: "#backlogs_container [data-controller~='sortable-lists--list']",
                         sortable_lists_sortable_lists__item_outlet: "#backlogs_container [data-controller~='sortable-lists--item']",
                         sortable_lists_sortable_lists__scrollable_outlet: "#backlogs_container [data-controller~='sortable-lists--scrollable']"

modules/backlogs/app/views/backlogs/backlog/show.html.erb

@@ -33,9 +33,6 @@ en:
       selection:
         card_state: "Selected"
         cleared: "Selection cleared."
-        count_label:
-          one: "1 work package selected"
-          other: "%{count} work packages selected"
         not_selectable: "Selection unchanged. This work package cannot be selected because it cannot be moved."
         range_blocked: "Selection unchanged. That range contains a work package that cannot be moved."
         range_restarted:

modules/backlogs/config/locales/js-en.yml

@@ -30,41 +30,23 @@
 
 require "rails_helper"
 
-RSpec.describe Backlogs::SelectionCountComponent, type: :component do
+RSpec.describe Backlogs::SelectionDescriptionComponent, type: :component do
   subject(:rendered_component) { render_inline(described_class.new) && page }
 
-  # Capybara::Node::Simple (what `render_inline`'s `page` is backed by) only
-  # ever treats the `hidden` attribute, inline `display: none`, and a few tag
-  # names as invisible — it never evaluates CSS, so it cannot see the
-  # `visibility: hidden` this component now hides itself with. Every
-  # assertion below therefore uses `visible: :all` rather than `:hidden`:
-  # under Simple's rules this element reads as "visible" regardless of the
-  # empty-state class, in both states, so `:hidden` would find nothing.
-  # The real invisibility is exercised by the feature spec's Selenium
-  # driver, which does evaluate computed style correctly.
-
-  it "renders a count region wired to the sortable-lists root" do
-    expect(rendered_component).to have_css('[data-sortable-lists-target="selectionCount"]', visible: :all)
-  end
-
-  it "starts empty, because a count of nothing is noise" do
-    expect(rendered_component)
-      .to have_css('[data-sortable-lists-target="selectionCount"].op-backlogs-selection-count--empty',
-                   visible: :all)
-  end
-
-  it "never carries the hidden attribute, because that would pull it out of flow and reflow the columns below it" do
-    expect(rendered_component)
-      .to have_no_css('[data-sortable-lists-target="selectionCount"][hidden]', visible: :all)
-  end
-
-  it "renders no count text server-side" do
-    expect(rendered_component.find('[data-sortable-lists-target="selectionCount"]', visible: :all).text).to eq("")
-  end
+  # `visible: :all` because the element is permanently `hidden`, which is the
+  # one form of invisibility Capybara::Node::Simple does honour.
 
   it "renders the description every selected card points at" do
     expect(rendered_component)
       .to have_css("##{described_class::DESCRIPTION_ID}", text: I18n.t("js.backlogs.selection.card_state"),
                                                           visible: :all)
   end
+
+  # `hidden` is what keeps this out of the planning columns' layout entirely,
+  # which is the whole reason the visible count that used to sit beside it is
+  # gone: reserving space above two independently scrolling columns moved the
+  # cards under the user's cursor mid-drag.
+  it "keeps the description hidden, since only aria-describedby reaches it" do
+    expect(rendered_component).to have_css("##{described_class::DESCRIPTION_ID}[hidden]", visible: :all)
+  end
 end