IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Ensure that switch cell is in sync with switch control for accessibility. Fixes #5314

Browse Source
This commit is contained in:
Murtuza Zabuawala 2020-04-02 12:25:55 +05:30 committed by Akshay Joshi
parent 358c5d0a0f
commit 37f55ccc25
2 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/en_US/release_notes_4_21.rst
View File

@ -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.
| `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.

48
web/pgadmin/static/js/backgrid.pgadmin.js
View File

@ -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;