1) Fixed Tab key navigation for Maintenance dialog. Fixes #4227

2) Fix Tab key issue for Toggle switch controls and button on the dialog footer in Safari browser. Fixes #4244
This commit is contained in:
Aditya Toshniwal 2019-05-15 16:37:06 +05:30 committed by Akshay Joshi
parent ed8d1cde00
commit 2cd58efcdd
7 changed files with 40 additions and 22 deletions

View File

@ -18,5 +18,7 @@ Bug fixes
| `Bug #4194 <https://redmine.postgresql.org/issues/4194>`_ - Fix accessibility issue for menu navigation.
| `Bug #4218 <https://redmine.postgresql.org/issues/4218>`_ - Properly assign dropdownParent in Select2 controls.
| `Bug #4219 <https://redmine.postgresql.org/issues/4219>`_ - Ensure popper.js is installed when needed.
| `Bug #4227 <https://redmine.postgresql.org/issues/4227>`_ - Fixed Tab key navigation for Maintenance dialog.
| `Bug #4244 <https://redmine.postgresql.org/issues/4244>`_ - Fix Tab key issue for Toggle switch controls and button on the dialog footer in Safari browser.
| `Bug #4246 <https://redmine.postgresql.org/issues/4246>`_ - Fixed console error when subnode control is used in panels.
| `Bug #4261 <https://redmine.postgresql.org/issues/4261>`_ - Stop using application/x-javascript as a mime type and use the RFC-compliant application/javascript instead.

View File

@ -93,12 +93,10 @@ define([
// All buttons will be created within a single
// div area.
var btnGroup =
$('<div></div>').addClass(
'pg-prop-btn-group'
),
$('<div class="pg-prop-btn-group"></div>'),
// Template used for creating a button
tmpl = _.template([
'<button type="<%= type %>" ',
'<button tabindex="0" type="<%= type %>" ',
'class="btn <%=extraClasses.join(\' \')%>"',
'<% if (disabled) { %> disabled="disabled"<% } %> title="<%-tooltip%>">',
'<span class="<%= icon %>"></span><% if (label != "") { %>&nbsp;<%-label%><% } %></button>',

View File

@ -1092,12 +1092,10 @@ define('pgadmin.browser.node', [
// All buttons will be created within a single
// div area.
var btnGroup =
$('<div tabindex="0"></div>').addClass(
'pg-prop-btn-group'
),
$('<div class="pg-prop-btn-group"></div>'),
// Template used for creating a button
tmpl = _.template([
'<button type="<%= type %>" ',
'<button tabindex="0" type="<%= type %>" ',
'class="btn <%=extraClasses.join(\' \')%>"',
'<% if (disabled) { %> disabled="disabled"<% } %> title="<%-tooltip%>">',
'<span class="<%= icon %>"></span><% if (label != "") { %>&nbsp;<%-label%><% } %></button>',

View File

@ -444,7 +444,7 @@ define([
template: _.template([
'<label class="<%=controlLabelClassName%>"><%=label%></label>',
'<div class="<%=controlsClassName%> <%=extraClasses.join(\' \')%>">',
' <input tabindex="0" type="checkbox" data-style="quick" data-toggle="toggle"',
' <input tabindex="-1" type="checkbox" data-style="quick" data-toggle="toggle"',
' data-size="<%=options.size%>" data-height="<%=options.height%>" ',
' data-on="<%=options.onText%>" data-off="<%=options.offText%>" ',
' data-onstyle="<%=options.onColor%>" data-offstyle="<%=options.offColor%>" data-width="<%=options.width%>" ',
@ -520,6 +520,7 @@ define([
this.$input = this.$el.find('input[type=checkbox]').first();
this.$input.bootstrapToggle();
this.$el.find('.toggle.btn').attr('tabindex', '0');
this.updateInvalid();
return this;

View File

@ -26,9 +26,18 @@ export function findAndSetFocus(container) {
var first_el = container
.find('button.fa-plus:first');
/* Adding the tabindex condition makes sure that
* when testing accessibility it works consistently across all
* browser. For eg, in safari focus() works only when element has
* tabindex="0", whereas in Chrome it works in any case
*/
if (first_el.length == 0) {
first_el = container
.find('.pgadmin-controls:first input:enabled,.CodeMirror-scroll');
.find(`
.pgadmin-controls:first input:enabled,
.pgadmin-controls:first .btn:not(.toggle),
.CodeMirror-scroll`)
.find('*[tabindex]:not([tabindex="-1"])');
}
if(first_el.length > 0) {
@ -69,4 +78,4 @@ export function getGCD(inp_arr) {
}
return result;
}
}

View File

@ -591,6 +591,11 @@ define([
break;
}
},
onshow: function() {
var container = $(this.elements.body).find('.tab-content:first > .tab-pane.active:first');
commonUtils.findAndSetFocus(container);
},
},
prepare: function() {
@ -656,8 +661,6 @@ define([
});
view.$el.attr('tabindex', -1);
var container = view.$el.find('.tab-content:first > .tab-pane.active:first');
commonUtils.findAndSetFocus(container);
setTimeout(function() {
pgBrowser.keyboardNavigation.getDialogTabNavigator($(self.elements.dialog));
}, 200);

View File

@ -76,18 +76,24 @@ define([
'<div class="pgadmin-controls col-12 col-sm-8 btn-group pg-maintenance-op pgadmin-controls-radio-none" data-toggle="buttons">',
' <% for (var i=0; i < options.length; i++) { %>',
' <% var option = options[i]; %>',
' <label class="btn btn-primary<% if (i == 0) { %> active<%}%>">',
' <label class="btn btn-primary<% if (i == 0) { %> active<%}%>" tabindex="0">',
' <input type="radio" name="op" id="op" autocomplete="off" value=<%-formatter.fromRaw(option.value)%><% if (i == 0) { %> selected<%}%> > <%-option.label%>',
' </label>',
' <% } %>',
'</div>',
].join('\n')),
render: function() {
Backform.RadioControl.prototype.render.apply(this, arguments);
this.$el.find('.pg-maintenance-op .btn').on('keyup', (e)=>{
switch(e.keyCode) {
case 32: /* Spacebar click */
$(e.currentTarget).trigger('click');
break;
}
});
return this;
},
}),
select2: {
allowClear: false,
width: '100%',
placeholder: gettext('Select from list...'),
},
},
{
type: 'nested',
@ -423,6 +429,10 @@ define([
});
}
},
onshow: function() {
var container = $(this.elements.body).find('.tab-content:first > .tab-pane.active:first');
commonUtils.findAndSetFocus(container);
},
},
prepare: function() {
// Main maintenance tool dialog container
@ -466,9 +476,6 @@ define([
}
view.$el.attr('tabindex', -1);
var container = view.$el.find('.tab-content:first > .tab-pane.active:first');
commonUtils.findAndSetFocus(container);
this.elements.content.appendChild($container.get(0));
},
};