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

@@ -178,12 +178,15 @@ 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) {
+            _.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});
+                set_global('ui_state', {home_tab_obscured: home_tab_obscured,
+                                        is_info_overlay: is_info_overlay});
 
                 test_normal_typing();
             });
         });
+    });
 
     // Ok, now test keys that work when we're viewing messages.
     hotkey.processing_text = return_false;
@@ -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');

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

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

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

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>

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>

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>