From 37f55ccc25caf51451afd6ee13c5f72a0de11825 Mon Sep 17 00:00:00 2001
From: Murtuza Zabuawala <murtuza.zabuawala@enterprisedb.com>
Date: Thu, 2 Apr 2020 12:25:55 +0530
Subject: [PATCH] Ensure that switch cell is in sync with switch control for
 accessibility. Fixes #5314

---
 docs/en_US/release_notes_4_21.rst         |  3 +-
 web/pgadmin/static/js/backgrid.pgadmin.js | 48 ++++++++++++++++-------
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/docs/en_US/release_notes_4_21.rst b/docs/en_US/release_notes_4_21.rst
index 72a828b02..e4c9e2a98 100644
--- a/docs/en_US/release_notes_4_21.rst
+++ b/docs/en_US/release_notes_4_21.rst
@@ -20,4 +20,5 @@ Bug fixes
 
 | `Issue #3645 <https://redmine.postgresql.org/issues/3645>`_ -  Ensure that the start and end date should be deleted when clear the selection for pgAgent Job.
 | `Issue #5180 <https://redmine.postgresql.org/issues/5180>`_ -  Fixed an issue where the autovacuum_enabled parameter is added automatically in the RE-SQL when the table has been created using the WITH clause.
-| `Issue #5268 <https://redmine.postgresql.org/issues/5268>`_ -  Fixed generated SQL when any token in FTS Configuration or any option in FTS Dictionary is changed.
\ No newline at end of file
+| `Issue #5268 <https://redmine.postgresql.org/issues/5268>`_ -  Fixed generated SQL when any token in FTS Configuration or any option in FTS Dictionary is changed.
+| `Issue #5314 <https://redmine.postgresql.org/issues/5314>`_ -  Ensure that switch cell is in sync with switch control for accessibility.
\ No newline at end of file
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index 162f81a7a..970ef3952 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -641,7 +641,7 @@ define([
 
     enterEditMode: function() {
       this.$el.addClass('editor');
-      $(this.$el.find('input[type=checkbox]')).trigger('focus');
+      $(this.$el.find('.toggle.btn')).trigger('focus');
     },
 
     exitEditMode: function() {
@@ -650,18 +650,10 @@ define([
 
     events: {
       'change input': 'onChange',
-      'keyup': 'toggleSwitch',
       'blur input': 'exitEditMode',
       'keydown': 'onKeyDown',
     },
 
-    toggleSwitch: function(e) {
-      if (e.keyCode == 32) {
-        this.$el.find('input[type=checkbox]').bootstrapToggle('toggle');
-        e.preventDefault();
-      }
-    },
-
     onKeyDown: function(e) {
       let preferences = pgBrowser.get_preferences_for_module('browser');
       if(keyboardShortcuts.validateShortcutKeys(preferences.add_grid_row,e)) {
@@ -677,8 +669,20 @@ define([
       this.enterEditMode();
       // on bootstrap change we also need to change model's value
       model.set(column.get('name'), val);
+      this.setSrValue();
+    },
+    setSrValue: function() {
+      let {onText, offText} = _.defaults({}, this.column.get('options'), this.defaults.options);
+      if(this.$el.find('.toggle.btn').hasClass('off')) {
+        this.$el.find('.sr-value').text(`
+          ${offText}, ${gettext('Toggle button')}
+        `);
+      } else {
+        this.$el.find('.sr-value').text(`
+          ${onText}, ${gettext('Toggle button')}
+        `);
+      }
     },
-
     render: function() {
       var self = this,
         col = _.defaults(this.column.toJSON(), this.defaults),
@@ -688,17 +692,19 @@ define([
           model.get(column.get('name')), model
         ),
         editable = Backgrid.callByNeed(col.editable, column, model),
-        options =  _.defaults({}, col.options, this.defaults.options);
+        options =  _.defaults({}, col.options, this.defaults.options),
+        cId = _.uniqueId('pgC_');
 
       this.undelegateEvents();
 
       this.$el.empty();
-
+      this.$el.append('<label class="sr-value sr-only" for="' + cId + '"></label>');
       this.$el.append(
         $('<input>', {
-          tabIndex: 0,
+          tabIndex: -1,
           type: 'checkbox',
-          'aria-label': gettext('data toggle'),
+          'aria-hidden': 'true',
+          'aria-label': column.get('name'),
         }).prop('checked', rawValue).prop('disabled', !editable).attr('data-toggle', 'toggle')
           .attr('data-size', options.size).attr('data-on', options.onText).attr('data-off', options.offText)
           .attr('data-width', options.width).attr('data-height', options.height)
@@ -709,6 +715,20 @@ define([
       // Override BooleanCell checkbox with Bootstraptoggle
       this.$input.bootstrapToggle();
 
+      this.$el.find('.toggle.btn')
+        .attr('tabindex', !editable ? '-1' : '0')
+        .attr('id', cId)
+        .on('keydown', function(e) {
+          if (e.keyCode == 32) {
+            self.$el.find('input[type=checkbox]').bootstrapToggle('toggle');
+            e.preventDefault();
+            e.stopPropagation();
+            self.setSrValue();
+          }
+        });
+
+      this.$el.find('.toggle.btn .toggle-group .btn').attr('aria-hidden', true);
+      this.setSrValue();
       // Listen for Tab key
       this.$el.on('keydown', function(e) {
         var gotoCell;