From c93377101692130da019cc283d287d06947c9a8d Mon Sep 17 00:00:00 2001
From: Nikhil Mohite <nikhil.mohite@enterprisedb.com>
Date: Wed, 23 Dec 2020 12:57:16 +0530
Subject: [PATCH] Fixed accessibility issues in schema diff module. Fixes #6065

---
 docs/en_US/release_notes_4_30.rst                |  1 +
 web/pgadmin/static/js/backform.pgadmin.js        | 10 +++++-----
 .../scss/resources/_default.variables.scss       |  3 ++-
 .../scss/resources/dark/_theme.variables.scss    |  2 ++
 .../high_contrast/_theme.variables.scss          |  1 +
 .../static/js/schema_diff.backform.js            | 10 ++++------
 .../schema_diff/static/js/schema_diff_ui.js      | 16 ++++++++++++++++
 .../schema_diff/static/scss/_schema_diff.scss    |  4 ++++
 8 files changed, 35 insertions(+), 12 deletions(-)

diff --git a/docs/en_US/release_notes_4_30.rst b/docs/en_US/release_notes_4_30.rst
index 9fc9961da..d6e88feb9 100644
--- a/docs/en_US/release_notes_4_30.rst
+++ b/docs/en_US/release_notes_4_30.rst
@@ -25,4 +25,5 @@ Bug fixes
 | `Issue #6046 <https://redmine.postgresql.org/issues/6046>`_ -  Fixed an issue where the state of the Save File icon does not match the dirty editor indicator.
 | `Issue #6047 <https://redmine.postgresql.org/issues/6047>`_ -  Fixed an issue where the dirty indicator stays active even if all changes were undone.
 | `Issue #6058 <https://redmine.postgresql.org/issues/6058>`_ -  Ensure that the rename panel should be disabled when the SQL file opened in the query tool.
+| `Issue #6065 <https://redmine.postgresql.org/issues/6065>`_ -  Fixed accessibility issues in schema diff module.
 | `Issue #6084 <https://redmine.postgresql.org/issues/6084>`_ -  Fixed TypeError exception in schema diff when selected any identical object.
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 26f65cb72..a30d2f68c 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -313,7 +313,7 @@ define([
         '<label class="<%=Backform.controlLabelClassName%>" for="<%=cId%>"><%=label%></label>',
         '<div class="<%=Backform.controlsClassName%>">',
         '  <textarea id="<%=cId%>"',
-        '    class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>"',
+        '    class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>" aria-label="<%=name%>"',
         '  <% if (maxlength) { %>',
         '    maxlength="<%=maxlength%>"',
         '  <% } %>',
@@ -1754,7 +1754,7 @@ define([
     template: _.template([
       '<label for="<%=cId%>" class="sr-only"><%=(label==""?"SQL":label)%></label>',
       '<div class="<%=controlsClassName%>">',
-      '  <textarea id="<%=cId%>" class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly aria-readonly=true" : ""%> <%=required ? "required" : ""%>><%-value%></textarea>',
+      '  <textarea id="<%=cId%>" class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>" name="<%=name%>" aria-label="<%=name%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly aria-readonly=true" : ""%> <%=required ? "required" : ""%>><%-value%></textarea>',
       '  <% if (helpMessage && helpMessage.length) { %>',
       '    <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
       '  <% } %>',
@@ -2474,7 +2474,7 @@ define([
       '<label class="<%=Backform.controlLabelClassName%>" for="<%=cId%>"><%=label%></label>',
       '<div class="<%=Backform.controlsClassName%> sql_field_layout <%=extraClasses.join(\' \')%>">',
       '  <textarea id="<%=cId%>"',
-      '    class="<%=Backform.controlClassName%> " name="<%=name%>"',
+      '    class="<%=Backform.controlClassName%> " name="<%=name%>" aria-label="<%=name%>"',
       '    maxlength="<%=maxlength%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly aria-readonly=true" : ""%>',
       '    rows=<%=rows%>',
       '    <%=required ? "required" : ""%>><%-value%></textarea>',
@@ -2655,7 +2655,7 @@ define([
       '<label class="sr-only" for="<%=cId%>"><%=(label==""?"Code":label)%></label>',
       '<div class="pgadmin-controls pg-el-12 <%=extraClasses.join(\' \')%>">',
       '  <textarea id="<%=cId%>" ',
-      '    class="<%=Backform.controlClassName%> " name="<%=name%>"',
+      '    class="<%=Backform.controlClassName%> " name="<%=name%>" aria-label="<%=name%>"',
       '    maxlength="<%=maxlength%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly aria-readonly=true" : ""%> ',
       '    rows=<%=rows%>',
       '    <%=required ? "required" : ""%>><%-value%></textarea>',
@@ -3422,7 +3422,7 @@ define([
       '  <button class="btn btn-secondary btn-checkbox">',
       '  <div class="custom-control custom-checkbox <%=extraClasses.join(\' \')%>">',
       '    <input tabindex="-1" type="checkbox" class="custom-control-input" id="<%=cId%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-      '    <label class="custom-control-label" for="<%=cId%>">',
+      '    <label class="custom-control-label" for="<%=cId%>" aria-label="<%=cId%>">',
       '      <%=label%>',
       '    </label>',
       '  </div>',
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
index 3814391ab..1ad7c9945 100644
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -191,7 +191,7 @@ $color-editor-variable: $color-fg !default;
 $color-editor-variable-2: #05a !default;
 $color-editor-builtin: #30a !default;
 $color-editor-comment: #a50 !default;
-$color-editor-bracket: #997 !default;
+$color-editor-bracket: #737373 !default;
 $color-editor-operator: $color-fg !default;
 $color-editor-foldmarker: #0000FF !default;
 $color-editor-activeline: #50B0F0 !default;
@@ -332,6 +332,7 @@ $select2-container-hover-bg: $tree-bg-hover !default;
 $select2-container-hover-fg: $tree-fg-hover !default;
 $select2-container-bg-selected: $tree-bg-selected !default;
 $select2-container-fg-selected: $tree-fg-selected !default;
+$select2-placeholder: #575757 !default;
 
 $btn-primary-icon-bg: $color-bg !default;
 $btn-primary-icon-fg: $color-fg !default;
diff --git a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
index 76cee405d..129b9a214 100644
--- a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
+++ b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
@@ -119,3 +119,5 @@ $btn-ternary-disabled-fg: $color-fg;
 $color-success-hover-fg: $color-fg;
 
 $datagrid-selected-color: $color-primary-fg;
+
+$select2-placeholder: #999;
diff --git a/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss b/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss
index 2bf2cc0db..b895a1223 100644
--- a/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss
+++ b/web/pgadmin/static/scss/resources/high_contrast/_theme.variables.scss
@@ -136,6 +136,7 @@ $select2-container-hover-bg: $color-primary;
 $select2-container-hover-fg: $color-bg;
 $select2-container-bg-selected: $color-fg;
 $select2-container-fg-selected: $color-bg;
+$select2-placeholder: #999;
 
 $sql-hint-active-fg: $color-bg;
 
diff --git a/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js b/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
index 8a9bc9001..b6534c8d7 100644
--- a/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
+++ b/web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js
@@ -46,7 +46,7 @@ let SchemaDiffSqlControl =
       '<% if (copyRequired) { %><button class="btn btn-secondary ddl-copy d-none">' + gettext('Copy') + '</button> <% } %>',
       '<div class="pgadmin-controls pg-el-9 pg-el-12 sql_field_layout <%=extraClasses.join(\' \')%>">',
       '  <textarea ',
-      '    class="<%=Backform.controlClassName%> " name="<%=name%>"',
+      '    class="<%=Backform.controlClassName%> " name="<%=name%>" aria-label="<%=name%>"',
       '    maxlength="<%=maxlength%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%>',
       '    rows=<%=rows%>',
       '    <%=required ? "required" : ""%>><%-value%></textarea>',
@@ -120,7 +120,7 @@ let SchemaDiffSelect2Control =
       '<% }%>',
       '<div class="<%=controlsClassName%>">',
       ' <select class="<%=Backform.controlClassName%> <%=extraClasses.join(\' \')%>"',
-      '  name="<%=name%>" value="<%-value%>" <%=disabled ? "disabled" : ""%>',
+      '  name="<%=name%>" aria-label="<%=name%>" value="<%-value%>" <%=disabled ? "disabled" : ""%>',
       '  <%=required ? "required" : ""%><%= select2.multiple ? " multiple>" : ">" %>',
       '  <%=select2.first_empty ? " <option></option>" : ""%>',
       '  <% for (var i=0; i < options.length; i++) {%>',
@@ -322,15 +322,13 @@ let SchemaDiffHeaderView = Backform.Form.extend({
               <div class="btn-group mr-1" role="group" aria-label="">
                 <button id="btn-filter" type="button" class="btn btn-primary-icon"
                         title=""
-                        accesskey=""
                         tabindex="0"
                         style="pointer-events: none;">
                     <i class="fa fa-filter sql-icon-lg" aria-hidden="true"></i>&nbsp;` + gettext('Filter') + `
                 </button>
                 <button id="btn-filter-dropdown" type="button" class="btn btn-primary-icon dropdown-toggle dropdown-toggle-split"
-                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
+                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="filter"
                         title=""
-                        accesskey=""
                         tabindex="0">
                 </button>` +
       [
@@ -492,7 +490,7 @@ let SchemaDiffFooterView = Backform.Form.extend({
       }
       controls.push(cntr);
     });
-
+    $('div.CodeMirror div textarea').attr('aria-label', 'textarea');
     let $diff_sc = this.$el.find('.source_ddl'),
       $diff_tr = this.$el.find('.target_ddl'),
       $diff = this.$el.find('.diff_ddl'),
diff --git a/web/pgadmin/tools/schema_diff/static/js/schema_diff_ui.js b/web/pgadmin/tools/schema_diff/static/js/schema_diff_ui.js
index 6738a64b4..f262f6337 100644
--- a/web/pgadmin/tools/schema_diff/static/js/schema_diff_ui.js
+++ b/web/pgadmin/tools/schema_diff/static/js/schema_diff_ui.js
@@ -396,10 +396,12 @@ export default class SchemaDiffUI {
     self.dataView.onRowCountChanged.subscribe(function () {
       grid.updateRowCount();
       grid.render();
+      self.accessibility_error();
     });
     self.dataView.onRowsChanged.subscribe(function (e, args) {
       grid.invalidateRows(args.rows);
       grid.render();
+      self.accessibility_error();
     });
 
     // Change Row css on the basis of item status
@@ -430,6 +432,7 @@ export default class SchemaDiffUI {
 
     let $data_grid = $('#schema-diff-grid');
     grid = this.grid = new Slick.Grid($data_grid, self.dataView, columns, options);
+    $('label[for='+ columns[0].name.split('\'')[1] +']').append('<span style="display:none">checkbox</span>');
     grid.registerPlugin(groupItemMetadataProvider);
     grid.setSelectionModel(new Slick.RowSelectionModel({selectActiveRow: false}));
     grid.registerPlugin(checkboxSelector);
@@ -483,6 +486,18 @@ export default class SchemaDiffUI {
     self.dataView.refresh();
 
     self.resize_grid();
+    self.accessibility_error();
+  }
+
+  accessibility_error() {
+    $('.slick-viewport').scroll(function() {
+      setTimeout(function() {
+        $('span.slick-column-name label').append('<span style="display:none">checkbox</span>');
+        $('div.slick-cell.l0 label').each(function(inx, el) {
+          $(el).append('<span style="display:none">checkbox</span>');
+        });
+      }, 0);
+    });
   }
 
   handle_generate_button(){
@@ -809,6 +824,7 @@ export default class SchemaDiffUI {
       header_panel = self.docker.findPanels('schema_diff_header_panel')[0];
 
     footer_panel.$container.find('#schema-diff-ddl-comp').append(self.footer.render().$el);
+    $('div.CodeMirror div textarea').attr('aria-label', 'textarea');
     header_panel.$container.find('#schema-diff-grid').append(`<div class='obj_properties container-fluid'>
     <div class='pg-panel-message'>` + gettext('<strong>Database Compare:</strong> Select the server and database for the source and target and Click <strong>Compare</strong>.') +
     gettext('</br><strong>Schema Compare:</strong> Select the server, database and schema for the source and target and Click <strong>Compare</strong>.') +
diff --git a/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss b/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss
index d8f4529d7..82cd9556a 100644
--- a/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss
+++ b/web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss
@@ -133,3 +133,7 @@
 .slick-group.active {
   color: $schema-diff-color-fg !important;
 }
+
+.select2-selection__placeholder {
+  color: $select2-placeholder !important;
+}