From 2955c36b3e75178a6838c94fd8472e028317e4a5 Mon Sep 17 00:00:00 2001
From: Scott Nonnenberg <scott@nonnenberg.com>
Date: Wed, 14 Jun 2017 10:37:30 -0700
Subject: [PATCH] Confirmation dialog: Make keyboard-accessible: escape to
 cancel

And proper tab order. Then some more work to re-focus on the message
composition field after the dialog shows up and steals focus.

FREEBIE
---
 background.html                      |  4 ++--
 js/views/confirmation_dialog_view.js | 22 ++++++++++++++++------
 js/views/conversation_view.js        |  8 ++++++--
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/background.html b/background.html
index ba247fe97..426f1701a 100644
--- a/background.html
+++ b/background.html
@@ -166,8 +166,8 @@
     <div class="content">
       <div class='message'>{{ message }}</div>
       <div class='buttons'>
-        <button class='cancel'>{{ cancel }}</button>
-        <button class='ok'>{{ ok }}</button>
+        <button class='cancel' tabindex='2'>{{ cancel }}</button>
+        <button class='ok' tabindex='1'>{{ ok }}</button>
       </div>
     </div>
   </script>
diff --git a/js/views/confirmation_dialog_view.js b/js/views/confirmation_dialog_view.js
index a7709a2ac..a5b35bee4 100644
--- a/js/views/confirmation_dialog_view.js
+++ b/js/views/confirmation_dialog_view.js
@@ -20,8 +20,9 @@
             this.render();
         },
         events: {
-          'click .ok': 'ok',
-          'click .cancel': 'cancel',
+            'keyup': 'onKeyup',
+            'click .ok': 'ok',
+            'click .cancel': 'cancel',
         },
         render_attributes: function() {
             return {
@@ -31,12 +32,21 @@
             };
         },
         ok: function() {
-          this.remove();
-          this.resolve();
+            this.remove();
+            this.resolve();
         },
         cancel: function() {
-          this.remove();
-          this.reject();
+            this.remove();
+            this.reject();
+        },
+        onKeyup: function(event) {
+            console.log('ConfirmationDialogView onKeyup', event);
+            if (event.key === 'Escape' || event.key === 'Esc') {
+                this.cancel();
+            }
+        },
+        focusCancel: function() {
+            this.$('.cancel').focus();
         }
     });
 })();
diff --git a/js/views/conversation_view.js b/js/views/conversation_view.js
index 9edbba3f9..792887c02 100644
--- a/js/views/conversation_view.js
+++ b/js/views/conversation_view.js
@@ -689,10 +689,12 @@
                     this.checkUnverifiedSendMessage(e, {force: true});
                 }.bind(this),
                 reject: function() {
-                    // do nothing
-                }
+                    this.focusMessageField();
+                }.bind(this)
             });
+
             this.$el.prepend(dialog.el);
+            dialog.focusCancel();
         },
 
         checkUnverifiedSendMessage: function(e, options) {
@@ -750,6 +752,8 @@
             var message = this.replace_colons(input.val()).trim();
             var convo = this.model;
 
+            this.focusMessageField();
+
             if (message.length > 0 || this.fileInput.hasFiles()) {
                 this.fileInput.getFiles().then(function(attachments) {
                     convo.sendMessage(message, attachments);