From 8da16ea1a7afc6647a40ea1ac737f6db68e4849d Mon Sep 17 00:00:00 2001
From: Cilibiu Bogdan <pionnegru@users.noreply.github.com>
Date: Wed, 9 Oct 2019 19:52:26 +0300
Subject: [PATCH] [ADF-4937] Viewer - Drag and Drop is not operable with
 keyboard alone (#5126)

* add keyboard event logic

* tests

* fix outline visibility
---
 .../components/imgViewer.component.html       |  2 +-
 .../components/imgViewer.component.scss       |  5 +++
 .../components/imgViewer.component.spec.ts    | 36 +++++++++++++++++++
 .../viewer/components/imgViewer.component.ts  | 22 ++++++++++++
 4 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/lib/core/viewer/components/imgViewer.component.html b/lib/core/viewer/components/imgViewer.component.html
index f4f5814413..26e8624263 100644
--- a/lib/core/viewer/components/imgViewer.component.html
+++ b/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>
 
diff --git a/lib/core/viewer/components/imgViewer.component.scss b/lib/core/viewer/components/imgViewer.component.scss
index 07a08fcd9d..17a7d231ac 100644
--- a/lib/core/viewer/components/imgViewer.component.scss
+++ b/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;
diff --git a/lib/core/viewer/components/imgViewer.component.spec.ts b/lib/core/viewer/components/imgViewer.component.spec.ts
index 662d45b23f..46a4430cc9 100644
--- a/lib/core/viewer/components/imgViewer.component.spec.ts
+++ b/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;
 
diff --git a/lib/core/viewer/components/imgViewer.component.ts b/lib/core/viewer/components/imgViewer.component.ts
index cf05aa2d8b..355ce95a14 100644
--- a/lib/core/viewer/components/imgViewer.component.ts
+++ b/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;