show sort buttons if user fails at drag and drop, add labels for accessibility

src/pretix/control/templates/pretixcontrol/items/categories.html

@@ -41,15 +41,15 @@
                             <strong><a href="{% url "control:event.items.categories.edit" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}">{{ c.internal_name|default:c.name }}</a></strong>
                         </td>
                         <td class="text-right flip">
-                            <button formaction="{% url "control:event.items.categories.up" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-default btn-sm sortable-up"{% if forloop.counter0 == 0 and not page_obj.has_previous %} disabled{% endif %}><i class="fa fa-arrow-up"></i></button>
-                            <button formaction="{% url "control:event.items.categories.down" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-default btn-sm sortable-down"{% if forloop.revcounter0 == 0 and not page_obj.has_next %} disabled{% endif %}><i class="fa fa-arrow-down"></i></button>
-                            <span class="dnd-container"></span>
-                            <a href="{% url "control:event.items.categories.edit" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-default btn-sm"><i class="fa fa-edit"></i></a>
+                            <button title="{% trans "Move up" %}" formaction="{% url "control:event.items.categories.up" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-default btn-sm sortable-up"{% if forloop.counter0 == 0 and not page_obj.has_previous %} disabled{% endif %}><i class="fa fa-arrow-up"></i></button>
+                            <button title="{% trans "Move down" %}" formaction="{% url "control:event.items.categories.down" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-default btn-sm sortable-down"{% if forloop.revcounter0 == 0 and not page_obj.has_next %} disabled{% endif %}><i class="fa fa-arrow-down"></i></button>
+                            <span class="dnd-container" title="{% trans "Click and drag this button to reorder. Double click to show buttons for reordering." %}"></span>
+                            <a title="{% trans "Edit" %}" href="{% url "control:event.items.categories.edit" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-default btn-sm"><i class="fa fa-edit"></i></a>
                             <a href="{% url "control:event.items.categories.add" organizer=request.event.organizer.slug event=request.event.slug %}?copy_from={{ c.id }}"
                                class="btn btn-sm btn-default" title="{% trans "Clone" %}" data-toggle="tooltip">
                                 <span class="fa fa-copy"></span>
                             </a>
-                            <a href="{% url "control:event.items.categories.delete" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
+                            <a title="{% trans "Delete" %}" href="{% url "control:event.items.categories.delete" organizer=request.event.organizer.slug event=request.event.slug category=c.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>
                         </td>
                     </tr>
                 {% endfor %}

src/pretix/control/templates/pretixcontrol/items/discounts.html

@@ -129,14 +129,14 @@
                             {% endif %}
                             <td class="text-right flip">
                                 <button formaction="{% url "control:event.items.discounts.up" organizer=request.event.organizer.slug event=request.event.slug discount=d.id %}"
-                                        class="btn btn-default btn-sm sortable-up"
+                                        class="btn btn-default btn-sm sortable-up" title="{% trans "Move up" %}"
                                         {% if forloop.counter0 == 0 and not page_obj.has_previous %}
                                         disabled{% endif %}><i class="fa fa-arrow-up"></i></button>
                                 <button formaction="{% url "control:event.items.discounts.down" organizer=request.event.organizer.slug event=request.event.slug discount=d.id %}"
-                                        class="btn btn-default btn-sm sortable-down"
+                                        class="btn btn-default btn-sm sortable-down" title="{% trans "Move down" %}"
                                         {% if forloop.revcounter0 == 0 and not page_obj.has_next %} disabled{% endif %}>
                                     <i class="fa fa-arrow-down"></i></button>
-                                <span class="dnd-container"></span>
+                                <span class="dnd-container" title="{% trans "Click and drag this button to reorder. Double click to show buttons for reordering." %}"></span>
                                 <a href="{% url "control:event.items.discounts.edit" organizer=request.event.organizer.slug event=request.event.slug discount=d.id %}"
                                    class="btn btn-default btn-sm"><i class="fa fa-edit"></i></a>
                                 <a href="{% url "control:event.items.discounts.add" organizer=request.event.organizer.slug event=request.event.slug %}?copy_from={{ d.id }}"

src/pretix/control/templates/pretixcontrol/items/index.html

@@ -136,9 +136,9 @@
                                 {% endif %}
                             </td>
                             <td class="text-right flip col-actions">
-                                <button formaction="{% url "control:event.items.up" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-default btn-sm sortable-up"{% if forloop.counter0 == 0 %} disabled{% endif %}><i class="fa fa-arrow-up"></i></button>
-                                <button formaction="{% url "control:event.items.down" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-default btn-sm sortable-down"{% if forloop.revcounter0 == 0 %} disabled{% endif %}><i class="fa fa-arrow-down"></i></button>
-                                <span class="dnd-container"></span>
+                                <button title="{% trans "Move up" %}" formaction="{% url "control:event.items.up" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-default btn-sm sortable-up"{% if forloop.counter0 == 0 %} disabled{% endif %}><i class="fa fa-arrow-up"></i></button>
+                                <button title="{% trans "Move down" %}" formaction="{% url "control:event.items.down" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-default btn-sm sortable-down"{% if forloop.revcounter0 == 0 %} disabled{% endif %}><i class="fa fa-arrow-down"></i></button>
+                                <span class="dnd-container" title="{% trans "Click and drag this button to reorder. Double click to show buttons for reordering." %}"></span>
                                 <a href="{% url "control:event.item" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-default btn-sm"><i class="fa fa-edit"></i></a>
                                 <a href="{% url "control:event.items.add" organizer=request.event.organizer.slug event=request.event.slug %}?copy_from={{ i.id }}" class="btn btn-default btn-sm" title="{% trans "Clone" %}" data-toggle="tooltip"><i class="fa fa-copy"></i></a>
                                 <a href="{% url "control:event.items.delete" organizer=request.event.organizer.slug event=request.event.slug item=i.id %}" class="btn btn-danger btn-sm"><i class="fa fa-trash"></i></a>

src/pretix/control/templates/pretixcontrol/organizers/properties.html

@@ -51,9 +51,9 @@
                         {% endif %}
                     </td>
                     <td>
-                        <button formaction="{% url "control:organizer.property.up" organizer=request.organizer.slug property=p.id %}" class="btn btn-default btn-sm sortable-up"{% if forloop.counter0 == 0 and not page_obj.has_previous %} disabled{% endif %}><i class="fa fa-arrow-up"></i></button>
-                        <button formaction="{% url "control:organizer.property.down" organizer=request.organizer.slug property=p.id %}" class="btn btn-default btn-sm sortable-down"{% if forloop.revcounter0 == 0 and not page_obj.has_next %} disabled{% endif %}><i class="fa fa-arrow-down"></i></button>
-                        <span class="dnd-container"></span>
+                        <button title="{% trans "Move up" %}" formaction="{% url "control:organizer.property.up" organizer=request.organizer.slug property=p.id %}" class="btn btn-default btn-sm sortable-up"{% if forloop.counter0 == 0 and not page_obj.has_previous %} disabled{% endif %}><i class="fa fa-arrow-up"></i></button>
+                        <button title="{% trans "Move down" %}" formaction="{% url "control:organizer.property.down" organizer=request.organizer.slug property=p.id %}" class="btn btn-default btn-sm sortable-down"{% if forloop.revcounter0 == 0 and not page_obj.has_next %} disabled{% endif %}><i class="fa fa-arrow-down"></i></button>
+                        <span class="dnd-container" title="{% trans "Click and drag this button to reorder. Double click to show buttons for reordering." %}"></span>
                     </td>
                     <td class="text-right flip">
                         <a href="{% url "control:organizer.property.edit" organizer=request.organizer.slug property=p.id %}"

src/pretix/static/pretixcontrol/js/ui/dragndroplist.js

@@ -1,7 +1,7 @@
 /*global $, Sortable*/
 $(function () {
     $("[data-dnd-url]").each(function(){
-        var container = $(this),
+        const container = $(this),
             url = container.data("dnd-url"),
             handle = $('<span class="btn btn-default btn-sm dnd-sort-handle"><i class="fa fa-arrows"></i></span>');
 
@@ -11,7 +11,14 @@ $(function () {
             handle.addClass("disabled");
             return;
         }
-
+        let didSort = false, lastClick = 0;
+        function handleMouseUp() {
+            if (Date.now() - lastClick < 6000) {
+                container.find(".sortable-up, .sortable-down").removeClass("sr-only");
+            }
+            lastClick = Date.now();
+        }
+        container.find(".dnd-sort-handle").on("mouseup", handleMouseUp);
         Sortable.create(container.get(0), {
             filter: ".sortable-disabled",
             handle: ".dnd-sort-handle",
@@ -22,16 +29,18 @@ $(function () {
             onStart: function (evt) {
                 container.addClass("sortable-dragarea");
                 container.parent().addClass("sortable-sorting");
+                didSort = false;
             },
             onEnd: function (evt) {
                 container.removeClass("sortable-dragarea");
                 container.parent().removeClass("sortable-sorting");
+                if (!didSort) handleMouseUp();
             },
             onSort: function (evt){
                 if (evt.target !== evt.to) return;
+                didSort = true;
 
-                var ids = container.find("[data-dnd-id]").toArray().map(function (e) { return e.dataset.dndId; });
-
+                const ids = container.find("[data-dnd-id]").toArray().map(function (e) { return e.dataset.dndId; });
                 $.ajax(
                     {
                         'type': 'POST',