HFP-3847 Improve draggable handling accessibility

src/scripts/drag-text.js

@@ -935,6 +935,14 @@ H5P.DragText = (function ($, Question, ConfirmationDialog) {
     return draggable;
   };
 
+  /**
+   * Get index of currently hovered droppable.
+   * @returns {number} 0-based index of hovered droppable, or -1 if none is hovered.
+   */
+  DragText.prototype.getHoveredDroppableIndex = function() {
+    return this.hoveredDroppables.length > 0 ? this.hoveredDroppables[this.hoveredDroppables.length - 1] : -1;
+  };
+
   /**
    * Creates a Droppable
    *
@@ -953,16 +961,46 @@ H5P.DragText = (function ($, Question, ConfirmationDialog) {
       'class': DROPZONE_CONTAINER
     });
 
+    this.hoveredDroppables = [];
+
     var $dropzone = $('<div/>', {
       'aria-dropeffect': 'none',
       'aria-label':  this.params.dropZoneIndex.replace('@index', draggableIndex.toString()) + ' ' + this.params.empty.replace('@index', draggableIndex.toString()),
       'tabindex': '-1'
     }).appendTo($dropzoneContainer)
       .droppable({
-        tolerance: 'pointer',
+        tolerance: 'touch',
+        over: () => {
+          this.hoveredDroppables.push(draggableIndex - 1);
+          this.hoveredDroppables.sort((a, b) => b - a);
+
+          const hoveredIndex = this.getHoveredDroppableIndex();
+          self.droppables.forEach((droppable, index) => {
+            droppable.toggleHovered(index === hoveredIndex);
+          });
+        },
+        out: () => {
+          this.hoveredDroppables = this.hoveredDroppables.filter(index => index !== draggableIndex - 1);
+          const hoveredIndex = this.getHoveredDroppableIndex();
+
+          self.droppables.forEach((droppable, index) => {
+            droppable.toggleHovered(index === hoveredIndex);
+          });
+        },
         drop: function (event, ui) {
+          const hoveredIndex = self.getHoveredDroppableIndex();
+          if (hoveredIndex === -1) {
+            return; // Should never happen
+          }
+
           var draggable = self.getDraggableByElement(ui.draggable[0]);
-          var droppable = self.getDroppableByElement(event.target);
+          var droppable = droppable = self.droppables[hoveredIndex];
+
+          // Reset hovered droppables
+          self.hoveredDroppables = [];
+          self.droppables.forEach(droppable => {
+            droppable.toggleHovered(false);
+          });
 
           /**
            * Note that drop will run for all initialized DragText dropzones globally. Even other

src/scripts/droppable.js

@@ -247,6 +247,15 @@ H5P.TextDroppable = (function ($) {
     this.$dropzone.droppable({ disabled: false});
   };
 
+  /**
+   * Toggles the hovered class on the droppable.
+   * @param {boolean} hovered Truth to make droppable look hovered, falsy for unhovered.
+   */
+  Droppable.prototype.toggleHovered = function (hovered) {
+    this.containedDraggable?.$draggable?.get(0).classList.toggle('hover', hovered);
+    this.$dropzone.get(0).classList.toggle('ui-droppable-hover', hovered);
+  };
+
   /**
    * Removes the short format of draggable when it is outside a dropbox.
    */

src/styles/drag-text.css

@@ -138,6 +138,7 @@
 
 .h5p-drag-text [aria-grabbed='true'],
 .h5p-drag-text [aria-grabbed].h5p-drag-dropped:not(.ui-state-disabled):hover,
+.h5p-drag-text [aria-grabbed].h5p-drag-dropped:not(.ui-state-disabled).hover,
 .h5p-drag-text [aria-grabbed]:not(.ui-state-disabled):hover {
   border: 0.1em solid rgb(212,190,216);
   color: #663366;