From 8e132eab0836b1fb684a8b81b2966a280e8073e4 Mon Sep 17 00:00:00 2001
From: Pradip Parkale <pradip.parkale@enterprisedb.com>
Date: Tue, 15 Sep 2020 13:03:18 +0530
Subject: [PATCH] Fixed some accessibility issues. Fixes #5732

---
 docs/en_US/release_notes_4_26.rst              |  1 +
 .../misc/file_manager/static/js/utility.js     |  8 ++++----
 .../templates/file_manager/index.html          | 18 +++++++++---------
 .../sqleditor/history/query_history_entries.js |  2 +-
 .../scss/resources/_default.variables.scss     |  2 +-
 .../datagrid/templates/datagrid/filter.html    |  2 +-
 .../datagrid/templates/datagrid/index.html     |  9 +++++----
 web/pgadmin/tools/debugger/static/js/direct.js |  2 +-
 .../tools/sqleditor/static/js/sqleditor.js     |  2 +-
 9 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/docs/en_US/release_notes_4_26.rst b/docs/en_US/release_notes_4_26.rst
index 09ddd83ea..a34ab2baa 100644
--- a/docs/en_US/release_notes_4_26.rst
+++ b/docs/en_US/release_notes_4_26.rst
@@ -29,6 +29,7 @@ Bug fixes
 | `Issue #5426 <https://redmine.postgresql.org/issues/5426>`_ -  Adjusted the height of jobstep code block to use maximum space.
 | `Issue #5652 <https://redmine.postgresql.org/issues/5652>`_ -  Modified the 'Commit' and 'Rollback' query tool button icons.
 | `Issue #5722 <https://redmine.postgresql.org/issues/5722>`_ -  Ensure that the user should be able to drop the database even if it is connected.
+| `Issue #5732 <https://redmine.postgresql.org/issues/5732>`_ -  Fixed some accessibility issues.
 | `Issue #5734 <https://redmine.postgresql.org/issues/5734>`_ -  Update the description of GIN and GiST indexes in the documentation.
 | `Issue #5746 <https://redmine.postgresql.org/issues/5746>`_ -  Fixed an issue where --load-server does not allow loading connections that use pg_services.
 | `Issue #5748 <https://redmine.postgresql.org/issues/5748>`_ -  Fixed incorrect reverse engineering SQL for Foreign key when creating a table.
diff --git a/web/pgadmin/misc/file_manager/static/js/utility.js b/web/pgadmin/misc/file_manager/static/js/utility.js
index 6bccbedef..78dfe8126 100644
--- a/web/pgadmin/misc/file_manager/static/js/utility.js
+++ b/web/pgadmin/misc/file_manager/static/js/utility.js
@@ -589,7 +589,7 @@ define([
         } else {
           item_ele +=
             `<div>
-              <input type="text" class="fm_file_rename"/>
+              <input aria-label="file_rename" type="text" class="fm_file_rename"/>
               <div class="fm_file_name">
                 <div class="d-flex">
                   <span class="fm_file_list ${icon_type}"></span>
@@ -1260,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='0'>
+            `<input  aria-label="Show hidden files and folders" 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='0'>${fileFormats}</select>
+            <select aria-label="select" name='type' tabindex='0'>${fileFormats}</select>
           <div>`;
         }
 
@@ -1542,7 +1542,7 @@ 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-primary-icon upload" tabindex="0"><span class="fa fa-upload sql-icon-lg"></span></button> ');
+        $('.create').before('<button aria-label="Upload" value="Upload" type="button" title="Upload File" name="upload" id="upload" class="btn btn-sm btn-primary-icon upload" tabindex="0"><span class="fa fa-upload sql-icon-lg"></span></button> ');
 
         $('#uploader .upload').off().on('click', function() {
           // we create prompt
diff --git a/web/pgadmin/misc/file_manager/templates/file_manager/index.html b/web/pgadmin/misc/file_manager/templates/file_manager/index.html
index fa4db26b5..b914c4444 100644
--- a/web/pgadmin/misc/file_manager/templates/file_manager/index.html
+++ b/web/pgadmin/misc/file_manager/templates/file_manager/index.html
@@ -9,11 +9,11 @@
                 <div class="input-group" role="group">
                     <div class="input-group-prepend">
                         <button name="home" type="button" value="Home" title="{{ _('Home') }}" class="btn btn-primary-icon home"
-                                tabindex="0">
+                                tabindex="0" aria-label="home">
                             <span class="fa fa-home sql-icon-lg"></span>
                         </button>
                         <button name="level-up" type="button" title="{{ _('Back') }}" value="LevelUp" class="btn btn-primary-icon level-up"
-                                disabled tabindex="0">
+                                disabled tabindex="0" aria-label="level up">
                             <span class="fa fa-level-up-alt sql-icon-lg"></span>
                         </button>
                     </div>
@@ -25,31 +25,31 @@
                 <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-primary-icon refresh"
-                        tabindex="0">
+                        tabindex="0" aria-label="refresh">
                     <span class="fa fa-sync-alt sql-icon-lg"></span>
                 </button>
                 <button type="button" title="{{ _('Download File') }}" class="btn btn-sm btn-primary-icon download"
-                        disabled>
+                        disabled aria-label="Download File">
                     <span class="fa fa-download sql-icon-lg"></span>
                 </button>
                 <button name="delete" type="button" title="{{ _('Delete File/Folder') }}" class="btn btn-sm btn-primary-icon delete"
-                        disabled>
+                        disabled aria-label="delete">
                     <span class="fa fa-trash-alt sql-icon-lg"></span>
                 </button>
                 <button name="rename" type="button" title="{{ _('Rename File/Folder') }}" class="btn btn-sm btn-primary-icon rename"
-                        tabindex="0">
+                        tabindex="0" aria-label="rename">
                     <span class="fa fa-edit sql-icon-lg"></span>
                 </button>
                 <button name="newfolder" type="button" title="{{ _('Create new folder') }}" value="New Folder"
-                        class="btn btn-sm btn-primary-icon create" tabindex="0">
+                        class="btn btn-sm btn-primary-icon create" tabindex="0" aria-label="newfolder">
                     <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-primary-icon btn-sm grid" type="button" title="{{ _('View as grid') }}" tabindex="0">
+                    <button class="ON btn btn-primary-icon btn-sm grid" type="button" title="{{ _('View as grid') }}" tabindex="0" aria-label="View as grid">
                         <span class="fa fa-th sql-icon-lg"></span>
                     </button>
-                    <button type="button" class="btn btn-primary-icon btn-sm list" title="{{ _('View as table') }}" tabindex="0">
+                    <button type="button" class="btn btn-primary-icon btn-sm list" title="{{ _('View as table') }}" tabindex="0" aria-label="View as table">
                         <span class="fa fa-list sql-icon-lg"></span>
                     </button>
                 </div>
diff --git a/web/pgadmin/static/js/sqleditor/history/query_history_entries.js b/web/pgadmin/static/js/sqleditor/history/query_history_entries.js
index 249c93ac9..03ea7c46f 100644
--- a/web/pgadmin/static/js/sqleditor/history/query_history_entries.js
+++ b/web/pgadmin/static/js/sqleditor/history/query_history_entries.js
@@ -252,7 +252,7 @@ export class QueryHistoryEntries {
     self.$el = $(`
         <div class="toggle-and-history-container">
             <div class="query-history-toggle">
-                <label class="control-label">
+                <label class="control-label" for="generated-queries-toggle">
                     ` + gettext('Show queries generated internally by pgAdmin?') + `
                 </label>
                 <input id="generated-queries-toggle" type="checkbox"
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
index 668f18840..456f45503 100644
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -17,7 +17,7 @@ $color-secondary: $white !default;
 $color-ternary: #5b6d7c !default;
 $color-ternary-fg: $white !default;
 
-$color-danger: #e53935 !default;
+$color-danger: #CC0000 !default;
 $color-danger-icon-fg: $color-danger !default;
 $color-danger-fg: $white !default;
 $color-danger-light: #F39999 !default;
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/filter.html b/web/pgadmin/tools/datagrid/templates/datagrid/filter.html
index 241030e64..14ccb04ae 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/filter.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/filter.html
@@ -1,3 +1,3 @@
 <div class="filter-textarea">
-    <textarea id="sql_filter" rows="5" tabindex="0"></textarea>
+    <textarea id="sql_filter" rows="5" tabindex="0" aria-label="sql filter"></textarea>
 </div>
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index e81a42a47..097a42e91 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
@@ -17,6 +17,7 @@
             <div class="btn-group mr-1" role="group" aria-label="">
                 <button id="btn-show-query-tool" type="button" class="btn btn-sm btn-primary-icon btn-show-query-tool"
                         title=""
+                        aria-label="show query tool"
                         tabindex="0">
                     <i class="pg-font-icon icon-query-tool" aria-hidden="true" role="img"></i>
                 </button>
@@ -36,7 +37,7 @@
                 </button>
                 <button id="btn-file-menu-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled
-                        tabindex="0">
+                        tabindex="0" aria-label="file menu">
                 </button>
                 <ul class="dropdown-menu">
                     <li>
@@ -130,7 +131,7 @@
                 </button>
                 <button id="btn-copy-row-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-                        tabindex="0">
+                        tabindex="0" aria-label="copy row">
                 </button>
                 <ul class="dropdown-menu">
                     <li>
@@ -265,7 +266,7 @@
                         title=""
                         tabindex="0">
                 </button>
-                <ul class="dropdown-menu" role="menu">
+                <ul class="dropdown-menu">
                     <li>
                         <a class="dropdown-item" id="btn-auto-commit" href="#" tabindex="0">
                             <i class="auto-commit fa fa-check visibility-hidden" aria-hidden="true" role="img"></i>
@@ -294,7 +295,7 @@
                 </button>
                 <button id="btn-explain-options-dropdown" type="button" class="btn btn-sm btn-primary-icon dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-                        tabindex="0">
+                        tabindex="0" aria-label="explain">
                 </button>
                 <ul class="dropdown-menu">
                     <li>
diff --git a/web/pgadmin/tools/debugger/static/js/direct.js b/web/pgadmin/tools/debugger/static/js/direct.js
index 75049c9d3..7d7e2438a 100644
--- a/web/pgadmin/tools/debugger/static/js/direct.js
+++ b/web/pgadmin/tools/debugger/static/js/direct.js
@@ -1771,7 +1771,7 @@ define([
 
       var editor_pane = $('<div id="stack_editor_pane" ' +
         'class="pg-panel-content info"></div>');
-      var code_editor_area = $('<textarea id="debugger-editor-textarea">' +
+      var code_editor_area = $('<textarea aria-label="Code editor area" id="debugger-editor-textarea">' +
         '</textarea>').appendTo(editor_pane);
       self.code_editor_panel.layout().addItem(editor_pane);
 
diff --git a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
index 3646a9750..ddd9ad701 100644
--- a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
@@ -367,7 +367,7 @@ define('tools.querytool', [
       queryToolNotifications.renderNotificationsGrid(self.notifications_panel);
 
       var text_container = $('<textarea id="sql_query_tool" tabindex="-1"></textarea>');
-      var output_container = $('<div id="output-panel" tabindex="0"></div>').append(text_container);
+      var output_container = $('<label for="sql_query_tool" class="sr-only">SQL Editor</label><div id="output-panel" tabindex="0"></div>').append(text_container);
       self.sql_panel_obj.$container.find('.pg-panel-content').append(output_container);
 
       self.query_tool_obj = CodeMirror.fromTextArea(text_container.get(0), {