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

@@ -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>

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();
         }
     });
 })();

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);