Merge pull request #1 from e218736/favourites-dialog-box

Favourites dialog box keyboard navigation

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/html/index.html

@@ -536,7 +536,7 @@
                     <div class="modal-body" id="favourites-body">
                         <ul>
                             <li><span style="font-weight: bold">To add:</span> drag the operation over the favourites category and drop it</li>
-                            <li><span style="font-weight: bold">To reorder:</span> drag up and down in the list below</li>
+                            <li><span style="font-weight: bold">To reorder:</span> drag up and down in the list below or focus on operation and press Ctrl + Up/Down Arrow to reorder using keyboard</li>
                             <li><span style="font-weight: bold">To remove:</span> hit the delete button or drag out of the list below</li>
                         </ul>
                         <br>

src/web/waiters/OperationsWaiter.mjs

@@ -236,9 +236,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) {
@@ -269,6 +276,66 @@ 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 imitate 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 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 delete favourites keydown events.
+     * delete the selected favourite from the list.
+     */
+    deleteFavourite(event) {
+        if (event.key === "Enter" || event.key === " ") {
+            const el = event.target;
+            if (el && el.parentNode) {
+                el.parentNode.remove();
+            }
+        }
+    }
+
+
     /**
      * Handler for save favourites click events.
      * Saves the selected favourites and reloads them.