From 2ae23054eeb8801bcc948db37d24da007549eece Mon Sep 17 00:00:00 2001
From: Brock Whittaker <brock@zulipchat.com>
Date: Wed, 12 Apr 2017 11:58:31 -0700
Subject: [PATCH] informational-overlays: Focus overlay body on shortcut "?".

This focuses the body content of the informational overlay after
going to it from "?" so that you can use up and down arrows to then
scroll the content easily.

Fixes: #4480.
---
 frontend_tests/node_tests/hotkey.js      | 14 +++++++++++---
 static/js/hotkey.js                      |  4 ++++
 static/js/ui.js                          |  1 +
 static/js/ui_state.js                    |  4 ++++
 templates/zerver/keyboard_shortcuts.html |  2 +-
 templates/zerver/markdown_help.html      |  2 +-
 templates/zerver/search_operators.html   |  2 +-
 7 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend_tests/node_tests/hotkey.js b/frontend_tests/node_tests/hotkey.js
index 4acd2f9f28..058668857b 100644
--- a/frontend_tests/node_tests/hotkey.js
+++ b/frontend_tests/node_tests/hotkey.js
@@ -178,10 +178,13 @@ function stubbing(func_name_to_stub, test_function) {
 
     _.each([return_true, return_false], function (is_settings_page) {
         _.each([return_true, return_false], function (home_tab_obscured) {
-            hotkey.is_settings_page = is_settings_page;
-            set_global('ui_state', {home_tab_obscured: home_tab_obscured});
+            _.each([return_true, return_false], function (is_info_overlay) {
+                hotkey.is_settings_page = is_settings_page;
+                set_global('ui_state', {home_tab_obscured: home_tab_obscured,
+                                        is_info_overlay: is_info_overlay});
 
-            test_normal_typing();
+                test_normal_typing();
+            });
         });
     });
 
@@ -314,6 +317,11 @@ function stubbing(func_name_to_stub, test_function) {
     assert_mapping('spacebar', 'navigate.page_down');
     assert_mapping('up_arrow', 'navigate.up');
 
+    ui_state.is_info_overlay = return_true;
+    assert_unmapped('down_arrow');
+    assert_unmapped('up_arrow');
+    ui_state.is_info_overlay = return_false;
+
     hotkey.is_subs = return_true;
     assert_mapping('up_arrow', 'subs.switch_rows');
     assert_mapping('down_arrow', 'subs.switch_rows');
diff --git a/static/js/hotkey.js b/static/js/hotkey.js
index e99e5eeb57..e5ffd47e7a 100644
--- a/static/js/hotkey.js
+++ b/static/js/hotkey.js
@@ -452,6 +452,10 @@ exports.process_hotkey = function (e, hotkey) {
         return reactions.reaction_navigate(e, event_name);
     }
 
+    if (ui_state.is_info_overlay()) {
+        return false;
+    }
+
     if (hotkey.message_view_only && ui_state.home_tab_obscured()) {
         return false;
     }
diff --git a/static/js/ui.js b/static/js/ui.js
index cc78cbc9be..bd9ab080c6 100644
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -124,6 +124,7 @@ $(document).ready(function () {
         callback: function (name, key) {
             $(".overlay-modal").hide();
             $("#" + key).show();
+            $("#" + key).find(".modal-body").focus();
         },
     }).get();
 
diff --git a/static/js/ui_state.js b/static/js/ui_state.js
index d889c7bed5..a46f588cab 100644
--- a/static/js/ui_state.js
+++ b/static/js/ui_state.js
@@ -10,6 +10,10 @@ exports.home_tab_obscured = function () {
     return false;
 };
 
+exports.is_info_overlay = function () {
+    return ($(".informational-overlays").hasClass("show"));
+};
+
 return exports;
 
 }());
diff --git a/templates/zerver/keyboard_shortcuts.html b/templates/zerver/keyboard_shortcuts.html
index e627158854..9423dd8054 100644
--- a/templates/zerver/keyboard_shortcuts.html
+++ b/templates/zerver/keyboard_shortcuts.html
@@ -1,6 +1,6 @@
 <div class="overlay-modal" id="keyboard-shortcuts" tabindex="-1" role="dialog"
      aria-labelledby="keyboard-shortcuts-label" aria-hidden="true">
-  <div class="modal-body">
+  <div class="modal-body" tabindex="1">
     <div>
       <table class="hotkeys_table table table-striped table-bordered table-condensed">
         <thead>
diff --git a/templates/zerver/markdown_help.html b/templates/zerver/markdown_help.html
index 5f8027c8a6..0a0dc28f8e 100644
--- a/templates/zerver/markdown_help.html
+++ b/templates/zerver/markdown_help.html
@@ -1,6 +1,6 @@
 <div class="overlay-modal hide" id="markdown-help" tabindex="-1" role="dialog"
     aria-labelledby="markdown-help-label" aria-hidden="true">
-    <div class="modal-body">
+    <div class="modal-body" tabindex="1">
         <div id="markdown-instructions">
             <table class="table table-striped table-condensed table-rounded table-bordered help-table">
                 <thead><tr>
diff --git a/templates/zerver/search_operators.html b/templates/zerver/search_operators.html
index 39029d7e03..3c36c69206 100644
--- a/templates/zerver/search_operators.html
+++ b/templates/zerver/search_operators.html
@@ -1,6 +1,6 @@
 <div class="overlay-modal hide" id="search-operators" tabindex="-1" role="dialog"
     aria-labelledby="search-operators-label" aria-hidden="true">
-    <div class="modal-body">
+    <div class="modal-body" tabindex="1">
         <table class="table table-striped table-condensed table-rounded table-bordered help-table">
             <thead>
                 <tr>