Allow screen-reader to read label & description of non-textable elements. Fixes #4762.

Allow screen-reader to identify the alert errors. Fixes #4763

  Added role alertdialog for confirm and alert dialog.
  Added role status for all status bars/banners.
  Added role alert for error bars.
  Added aria-labelledby for charts on each dashboard.
  Added tabindex for each chart so that it is navigable using tab key.

web/pgadmin/tools/datagrid/templates/datagrid/index.html

@@ -364,6 +364,7 @@
 
         <div class="connection_status_wrapper d-flex">
             <div id="btn-conn-status"
+                 role="status"
                  class="connection_status d-flex justify-content-center align-items-center" data-container="body"
                  data-toggle="popover" data-placement="bottom"
                  data-content=""

web/pgadmin/tools/debugger/static/js/direct.js

@@ -1726,12 +1726,13 @@ define([
           // Create the messages panel to display the message returned from the database server
           var messages = new pgAdmin.Browser.Panel({
             name: 'messages',
-            title: gettext('Messages'),
+            title:
+            gettext('Messages'),
             width: '100%',
             height: '100%',
             isCloseable: false,
             isPrivate: true,
-            content: '<div id="messages" class="messages" tabindex="0"></div>',
+            content: '<div role="status" id="messages" class="messages" tabindex="0"></div>',
           });
 
           // Create the result panel to display the result after debugging the function

web/pgadmin/tools/sqleditor/static/js/sqleditor.js

@@ -262,7 +262,7 @@ define('tools.querytool', [
         height: '100%',
         isCloseable: false,
         isPrivate: true,
-        content: '<div class="sql-editor-message" tabindex="0"></div>',
+        content: '<div role="status" class="sql-editor-message" tabindex="0"></div>',
       });
 
       var history = new pgAdmin.Browser.Panel({