From ea49f7a3b6e06284777a5aae70b6761f6d585663 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Thu, 26 Apr 2018 17:25:16 -0400
Subject: [PATCH] Implement keyboard navigation for `Lightbox`

---
 ts/components/Lightbox.tsx | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
index 7a72ff623..a17df22e9 100644
--- a/ts/components/Lightbox.tsx
+++ b/ts/components/Lightbox.tsx
@@ -203,11 +203,28 @@ export class Lightbox extends React.Component<Props, {}> {
   };
 
   private onKeyUp = (event: KeyboardEvent) => {
-    if (event.key !== 'Escape') {
-      return;
-    }
+    const { onClose } = this;
+    const { onNext, onPrevious } = this.props;
+    switch (event.key) {
+      case 'Escape':
+        onClose();
+        break;
 
-    this.onClose();
+      case 'ArrowLeft':
+        if (onPrevious) {
+          onPrevious();
+        }
+        break;
+
+      case 'ArrowRight':
+        if (onNext) {
+          onNext();
+        }
+        break;
+
+      default:
+        break;
+    }
   };
 
   private onContainerClick = (event: React.MouseEvent<HTMLDivElement>) => {