mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-16 10:15:24 -06:00
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
Akshay Joshi
parent
ed8d1cde00
commit
2cd58efcdd
@ -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.
|
||||
@ -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 != "") { %> <%-label%><% } %></button>',
|
||||
|
||||
@ -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 != "") { %> <%-label%><% } %></button>',
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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));
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user