[#73473] Make entire WP card draggable

Uses existing Dragula-based `generic-drag-and-drop.controller`, adding
support for a `handle` Boolean value (rather than relying on an empty
`handle-selector` value, since empty attribute values can be ambiguous
in HTML).

Author: myabc

frontend/src/assets/sass/backlogs/_master_backlog.sass

@@ -38,9 +38,6 @@ $op-backlogs-header--points-min-width-narrow: 2rem
   grid-template-columns: 1fr minmax($op-backlogs-header--points-min-width, max-content) auto
   align-items: center
 
-  &--collapsible
-    margin-left: calc(var(--stack-padding-normal) / 2)
-
   &--actions
     margin-left: var(--stack-gap-normal)
 
@@ -67,16 +64,13 @@ $op-backlogs-header--points-min-width-narrow: 2rem
 
 .op-backlogs-story
   display: grid
-  grid-template-columns: var(--control-xsmall-size) 1fr minmax($op-backlogs-header--points-min-width, max-content) auto
+  grid-template-columns: 1fr minmax($op-backlogs-header--points-min-width, max-content) auto
   grid-template-rows: auto auto
-  grid-template-areas: "drag_handle info_line points menu" ". subject subject subject"
+  grid-template-areas: "info_line points menu" "subject subject subject"
   align-items: center
   margin-top: calc(-1 * var(--base-size-4))
   margin-bottom: var(--base-size-4)
 
-.op-backlogs-story--drag_handle_button
-  padding: var(--base-size-4)
-
 .op-backlogs-story--points
   margin-left: var(--stack-gap-normal)
   font-variant-numeric: tabular-nums
@@ -168,7 +162,7 @@ $op-backlogs-header--points-min-width-narrow: 2rem
     display: none
 
   .op-backlogs-story
-    grid-template-columns: var(--control-xsmall-size) 1fr minmax($op-backlogs-header--points-min-width-narrow, max-content) auto
+    grid-template-columns: 1fr minmax($op-backlogs-header--points-min-width-narrow, max-content) auto
 
   .op-backlogs-container, .op-sprint-planning-container
     height: unset

frontend/src/global_styles/primer/_overrides.sass

@@ -168,7 +168,7 @@ ul.SegmentedControl,
   cursor: pointer
 
 .Box-row:is(.Box-row--draggable)
-  padding-left: 0
+  cursor: grab
 
 // Apply the mobile styles as soon as the banner itself is small
 // Styles are copied from the PVC repo

frontend/src/stimulus/controllers/dynamic/generic-drag-and-drop.controller.spec.ts

@@ -0,0 +1,150 @@
+/*
+ * -- copyright
+ * OpenProject is an open source project management software.
+ * Copyright (C) the OpenProject GmbH
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 3.
+ *
+ * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+ * Copyright (C) 2006-2013 Jean-Philippe Lang
+ * Copyright (C) 2010-2013 the ChiliProject Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * See COPYRIGHT and LICENSE files for more details.
+ * ++
+ */
+
+import GenericDragAndDropController from './generic-drag-and-drop.controller';
+
+describe('GenericDragAndDropController', () => {
+  let controller:GenericDragAndDropController;
+
+  beforeEach(() => {
+    controller = Object.create(GenericDragAndDropController.prototype) as GenericDragAndDropController;
+  });
+
+  function setValue(name:'handleValue'|'handleSelectorValue', value:boolean|string) {
+    Object.defineProperty(controller, name, { value, configurable: true });
+  }
+
+  function draggableRow() {
+    const row = document.createElement('li');
+    row.className = 'Box-row Box-row--draggable';
+    row.tabIndex = 0;
+    row.dataset.draggableId = '42';
+    row.dataset.draggableType = 'story';
+    row.dataset.dropUrl = '/drop';
+    return row;
+  }
+
+  function callCanStartDrag(el:Element|null|undefined, handle:Element|null|undefined):boolean {
+    const canStartDrag = Reflect.get(controller, 'canStartDrag') as (
+      this:GenericDragAndDropController,
+      el:Element|null|undefined,
+      handle:Element|null|undefined
+    ) => boolean;
+
+    return canStartDrag.call(controller, el, handle);
+  }
+
+  function callAriaPressedTarget(el:Element):Element|null {
+    const ariaPressedTarget = Reflect.get(controller, 'ariaPressedTarget') as (
+      this:GenericDragAndDropController,
+      el:Element
+    ) => Element|null;
+
+    return ariaPressedTarget.call(controller, el);
+  }
+
+  describe('canStartDrag', () => {
+    it('allows dragging a draggable row in handle-less mode', () => {
+      const row = draggableRow();
+
+      setValue('handleValue', false);
+      setValue('handleSelectorValue', '.DragHandle');
+
+      expect(callCanStartDrag(row, row)).toBeTrue();
+    });
+
+    it('rejects rows that are not draggable in handle-less mode', () => {
+      const row = document.createElement('li');
+      row.className = 'Box-row';
+      row.tabIndex = 0;
+
+      setValue('handleValue', false);
+      setValue('handleSelectorValue', '.DragHandle');
+
+      expect(callCanStartDrag(row, row)).toBeFalse();
+    });
+
+    it('rejects empty placeholder rows in handle-less mode', () => {
+      const row = draggableRow();
+      row.dataset.emptyListItem = 'true';
+
+      setValue('handleValue', false);
+      setValue('handleSelectorValue', '.DragHandle');
+
+      expect(callCanStartDrag(row, row)).toBeFalse();
+    });
+
+    it('rejects interactive descendants in handle-less mode', () => {
+      const row = draggableRow();
+      const button = document.createElement('button');
+      row.appendChild(button);
+
+      setValue('handleValue', false);
+      setValue('handleSelectorValue', '.DragHandle');
+
+      expect(callCanStartDrag(row, button)).toBeFalse();
+    });
+
+    it('allows drag handles in handle mode', () => {
+      const row = draggableRow();
+      const handle = document.createElement('button');
+      handle.className = 'DragHandle';
+      row.appendChild(handle);
+
+      setValue('handleValue', true);
+      setValue('handleSelectorValue', '.DragHandle');
+
+      expect(callCanStartDrag(row, handle)).toBeTrue();
+    });
+  });
+
+  describe('ariaPressedTarget', () => {
+    it('returns null in handle-less mode', () => {
+      const row = draggableRow();
+
+      setValue('handleValue', false);
+      setValue('handleSelectorValue', '.DragHandle');
+
+      expect(callAriaPressedTarget(row)).toBeNull();
+    });
+
+    it('returns the handle element in handle mode', () => {
+      const row = draggableRow();
+      const handle = document.createElement('button');
+      handle.className = 'DragHandle';
+      row.appendChild(handle);
+
+      setValue('handleValue', true);
+      setValue('handleSelectorValue', '.DragHandle');
+
+      expect(callAriaPressedTarget(row)).toBe(handle);
+    });
+  });
+});

frontend/src/stimulus/controllers/dynamic/generic-drag-and-drop.controller.ts

@@ -31,6 +31,7 @@
 import { Controller } from '@hotwired/stimulus';
 import { FetchRequest } from '@rails/request.js';
 import { debugLog } from 'core-app/shared/helpers/debug_output';
+import { isInteractiveElement } from 'core-stimulus/helpers/interactive-element-helper';
 import type { DomAutoscrollService } from 'core-app/shared/helpers/drag-and-drop/dom-autoscroll.service';
 import dragula, { Drake } from 'dragula';
 import invariant from 'tiny-invariant';
@@ -48,10 +49,12 @@ export default class GenericDragAndDropController extends Controller {
   scrollContainerTargets:HTMLElement[];
 
   static values = {
+    handle: { type: Boolean, default: true },
     handleSelector: { type: String, default: '.DragHandle' },
     positionMode: { type: String, default: 'index' },
   };
 
+  declare readonly handleValue:boolean;
   declare readonly handleSelectorValue:string;
   declare readonly positionModeValue:string;
 
@@ -118,7 +121,7 @@ export default class GenericDragAndDropController extends Controller {
     this.drake = dragula(
       this.containers,
       {
-        moves: (_el, _source, handle, _sibling) => !!handle && !!handle.closest(this.handleSelectorValue),
+        moves: (el, _source, handle, _sibling) => this.canStartDrag(el, handle),
         accepts: (el:Element, target:Element, source:Element, sibling:Element) => this.accepts(el, target, source, sibling),
         revertOnSpill: true, // enable reverting of elements if they are dropped outside of a valid target
       },
@@ -127,13 +130,11 @@ export default class GenericDragAndDropController extends Controller {
         this.dragOriginSource = source;
         this.dragOriginNextSibling = el.nextElementSibling;
 
-        const handle = el.querySelector(this.handleSelectorValue)!;
-        handle.setAttribute('aria-pressed', 'true');
+        this.ariaPressedTarget(el)?.setAttribute('aria-pressed', 'true');
       })
       .on('dragend', (el) => {
-        const handle = el.querySelector(this.handleSelectorValue)!;
-        handle.setAttribute('aria-pressed', 'false');
-       })
+        this.ariaPressedTarget(el)?.setAttribute('aria-pressed', 'false');
+      })
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       .on('drop', this.drop.bind(this));
 
@@ -215,6 +216,44 @@ export default class GenericDragAndDropController extends Controller {
     return data;
   }
 
+  private canStartDrag(el:Element|null|undefined, handle:Element|null|undefined):boolean {
+    if (!this.isDraggableElement(el)) {
+      return false;
+    }
+
+    if (!this.handleValue) {
+      return !this.hasInteractiveDragStart(el, handle);
+    }
+
+    return handle?.closest(this.handleSelectorValue) != null;
+  }
+
+  private hasInteractiveDragStart(el:Element|null|undefined, handle:Element|null|undefined):boolean {
+    if (!el) {
+      return false;
+    }
+
+    let current = handle;
+
+    while (current && current !== el) {
+      if (isInteractiveElement(current)) {
+        return true;
+      }
+
+      current = current.parentElement;
+    }
+
+    return false;
+  }
+
+  private isDraggableElement(el:Element|null|undefined):boolean {
+    return el instanceof HTMLElement
+      && el.getAttribute('data-empty-list-item') !== 'true'
+      && el.dataset.draggableId !== undefined
+      && el.dataset.draggableType !== undefined
+      && el.dataset.dropUrl !== undefined;
+  }
+
   // if the target has a container accessor, use that as the container instead of the element itself
   // we need this e.g. in Primer's borderbox component as we cannot add required data attributes to the ul element there
   private resolveContainerElement(target:HTMLElement):HTMLElement {
@@ -245,4 +284,9 @@ export default class GenericDragAndDropController extends Controller {
 
     return targetPosition + 1;
   }
+
+  private ariaPressedTarget(el:Element):Element|null {
+    if (!this.handleValue) return null;
+    return el.querySelector(this.handleSelectorValue);
+  }
 }

frontend/src/stimulus/helpers/interactive-element-helper.ts

@@ -0,0 +1,73 @@
+/*
+ * -- copyright
+ * OpenProject is an open source project management software.
+ * Copyright (C) the OpenProject GmbH
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 3.
+ *
+ * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+ * Copyright (C) 2006-2013 Jean-Philippe Lang
+ * Copyright (C) 2010-2013 the ChiliProject Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * See COPYRIGHT and LICENSE files for more details.
+ * ++
+ */
+
+const ariaInteractiveRoles = new Set([
+  'button',
+  'checkbox',
+  'combobox',
+  'link',
+  'listbox',
+  'menuitem',
+  'menuitemcheckbox',
+  'menuitemradio',
+  'option',
+  'radio',
+  'slider',
+  'spinbutton',
+  'switch',
+  'tab',
+  'textbox',
+  'treeitem',
+]);
+
+export function isInteractiveElement(el:Element|null):el is HTMLElement {
+  if (!(el instanceof HTMLElement)) return false;
+  if (el.hasAttribute('disabled')) return false;
+  if (el.getAttribute('aria-disabled') === 'true') return false;
+  if (el.hidden) return false;
+
+  const tag = el.tagName.toLowerCase();
+  const role = el.getAttribute('role');
+  const tabIndex = el.tabIndex;
+
+  const nativeInteractive = tag === 'button'
+    || tag === 'select'
+    || tag === 'textarea'
+    || tag === 'summary'
+    || (tag === 'input' && (el as HTMLInputElement).type !== 'hidden')
+    || (tag === 'a' && el.hasAttribute('href'))
+    || (tag === 'audio' && el.hasAttribute('controls'))
+    || (tag === 'video' && el.hasAttribute('controls'));
+
+  return nativeInteractive
+    || (role != null && ariaInteractiveRoles.has(role))
+    || el.isContentEditable
+    || tabIndex >= 0;
+}

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

@@ -29,16 +29,6 @@ See COPYRIGHT and LICENSE files for more details.
 
 <% container.with_row(**row_options) do %>
   <%= grid_layout("op-backlogs-story", tag: :article) do |grid| %>
-    <% grid.with_area(:drag_handle, classes: "hide-when-print") do %>
-      <%= if draggable?
-            render(
-              Primer::OpenProject::DragHandle.new(
-                classes: "op-backlogs-story--drag_handle_button",
-                label: t(".label_drag_work_package", name: work_package.subject)
-              )
-            )
-          end %>
-    <% end %>
     <% grid.with_area(:info_line) do %>
       <%= render(WorkPackages::InfoLineComponent.new(work_package:)) %>
     <% end %>