reorder fav list with keyboard

src/web/HTMLOperation.mjs

@@ -52,14 +52,14 @@ class HTMLOperation {
             const infoLink = this.infoURL ? `<hr>${titleFromWikiLink(this.infoURL)}` : "";
 
             html += ` data-container='body' data-toggle='popover' data-placement='right'
-                data-content="${this.description}${infoLink}" data-html='true' data-trigger='hover'
+                data-content="${this.description}${infoLink}" data-html='true' data-trigger='hover focus'
                 data-boundary='viewport'`;
         }
 
         html += ">" + this.name;
 
         if (removeIcon) {
-            html += "<i class='material-icons remove-icon op-icon'>delete</i>";
+            html += "<i class='material-icons remove-icon op-icon' tabindex='0'>delete</i>";
         }
 
         html += "</li>";

src/web/waiters/OperationsWaiter.mjs

@@ -237,9 +237,16 @@ class OperationsWaiter {
         }
 
         const editFavouritesList = document.getElementById("edit-favourites-list");
+        const editFavouritesListElements = editFavouritesList.getElementsByTagName('li');
         editFavouritesList.innerHTML = html;
         this.removeIntent = false;
 
+        for (let i = 0; i < editFavouritesListElements.length; i++) {
+            editFavouritesListElements[i].setAttribute("tabindex", "0");
+            editFavouritesListElements[i].addEventListener("keydown", this.ArrowNavFavourites.bind(this), false)
+            editFavouritesListElements[i].firstElementChild.addEventListener("keydown", this.deleteFavourite.bind(this), false)
+        }
+
         const editableList = Sortable.create(editFavouritesList, {
             filter: ".remove-icon",
             onFilter: function (evt) {
@@ -270,6 +277,69 @@ class OperationsWaiter {
     }
 
 
+    /**
+     * Handler for navigation key press events.
+     * Navigates through the favourites list and corresponding delete buttons.
+     * Move favourites elements up and down with Ctrl + Arrow keys to imite drag and drop mouse functionality. 
+     */
+    ArrowNavFavourites(event) {
+            const currentElement = event.target;
+            const nextElement = currentElement.nextElementSibling;
+            const prevElement = currentElement.previousElementSibling;
+            const favouritesList = currentElement.parentNode;
+
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.key === "ArrowDown" && !event.ctrlKey) {
+                if (nextElement === null) {
+                    currentElement.parentElement.firstElementChild.focus();
+                } else {
+                    nextElement.focus();
+                }
+            } else if (event.key === "ArrowUp" && !event.ctrlKey) {
+                if (prevElement === null) {
+                    currentElement.parentElement.lastElementChild.focus();
+                } else {
+                    prevElement.focus();
+                }
+            } else if (event.key === "Tab") {
+                currentElement.parentElement.closest(".modal-body").nextElementSibling.getElementsByTagName("Button")[0].focus();
+            } else if (event.key === "ArrowRight" ) {
+                if (currentElement.firstElementChild !== null) {
+                    currentElement.firstElementChild.focus();
+                } else {
+                    return
+                }
+            } else if (event.key === "ArrowLeft" && (currentElement.classList.contains("remove-icon"))) {
+                currentElement.parentElement.focus();
+            } else if (event.ctrlKey && event.key === "ArrowDown") {
+                
+                if (nextElement === null) {
+                    favouritesList.insertBefore(currentElement, currentElement.parentElement.firstElementChild)
+                } else {
+                    favouritesList.insertBefore(currentElement, nextElement.nextElementSibling)
+            }
+                currentElement.focus();
+            } else if (event.ctrlKey && event.key === "ArrowUp") {
+                favouritesList.insertBefore(currentElement, prevElement)
+                currentElement.focus();
+}
+}
+
+    /**
+     * Handler for save favourites click events.
+     * Saves the selected favourites and reloads them.
+     */
+    deleteFavourite(event) {
+        if (event.key === "Enter") {
+        const el = event.target
+        if (el && el.parentNode) {
+        el.parentNode.remove();
+    }
+    }
+}
+
+
     /**
      * Handler for save favourites click events.
      * Saves the selected favourites and reloads them.