fix a11y issue with drag and drop

src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss

@@ -19,11 +19,15 @@
 .drag-handle {
   visibility: hidden;
   &:hover {
-    cursor: grab;
+    cursor: move;
   }
 }
 
-:host ::ng-deep .bitstream-row:hover .drag-handle {
+.bitstream-row-drag-handle:hover {
+  cursor: move;
+}
+
+:host ::ng-deep .bitstream-row:hover .drag-handle, :host ::ng-deep .bitstream-row-drag-handle:focus .drag-handle {
   visibility: visible !important;
 }
 
@@ -40,3 +44,9 @@
 .cdk-drag-animating {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
+
+.cdk-drop-list-dragging {
+  .bitstream-row-drag-handle, .drag-handle {
+    cursor: grabbing;
+  }
+}

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/paginated-drag-and-drop-bitstream-list/paginated-drag-and-drop-bitstream-list.component.html

@@ -21,7 +21,7 @@
           <ds-item-edit-bitstream [fieldUpdate]="updates[uuid]"
                                   [bundleUrl]="bundle.self"
                                   [columnSizes]="columnSizes">
-            <div class="d-flex align-items-center" slot="drag-handle" cdkDragHandle>
+            <div class="d-flex align-items-center bitstream-row-drag-handle" slot="drag-handle" cdkDragHandle tabindex="0">
               <ds-item-edit-bitstream-drag-handle></ds-item-edit-bitstream-drag-handle>
             </div>
           </ds-item-edit-bitstream>

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-drag-handle/item-edit-bitstream-drag-handle.component.html

@@ -1,5 +1,5 @@
 <ng-template #handleView>
-  <div class="drag-handle text-muted float-left p-1 mr-2">
+  <div class="drag-handle text-muted float-left p-1 mr-2" tabindex="0">
     <i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
   </div>
 </ng-template>

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.html

@@ -15,7 +15,9 @@
              [cdkDragDisabled]="dragDisabled"
              [cdkDragPreviewClass]="'ds-submission-reorder-dragging'">
           <!-- Item content -->
-          <i class="drag-icon fas fa-grip-vertical fa-fw" [class.invisible]="dragDisabled" tabindex="0"></i>
+          <div class="drag-handle" [class.invisible]="dragDisabled" tabindex="0">
+            <i class="drag-icon fas fa-grip-vertical fa-fw"  ></i>
+          </div>
           <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
           <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
                                              [bindId]="false"

src/app/shared/form/builder/ds-dynamic-form-ui/models/array-group/dynamic-form-array.component.scss

@@ -26,8 +26,20 @@
 
 }
 
+.drag-handle {
+  &:hover {
+    cursor: move;
+  }
+
+  &:focus {
+    .drag-icon {
+      visibility: visible;
+    }
+  }
+}
+
 .cdk-drop-list-dragging {
-  .cdk-drag {
+  .drag-handle {
     cursor: grabbing;
     .drag-icon {
       visibility: hidden;

src/assets/i18n/en.json5

@@ -1321,6 +1321,8 @@
 
   "form.discard": "Discard",
 
+  "form.drag": "Drag",
+
   "form.edit": "Edit",
 
   "form.edit-help": "Click here to edit the selected value",