[ADF-4937] Viewer - Drag and Drop is not operable with keyboard alone (#5126)

* add keyboard event logic

* tests

* fix outline visibility

lib/core/viewer/components/imgViewer.component.html

@@ -1,4 +1,4 @@
-<div id="adf-image-container"  class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="nameFile" [style.transform]="transform" data-automation-id="adf-image-container">
+<div id="adf-image-container" (keydown)="onKeyDown($event)" class="adf-image-container" tabindex="0" role="img" [attr.aria-label]="nameFile" [style.transform]="transform" data-automation-id="adf-image-container">
     <img id="viewer-image" [src]="urlFile" [alt]="nameFile" [ngStyle]="{ 'cursor' : isDragged ? 'move': 'default' } " />
 </div>
 

lib/core/viewer/components/imgViewer.component.scss

@@ -1,8 +1,13 @@
 @mixin adf-image-viewer-theme($theme) {
     $background: map-get($theme, background);
+    $viewer-image-outline: 1px solid mat-color($alfresco-ecm-blue, A200) !default;
 
     .adf-image-viewer {
         .adf-image-container {
+            &:focus {
+                outline-offset: -1px;
+                outline: $viewer-image-outline;
+            }
             display: flex;
             flex: 1;
             text-align: center;

lib/core/viewer/components/imgViewer.component.spec.ts

@@ -147,6 +147,42 @@ describe('Test Img viewer component ', () => {
             expect(component.isDragged).toBeFalsy();
         });
 
+        it('should update offset on keydown ArrowDown event', () => {
+            const arrowDownEvent = new KeyboardEvent('keydown', { key : 'ArrowDown' });
+            component.onKeyDown(arrowDownEvent);
+            expect(component.offsetY).toBe(4);
+
+            component.onKeyDown(arrowDownEvent);
+            expect(component.offsetY).toBe(8);
+        });
+
+        it('should update offset on keydown ArrowUp event', () => {
+            const arrowUpEvent = new KeyboardEvent('keydown', { key : 'ArrowUp' });
+            component.onKeyDown(arrowUpEvent);
+            expect(component.offsetY).toBe(-4);
+
+            component.onKeyDown(arrowUpEvent);
+            expect(component.offsetY).toBe(-8);
+        });
+
+        it('should update offset on keydown ArrowLeft event', () => {
+            const arrowLeftEvent = new KeyboardEvent('keydown', { key : 'ArrowLeft' });
+            component.onKeyDown(arrowLeftEvent);
+            expect(component.offsetX).toBe(-4);
+
+            component.onKeyDown(arrowLeftEvent);
+            expect(component.offsetX).toBe(-8);
+        });
+
+        it('should update offset on keydown ArrowRight event', () => {
+            const arrowRightEvent = new KeyboardEvent('keydown', { key : 'ArrowRight' });
+            component.onKeyDown(arrowRightEvent);
+            expect(component.offsetX).toBe(4);
+
+            component.onKeyDown(arrowRightEvent);
+            expect(component.offsetX).toBe(8);
+        });
+
         it('should update scales on zoom in', () => {
             component.scaleX = 1.0;
 

lib/core/viewer/components/imgViewer.component.ts

@@ -55,6 +55,7 @@ export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
     scaleY: number = 1.0;
     offsetX: number = 0;
     offsetY: number = 0;
+    step: number = 4;
     isDragged: boolean = false;
 
     private drag = { x: 0, y: 0 };
@@ -108,6 +109,27 @@ export class ImgViewerComponent implements OnInit, OnChanges, OnDestroy {
         }
     }
 
+    onKeyDown(event: KeyboardEvent) {
+        const scaleX = (this.scaleX !== 0 ? this.scaleX : 1.0);
+        const scaleY = (this.scaleY !== 0 ? this.scaleY : 1.0);
+
+        if (event.key === 'ArrowDown') {
+            this.offsetY += (this.step / scaleY);
+        }
+
+        if (event.key === 'ArrowUp') {
+            this.offsetY -= (this.step / scaleY);
+        }
+
+        if (event.key === 'ArrowRight') {
+            this.offsetX += (this.step / scaleX);
+        }
+
+        if (event.key === 'ArrowLeft') {
+            this.offsetX -= (this.step / scaleX);
+        }
+    }
+
     onMouseDown(event: MouseEvent) {
         event.preventDefault();
         this.isDragged = true;