public inbox for [email protected]
help / color / mirror / Atom feed[pgAdmin4][RM#5314] Make Switch cell sync with Switch control for accessibility
2+ messages / 2 participants
[nested] [flat]
* [pgAdmin4][RM#5314] Make Switch cell sync with Switch control for accessibility
@ 2020-04-01 13:28 Murtuza Zabuawala <[email protected]>
0 siblings, 1 reply; 2+ messages in thread
From: Murtuza Zabuawala @ 2020-04-01 13:28 UTC (permalink / raw)
To: pgadmin-hackers
Hi,
This patch will allow the screen reader software to read the actual value
from Switch cell like Yes/No same as we have for Switch control.
--
Regards,
Murtuza Zabuawala
EnterpriseDB: http://www.enterprisedb.com
The Enterprise PostgreSQL Company
Attachments:
[application/octet-stream] pgadmin4_switch_cell.diff (3.5K, 3-pgadmin4_switch_cell.diff)
download | inline diff:
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index 07d681aa8b..0ebcfaeb9f 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;
^ permalink raw reply [nested|flat] 2+ messages in thread
* Re: [pgAdmin4][RM#5314] Make Switch cell sync with Switch control for accessibility
@ 2020-04-02 07:18 Akshay Joshi <[email protected]>
parent: Murtuza Zabuawala <[email protected]>
0 siblings, 0 replies; 2+ messages in thread
From: Akshay Joshi @ 2020-04-02 07:18 UTC (permalink / raw)
To: Murtuza Zabuawala <[email protected]>; +Cc: pgadmin-hackers
Thanks, patch applied.
On Wed, Apr 1, 2020 at 6:58 PM Murtuza Zabuawala <
[email protected]> wrote:
> Hi,
>
> This patch will allow the screen reader software to read the actual value
> from Switch cell like Yes/No same as we have for Switch control.
>
>
> --
> Regards,
> Murtuza Zabuawala
> EnterpriseDB: http://www.enterprisedb.com
> The Enterprise PostgreSQL Company
>
>
--
*Thanks & Regards*
*Akshay Joshi*
*Sr. Software Architect*
*EnterpriseDB Software India Private Limited*
*Mobile: +91 976-788-8246*
^ permalink raw reply [nested|flat] 2+ messages in thread
end of thread, other threads:[~2020-04-02 07:18 UTC | newest]
Thread overview: 2+ messages (download: mbox mbox.gz follow: Atom feed)
-- links below jump to the message on this page --
2020-04-01 13:28 [pgAdmin4][RM#5314] Make Switch cell sync with Switch control for accessibility Murtuza Zabuawala <[email protected]>
2020-04-02 07:18 ` Akshay Joshi <[email protected]>
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox