Frontend
Public
Commits
Tim Donohue authored and GitHub committed 64c6c196187 Merge
| 1 1 | <ng-container [formGroup]="group"> |
| 2 2 | <div [id]="id" |
| 3 3 | [formArrayName]="model.id" |
| 4 4 | [class.d-none]="model.hidden" |
| 5 5 | [ngClass]="getClass('element', 'control')"> |
| 6 6 | |
| 7 7 | <!-- Draggable Container --> |
| 8 - | <div cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)"> |
| 8 + | <div role="listbox" [attr.aria-label]="'dynamic-form-array.sortable-list.label' | translate" #dropList cdkDropList cdkDropListLockAxis="y" (cdkDropListDropped)="moveSelection($event)"> |
| 9 9 | <!-- Draggable Items --> |
| 10 - | <div *ngFor="let groupModel of model.groups" |
| 10 + | <div #sortableElement |
| 11 + | *ngFor="let groupModel of model.groups; let idx = index; let length = count" |
| 11 12 | role="group" |
| 12 13 | [formGroupName]="groupModel.index" |
| 13 14 | [ngClass]="[getClass('element', 'group'), getClass('grid', 'group')]" |
| 14 15 | cdkDrag |
| 15 16 | [cdkDragDisabled]="dragDisabled" |
| 16 17 | [cdkDragPreviewClass]="'ds-submission-reorder-dragging'" |
| 17 18 | [class.grey-background]="model.isInlineGroupArray"> |
| 18 19 | <!-- Item content --> |
| 19 - | <div class="drag-handle" [class.drag-disable]="dragDisabled" tabindex="0" cdkDragHandle> |
| 20 + | <div class="drag-handle" [class.drag-disable]="dragDisabled" tabindex="0" cdkDragHandle |
| 21 + | (focus)="addInstructionMessageToLiveRegion(sortableElement)" |
| 22 + | (keydown.space)="toggleKeyboardDragAndDrop($event, sortableElement, idx, length)" |
| 23 + | (keydown.enter)="toggleKeyboardDragAndDrop($event, sortableElement, idx, length)" |
| 24 + | (keydown.tab)="stopKeyboardDragAndDrop(sortableElement, idx, length)" |
| 25 + | (keydown.escape)="cancelKeyboardDragAndDrop(sortableElement, idx, length)" |
| 26 + | (keydown.arrowUp)="handleArrowPress($event, dropList, length, idx, 'up')" |
| 27 + | (keydown.arrowDown)="handleArrowPress($event, dropList, length, idx, 'down')"> |
| 20 28 | <i class="drag-icon fas fa-grip-vertical fa-fw" [class.drag-disable]="dragDisabled" ></i> |
| 21 29 | </div> |
| 22 30 | <ng-container *ngTemplateOutlet="startTemplate?.templateRef; context: groupModel"></ng-container> |
| 23 31 | <ds-dynamic-form-control-container *ngFor="let _model of groupModel.group" |
| 24 32 | [bindId]="false" |
| 25 33 | [formGroup]="group" |
| 26 34 | [formModel]="formModel" |
| 27 35 | [context]="groupModel" |
| 28 36 | [group]="getControlOfGroup(groupModel)" |
| 29 37 | [hidden]="_model.hidden" |