Set proper focus on tab navigation for file manager dialog. Fixes #5107.

Initial patch sent by Ganesh Jaybhay

docs/en_US/release_notes_4_18.rst

@@ -36,3 +36,4 @@ Bug fixes
 | `Issue #5066 <https://redmine.postgresql.org/issues/5066>`_ -  Fix an issue where refreshing a package results in the change in the object completely.
 | `Issue #5074 <https://redmine.postgresql.org/issues/5074>`_ -  Fix an issue where select, insert and update scripts on tables throwing an error.
 | `Issue #5076 <https://redmine.postgresql.org/issues/5076>`_ -  Ensure Postfix starts in the container, now it runs as non-root by default.
+| `Issue #5107 <https://redmine.postgresql.org/issues/5107>`_ -  Set proper focus on tab navigation for file manager dialog.

web/pgadmin/misc/file_manager/static/js/create_dialogue.js

@@ -28,11 +28,7 @@ module.exports =  Alertify.dialog('createModeDlg', function() {
           text: gettext('Create'),
           key: 13,
           className: 'btn btn-primary fa fa-file file_manager_create file_manager_ok pg-alertify-button disabled',
-        },
+        }],
-        ],
-        focus: {
-          element: 0,
-        },
         options: {
           closableByDimmer: false,
           maximizable: false,
@@ -175,6 +171,7 @@ module.exports =  Alertify.dialog('createModeDlg', function() {
 
         if (!_.isUndefined(newFile) && newFile !== '' && this.is_file_exist()) {
           this.replace_file();
+          this.$container.find('.replace_file').find('.btn_yes').trigger('focus');
           closeEvent.cancel = true;
         } else {
           pgAdmin.Browser.Events.trigger('pgadmin-storage:finish_btn:create_file', newFile);

web/pgadmin/misc/file_manager/static/js/select_dialogue.js

@@ -91,9 +91,6 @@ module.exports =  Alertify.dialog('fileSelectionDlg', function() {
           key: 13,
           className: 'btn btn-primary fa fa-file file_manager_ok pg-alertify-button disabled',
         }],
-        focus: {
-          element: 0,
-        },
         options: {
           closableByDimmer: false,
           maximizable: false,

web/pgadmin/misc/file_manager/static/js/utility.js

@@ -474,7 +474,7 @@ define([
 
         /* For the html ele */
         let item_ele =
-          `<li class="${cap_classes}">
+          `<li class="${cap_classes}" tabindex="0">
             <div class="clip">
             <span data-alt="${_.escape(item_data.Path)}" class="${icon_type}"></span>`;
 
@@ -530,7 +530,7 @@ define([
       `<table id="contents" class="table table-bordered table-noouter-border table-bottom-border table-right-border table-hover tablesorter file_listing_table ${no_data?'file_listing_table_no_data':''}">
         <thead>
           <tr>
-            <th>
+            <th tabindex="0">
               <span>${lg.name}</span>
             </th>
             <th class="sorter-metric" data-metric-name-full="byte|Byte|BYTE" data-metric-name-abbr="b|B">
@@ -575,7 +575,7 @@ define([
 
         /* For the html ele */
         let item_ele =
-          `<tr class="${cap_classes}">
+          `<tr class="${cap_classes}" tabindex="0">
             <td title="${_.escape(item_data.Path)}" class="${class_type}">`;
 
         let data_protected = '';
@@ -698,7 +698,7 @@ define([
         $('.storage_dialog #uploader .input-path').prop('disabled', false);
         var result = '',
           data = resp.data.result;
-
+        let isGridView = false;
         // hide activity indicator
         $('.fileinfo').find('span.activity').hide();
         if (data.Code === 0) {
@@ -711,6 +711,7 @@ define([
         // generate HTML for files/folder and render into container
         if ($('.fileinfo').data('view') == 'grid') {
           result += getGridView(data, capabilities);
+          isGridView = true;
         } else {
           result += getListView(data, capabilities);
         }
@@ -737,6 +738,23 @@ define([
           $.tablesorter.resizable.setWidth($listing_table.find('th[data-column="2"]'), wo.resizable_widths[2]);
         });
 
+        /* Role of this function is to click or double click on element when user is doing keyboard navigation*/
+        var clickOnFileFolderManually = function(event) {
+          let self = this;
+          event.preventDefault();
+          event.stopPropagation();
+          // if file/folder is protected do nothing
+          if ($(this).find('.fa-lock').length)
+            return;
+          if ($(this).find('.fa-file-text-o').length)
+            $(this).click();
+          // If folder then first select and then double click to opn folder
+          else if ($(this).find('.fa-folder-open').length) {
+            $(this).click();
+            setTimeout(() => { $(self).trigger('dblclick'); }, 10);
+          }
+        };
+
         $listing_table.on( 'tablesorter-ready', function() {
           let wo = this.config.widgetOptions;
           if($.tablesorter.storage($listing_table[0], 'tablesorter-table-resized-width') === '') {
@@ -744,8 +762,55 @@ define([
           }
           $.tablesorter.resizable.setWidth($listing_table.find('th[data-column="2"]'), wo.resizable_widths[2]);
           $listing_table.trigger('resizableUpdate');
+
+          // Table Sorter writes table elements randomly so we need to handle some corner cases manually
+          $('#show_hidden').off('keydown').on('keydown', function(event) {
+            if (!isGridView && event.keyCode == 9 && event.shiftKey) {
+              event.preventDefault();
+              $listing_table.find('tbody tr:last').trigger('focus');
+            }
           });
 
+          $listing_table.find('tbody tr').off('keydown').on('keydown', function(event) {
+            // If key is pressed then we need to trigger click so that it can select file
+            if (event.keyCode == 13 || event.keyCode == 32) {
+              clickOnFileFolderManually.call(this, event);
+            } else if (event.keyCode == 9) {
+              if (event.shiftKey) {
+                // When first tr losses focus and shift + tab > we need to set focus on header
+                if ($(this).prev().length == 0) {
+                  event.preventDefault();
+                  $listing_table.find('th.tablesorter-header:last').trigger('focus');
+                }
+              } else {
+                // When last tr losses focus and Tab was pressed > we need to set focus on checkbox
+                if ($(this).next().length == 0) {
+                  event.preventDefault();
+                  $('#show_hidden').trigger('focus');
+                }
+              }
+            }
+          });
+
+          $listing_table.find('th.tablesorter-header').off('keydown').on('keydown', function(event) {
+            // If key is pressed then we need to trigger click so that it can sort
+            if (event.keyCode == 13 || event.keyCode == 32) {
+              event.preventDefault();
+              event.stopPropagation();
+              $(this).trigger('click');
+            }
+          });
+        });
+
+        if(isGridView) {
+          $('.file_manager').find('#contents li').off('keydown').on('keydown', function(event) {
+            // If key is pressed then we need to trigger click so that it can sort
+            if (event.keyCode == 13 || event.keyCode == 32) {
+              clickOnFileFolderManually.call(this, event);
+            }
+          });
+        }
+
         // rename file/folder
         $('.file_manager button.rename').off().on('click', function(e) {
 
@@ -1195,11 +1260,11 @@ define([
           select_box = `<div class='change_file_types d-flex align-items-center p-1'>
           <div>
             ${gettext('Show hidden files and folders')}?
-            <input type='checkbox' id='show_hidden' onclick='pgAdmin.FileUtils.handleClick(this)' tabindex='11'>
+            <input type='checkbox' id='show_hidden' onclick='pgAdmin.FileUtils.handleClick(this)' tabindex='0'>
           </div>
           <div class="ml-auto">
             <label class="my-auto">${gettext('Format')}</label>
-            <select name='type' tabindex='12'>${fileFormats}</select>
+            <select name='type' tabindex='0'>${fileFormats}</select>
           <div>`;
         }
 
@@ -1255,6 +1320,8 @@ define([
         enable_disable_btn();
       });
 
+
+
       // Refresh current directory
       $('.file_manager .refresh').on('click', function() {
         enable_disable_btn();
@@ -1476,12 +1543,12 @@ define([
         // we remove simple file upload element
         $('.file-input-container').remove();
         $('.upload').remove();
-        $('.create').before('<button value="Upload" type="button" title="Upload File" name="upload" id="upload" class="btn btn-sm btn-secondary upload" tabindex="6"><span class="fa fa-upload sql-icon-lg"></span></button> ');
+        $('.create').before('<button value="Upload" type="button" title="Upload File" name="upload" id="upload" class="btn btn-sm btn-secondary upload" tabindex="0"><span class="fa fa-upload sql-icon-lg"></span></button> ');
 
         $('#uploader .upload').off().on('click', function() {
           // we create prompt
           var msg = '<div id="dropzone-container" class="d-flex flex-column flex-grow-1">' +
-            '<button class="fa fa-times fa-lg dz_cross_btn ml-auto" tabindex="7"></button>' +
+            '<button class="fa fa-times fa-lg dz_cross_btn ml-auto" tabindex="0"></button>' +
             '<div id="multiple-uploads" class="dropzone flex-grow-1 d-flex p-1">'+
             '<div class="dz-default dz-message d-none"></div>'+
             '</div>' +
@@ -1645,7 +1712,7 @@ define([
 
           // template for creating new folder
           folder_div =
-            '<li class=\'cap_download cap_delete cap_select_file cap_select_folder cap_rename cap_create cap_upload\'>' +
+            '<li tabIndex="0" class=\'cap_download cap_delete cap_select_file cap_select_folder cap_rename cap_create cap_upload\'>' +
             '<div class=\'clip\'><span data-alt=\'\' class=\'fa fa-folder-open fm_folder_grid\' role="img"></span></div>' +
             '<div><input type=\'text\' class=\'fm_file_rename\'><span class="less_text" title=\'\'>New_Folder</span></div>' +
             '<span class=\'meta size\'></span><span class=\'meta created\'></span><span class=\'meta modified\'></span></li>';

web/pgadmin/misc/file_manager/static/scss/_file_manager.scss

@@ -333,3 +333,16 @@
   font-size: 8px;
   margin-right: -8px;
 }
+
+table.tablesorter {
+  th:focus,
+  tr:focus {
+    outline: $input-focus-border-color auto 5px !important;
+  }
+}
+
+#contents {
+  li:focus {
+    outline: $input-focus-border-color auto 5px !important;
+  }
+}

web/pgadmin/misc/file_manager/templates/file_manager/index.html

@@ -9,15 +9,15 @@
                 <div class="input-group" role="group">
                     <div class="input-group-prepend">
                         <button name="home" type="button" value="Home" title="{{ _('Home') }}" class="btn btn-secondary home"
-                                tabindex="1">
+                                tabindex="0">
                             <span class="fa fa-home sql-icon-lg"></span>
                         </button>
                         <button name="level-up" type="button" title="{{ _('Back') }}" value="LevelUp" class="btn btn-secondary level-up"
-                                disabled tabindex="2">
+                                disabled tabindex="0">
                             <span class="fa fa-level-up sql-icon-lg"></span>
                         </button>
                     </div>
-                    <input id="file-input-path" class="form-control input-path text-truncate" title="" type="text" tabindex="3" autofocus/>
+                    <input id="file-input-path" class="form-control input-path text-truncate" title="" type="text" tabindex="0" autofocus/>
                 </div>
                 <div class="uploadresponse"></div>
             </div>
@@ -25,7 +25,7 @@
                 <input class="mode" name="mode" type="hidden" value="add"/>
                 <input class="currentpath" name="currentpath" type="hidden"/>
                 <button type="button" title="{{ _('Refresh') }}" class="btn btn-sm btn-secondary refresh"
-                        tabindex="4">
+                        tabindex="0">
                     <span class="fa fa-refresh sql-icon-lg"></span>
                 </button>
                 <button type="button" title="{{ _('Download File') }}" class="btn btn-sm btn-secondary download"
@@ -37,19 +37,19 @@
                     <span class="fa fa-trash sql-icon-lg"></span>
                 </button>
                 <button name="rename" type="button" title="{{ _('Rename File/Folder') }}" class="btn btn-sm btn-secondary rename"
-                        tabindex="5">
+                        tabindex="0">
                     <span class="fa fa-pencil-square-o sql-icon-lg"></span>
                 </button>
                 <button name="newfolder" type="button" title="{{ _('Create new folder') }}" value="New Folder"
-                        class="btn btn-sm btn-secondary create" tabindex="8">
+                        class="btn btn-sm btn-secondary create" tabindex="0">
                     <span class="fa fa-folder-open sql-icon-lg"></span>
                     <span class="fa fa-plus add-folder-icon"></span>
                 </button>
                 <div class="btn-group" role="group">
-                    <button class="ON btn btn-secondary btn-sm grid" type="button" title="{{ _('View as grid') }}" tabindex="9">
+                    <button class="ON btn btn-secondary btn-sm grid" type="button" title="{{ _('View as grid') }}" tabindex="0">
                         <span class="fa fa-th sql-icon-lg"></span>
                     </button>
-                    <button type="button" class="btn btn-secondary btn-sm list" title="{{ _('View as table') }}" tabindex="10">
+                    <button type="button" class="btn btn-secondary btn-sm list" title="{{ _('View as table') }}" tabindex="0">
                         <span class="fa fa-list sql-icon-lg"></span>
                     </button>
                 </div>
@@ -67,15 +67,15 @@
         <div class='delete_item'>
             <span>{{ _('Are you sure you want to delete this item?') }}</span>
             <span class="pull-right">
-                <button type='button' class='btn btn-secondary btn_no' tabindex="14">{{ _('No') }}</button>
+                <button type='button' class='btn btn-secondary btn_no' tabindex="0">{{ _('No') }}</button>
-                <button type='button' class='btn btn-primary btn_yes' tabindex="13">{{ _('Yes') }}</button>
+                <button type='button' class='btn btn-primary btn_yes' tabindex="0">{{ _('Yes') }}</button>
             </span>
         </div>
         <div class='replace_file'>
             <span>{{ _('Are you sure you want to replace this file?') }}</span>
             <span class="pull-right">
-                <button type='button' class='btn btn-secondary btn_no' tabindex="16">{{ _('No') }}</button>
+                <button type='button' class='btn btn-secondary btn_no' tabindex="0">{{ _('No') }}</button>
-                <button type='button' class='btn btn-primary btn_yes' tabindex="15">{{ _('Yes') }}</button>
+                <button type='button' class='btn btn-primary btn_yes' tabindex="0">{{ _('Yes') }}</button>
             </span>
         </div>
     </div>

web/pgadmin/static/js/backgrid.pgadmin.js

@@ -781,6 +781,7 @@ define([
       this.$select.off('blur', this.exitEditMode);
       this.$select.select2('close');
       this.$el.removeClass('editor');
+      this.$el.find('.select2-selection').trigger('focus');
     },
 
     saveOrCancel: function (e) {
@@ -794,7 +795,9 @@ define([
 
         let gotoCell;
         // go to Next Cell & if Shift is also pressed go to Previous Cell
+        if (e.keyCode == 9 || e.keyCode == 16) {
           gotoCell = e.shiftKey ? self.$el.prev() : self.$el.next();
+        }
 
         if (gotoCell) {
           let command = new Backgrid.Command({