IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2024-11-22 08:46:39 -06:00
Code Issues Packages Projects Releases Wiki Activity

Fixed some accessibility issues:

Browse Source 
1) Screen reader to read elements in radio modern control.
2) Aria-label additions at few missing places.
3) Radiocontrol to have different ids for each option.
This commit is contained in:
Ganesh Jaybhay 2020-03-12 11:09:29 +05:30 committed by Akshay Joshi
parent 1bd14895c3
commit 6586be5158
3 changed files with 13 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/pgadmin/static/js/backform.pgadmin.js
View File

@ -496,13 +496,13 @@ define([
e.stopPropagation(); e.stopPropagation();
}, },
template: _.template([ template: _.template([
'<label class="<%=controlLabelClassName%>"><%=label%></label>', '<label class="<%=controlLabelClassName%>" id="<%=cId%>_grplabel"><%=label%></label>',
'<div class="<%=controlsClassName%> <%=extraClasses.join(\' \')%>">', '<div class="<%=controlsClassName%> <%=extraClasses.join(\' \')%>">',
' <div class="btn-group pgadmin-controls-radio-none<% if (disabled) {%> disabled <%}%>" >', ' <div class="btn-group pgadmin-controls-radio-none<% if (disabled) {%> disabled <%}%>" role="radiogroup" aria-labelledby="<%=cId%>_grplabel">',
' <% for (var i=0; i < options.length; i++) { %>', ' <% for (var i=0; i < options.length; i++) { %>',
' <% var option = options[i]; %>', ' <% var option = options[i]; %>',
' <label class="btn btn-radiomodern <% if (option.value == value) { %> btn-primary <%} else {%> btn-secondary <%}%> <% if (!option.disabled && !disabled) { %>" tabindex="0"<% } else { %> disabled"<% } %>>', ' <label role="radio" class="btn btn-radiomodern <% if (option.value == value) { %> btn-primary <%} else {%> btn-secondary <%}%> <% if (!option.disabled && !disabled) { %>" tabindex="0"<% } else { %> disabled"<% } %>>',
' <i class="fa fa-check <% if (option.value != value) { %>visibility-hidden <%}%>"></i>', ' <i class="fa fa-check <% if (option.value != value) { %>visibility-hidden <%}%>" role="img"></i>',
' <input type="radio" name="<%=name%>" autocomplete="off" value=<%-formatter.fromRaw(option.value)%> <% if (option.value == value) { %> checked<%}%> <% if (option.disabled || disabled) { %> disabled <%}%>> <%-option.label%>', ' <input type="radio" name="<%=name%>" autocomplete="off" value=<%-formatter.fromRaw(option.value)%> <% if (option.value == value) { %> checked<%}%> <% if (option.disabled || disabled) { %> disabled <%}%>> <%-option.label%>',
' </label>', ' </label>',
' <% } %>', ' <% } %>',
@ -540,6 +540,7 @@ define([
required: evalF(data.required, data, this.model), required: evalF(data.required, data, this.model),
}); // Clean up first }); // Clean up first
data.cId = data.cId || _.uniqueId('pgC_');
data.options = _.isFunction(data.options) ? data.options = _.isFunction(data.options) ?
data.options.apply(data, [this.model]) : data.options; data.options.apply(data, [this.model]) : data.options;

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

@ -432,7 +432,7 @@ define([
if (editable) { if (editable) {
this.$el.html( this.$el.html(
'<i class=\'fa fa-pencil-square subnode-edit-in-process\' title=\'' + _('Edit row') + '\'></i>' '<i class=\'fa fa-pencil-square subnode-edit-in-process\' title=\'' + _('Edit row') + '\' aria-label=\'' + _('Edit row') + '\'></i>'
); );
let body = $(this.$el).parents()[1], let body = $(this.$el).parents()[1],
container = $(body).find('.tab-content:first > .tab-pane.active:first'); container = $(body).find('.tab-content:first > .tab-pane.active:first');
@ -451,7 +451,7 @@ define([
}, },
render: function() { render: function() {
this.$el.empty(); this.$el.empty();
this.$el.html('<i class=\'fa fa-pencil-square-o\' title=\'' + _('Edit row') + '\'></i>'); this.$el.html('<i class=\'fa fa-pencil-square-o\' title=\'' + _('Edit row') + '\' aria-label=\'' + _('Edit row') + '\'></i>');
this.delegateEvents(); this.delegateEvents();
if (this.grabFocus) if (this.grabFocus)
this.$el.trigger('focus'); this.$el.trigger('focus');
@ -603,9 +603,13 @@ define([
// Here, we will add custom classes to header cell // Here, we will add custom classes to header cell
Backgrid.HeaderCell.prototype.initialize.apply(this, arguments); Backgrid.HeaderCell.prototype.initialize.apply(this, arguments);
var getClassName = this.column.get('cellHeaderClasses'); var getClassName = this.column.get('cellHeaderClasses');
var getAriaLabel = this.column.get('cellAriaLabel');
if (getClassName) { if (getClassName) {
this.$el.addClass(getClassName); this.$el.addClass(getClassName);
} }
if (getAriaLabel) {
this.$el.attr('aria-label', getAriaLabel);
}
}, },
}); });

4
web/pgadmin/static/vendor/backform/backform.js vendored
View File

@ -581,8 +581,8 @@
' <% var option = options[i]; %>', ' <% var option = options[i]; %>',
' <% var id = _.uniqueId("bf_"); %>', ' <% var id = _.uniqueId("bf_"); %>',
' <div class="custom-control custom-radio">', ' <div class="custom-control custom-radio">',
' <input type="<%=type%>" class="custom-control-input <%=extraClasses.join(\' \')%>" id="<%=cId%>" name="<%=name%>" value="<%-formatter.fromRaw(option.value)%>" <%=rawValue == option.value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=readonly ? "disabled" : ""%> <%=required ? "required" : ""%> />', ' <input type="<%=type%>" class="custom-control-input <%=extraClasses.join(\' \')%>" id="<%=cId%><%=i%>" name="<%=name%>" value="<%-formatter.fromRaw(option.value)%>" <%=rawValue == option.value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=readonly ? "disabled" : ""%> <%=required ? "required" : ""%> />',
' <label class="custom-control-label" for="<%=cId%>"><%-option.label%></label>', ' <label class="custom-control-label" for="<%=cId%><%=i%>"><%-option.label%></label>',
' </div>', ' </div>',
' <% } %>', ' <% } %>',
' <% if (helpMessage && helpMessage.length) { %>', ' <% if (helpMessage && helpMessage.length) { %>',