hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 10:04:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix a11y issue with drag and drop

Browse Source
This commit is contained in:
Giuseppe Digilio
2021-06-24 18:35:30 +02:00
parent b03c7fbe4d
commit f8e4b770e8
6 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,11 +19,15 @@
.drag-handle { .drag-handle {
visibility: hidden; visibility: hidden;
&:hover { &: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; visibility: visible !important;
} }
@@ -40,3 +44,9 @@
.cdk-drag-animating { .cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
} }
.cdk-drop-list-dragging {
.bitstream-row-drag-handle, .drag-handle {
cursor: grabbing;
}
}

2
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
View File

@@ -21,7 +21,7 @@
<ds-item-edit-bitstream [fieldUpdate]="updates[uuid]" <ds-item-edit-bitstream [fieldUpdate]="updates[uuid]"
[bundleUrl]="bundle.self" [bundleUrl]="bundle.self"
[columnSizes]="columnSizes"> [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> <ds-item-edit-bitstream-drag-handle></ds-item-edit-bitstream-drag-handle>
</div> </div>
</ds-item-edit-bitstream> </ds-item-edit-bitstream>

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

@@ -1,5 +1,5 @@
<ng-template #handleView> <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> <i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
</div> </div>
</ng-template> </ng-template>

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

@@ -15,7 +15,9 @@
[cdkDragDisabled]="dragDisabled" [cdkDragDisabled]="dragDisabled"
[cdkDragPreviewClass]="'ds-submission-reorder-dragging'"> [cdkDragPreviewClass]="'ds-submission-reorder-dragging'">
<!-- Item content --> <!-- 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> <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container>
<ds-dynamic-form-control-container *ngFor="let _model of groupModel.group" <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group"
[bindId]="false" [bindId]="false"

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

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

2
src/assets/i18n/en.json5
View File

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