From 735aaa95bf42e4456337dc3f72a6720f705c32d4 Mon Sep 17 00:00:00 2001
From: Aman Pandey <aman2001mi@gmail.com>
Date: Thu, 11 Jan 2024 13:15:55 +0530
Subject: [PATCH] Adopt w-orderable for page order drag & drop/move

- Fixes #10909
---
 client/scss/components/_listing.scss          | 21 +++++--------------
 .../pages/listing/_ordering_cell.html         | 14 ++++++++++---
 wagtail/admin/ui/tables/pages.py              |  4 +++-
 wagtail/admin/views/pages/listing.py          | 16 +++++++++++---
 4 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/client/scss/components/_listing.scss b/client/scss/components/_listing.scss
index 58a2fd8856..d4394a15e8 100644
--- a/client/scss/components/_listing.scss
+++ b/client/scss/components/_listing.scss
@@ -349,17 +349,7 @@ ul.listing {
     }
   }
 
-  .handle {
-    cursor: move;
-    width: 20px;
-    color: theme('colors.icon-secondary');
-
-    &:hover {
-      color: theme('colors.icon-secondary-hover');
-    }
-  }
-
-  .ui-sortable-helper {
+  .w-orderable__item--active {
     border: 1px dashed theme('colors.border-field-default');
     border-width: 1px 0;
 
@@ -373,6 +363,10 @@ ul.listing {
     }
   }
 
+  .w-orderable__item__handle {
+    cursor: move;
+  }
+
   table .no-results-message {
     padding-inline-start: 20px;
   }
@@ -661,11 +655,6 @@ table.listing {
 td.ord {
   // Align with the row's title text, and the column's label.
   vertical-align: top;
-
-  .handle {
-    width: 100%;
-    text-align: center;
-  }
 }
 
 table.listing {
diff --git a/wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_cell.html b/wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_cell.html
index 4b467d1c20..d5723c386a 100644
--- a/wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_cell.html
+++ b/wagtail/admin/templates/wagtailadmin/pages/listing/_ordering_cell.html
@@ -1,10 +1,18 @@
 {% load i18n wagtailadmin_tags %}
 <td class="ord">
-    <div class="handle" tabindex="0" aria-live="polite" data-order-handle>
+    <button
+        class="w-orderable__item__handle button button-small text-replace button--icon"
+        type="button"
+        aria-live="polite"
+        data-w-orderable-target="handle"
+        data-action="keydown.up->w-orderable#up:prevent keydown.down->w-orderable#down:prevent keydown.enter->w-orderable#apply blur->w-orderable#apply"
+    >
         {% icon name="grip" classname="default" %}
         <span class="w-sr-only">
             {% trans 'Drag' %}
-            <span data-order-label>Item {{ row.index|add:1 }} of {{ table.row_count }}</span>
+            <span>
+                {% blocktranslate trimmed with index=row.index|add:1 total=table.row_count %}Item {{ index }} of {{ total }}{% endblocktranslate %}
+            </span>
         </span>
-    </div>
+    </button>
 </td>
diff --git a/wagtail/admin/ui/tables/pages.py b/wagtail/admin/ui/tables/pages.py
index db8acaf902..122577dfe4 100644
--- a/wagtail/admin/ui/tables/pages.py
+++ b/wagtail/admin/ui/tables/pages.py
@@ -131,7 +131,9 @@ class PageTable(Table):
         attrs = super().get_row_attrs(instance)
         if self.use_row_ordering_attributes:
             attrs["id"] = "page_%d" % instance.id
-            attrs["data-page-title"] = instance.get_admin_display_title()
+            attrs["data-w-orderable-item-id"] = instance.id
+            attrs["data-w-orderable-item-label"] = instance.get_admin_display_title()
+            attrs["data-w-orderable-target"] = "item"
         return attrs
 
     def get_context_data(self, parent_context):
diff --git a/wagtail/admin/views/pages/listing.py b/wagtail/admin/views/pages/listing.py
index eed9b0113e..4db4d2f7af 100644
--- a/wagtail/admin/views/pages/listing.py
+++ b/wagtail/admin/views/pages/listing.py
@@ -5,7 +5,6 @@ from django.db.models import Count
 from django.forms import CheckboxSelectMultiple, RadioSelect
 from django.shortcuts import get_object_or_404, redirect
 from django.urls import reverse
-from django.utils.translation import gettext
 from django.utils.translation import gettext_lazy as _
 from django_filters.filters import (
     ChoiceFilter,
@@ -322,9 +321,20 @@ class BaseIndexView(generic.IndexView):
 
         if self.show_ordering_column:
             kwargs["attrs"] = {
-                "aria-description": gettext(
-                    "Press enter to select an item, use up and down arrows to move the item, press enter to complete the move or escape to cancel the current move."
+                "aria-description": _(
+                    "Press enter to select an item, use up and down arrows to move the item. Pressing enter or moving to a different item will complete the move."
+                ),
+                "data-controller": "w-orderable",
+                "data-w-orderable-active-class": "w-orderable--active",
+                "data-w-orderable-chosen-class": "w-orderable__item--active",
+                "data-w-orderable-container-value": "tbody",
+                "data-w-orderable-message-value": _(
+                    "'%(page_title)s' has been moved successfully."
                 )
+                % {"page_title": "__LABEL__"},
+                "data-w-orderable-url-value": reverse(
+                    "wagtailadmin_pages:set_page_position", args=[999999]
+                ),
             }
         return kwargs