Fixed accessibility issue for the missing label from the table header.

This commit is contained in:
Vishal Sawale
2020-04-02 12:47:39 +05:30
committed by Akshay Joshi
parent 37f55ccc25
commit 4036f2a0f2
2 changed files with 14 additions and 1 deletions

View File

@@ -496,9 +496,11 @@ define([
e.stopPropagation();
},
template: _.template([
'<% if (label) { %>',
'<label class="<%=controlLabelClassName%>" id="<%=cId%>_grplabel"><%=label%></label>',
'<% } %>',
'<div class="<%=controlsClassName%> <%=extraClasses.join(\' \')%>">',
' <div class="btn-group pgadmin-controls-radio-none<% if (disabled) {%> disabled <%}%>" role="radiogroup" aria-labelledby="<%=cId%>_grplabel">',
' <div class="btn-group pgadmin-controls-radio-none<% if (disabled) {%> disabled <%}%>" role="radiogroup" <% if (label) {%> aria-labelledby="<%=cId%>_grplabel" <%}%>>',
' <% for (var i=0; i < options.length; i++) { %>',
' <% var option = options[i]; %>',
' <label role="radio" class="btn btn-radiomodern <% if (option.value == value) { %> btn-primary <%} else {%> btn-secondary <%}%> <% if (!option.disabled && !disabled) { %>" tabindex="0"<% } else { %> disabled"<% } %>>',

View File

@@ -611,6 +611,17 @@ define([
this.$el.attr('aria-label', getAriaLabel);
}
},
render: function() {
Backgrid.HeaderCell.prototype.render.apply(this, arguments);
// If table header label is not present then screen reader will raise
// an error we will add span for screen reader only
if (this.column.get('label') == '' || !this.column.get('label')) {
let getAriaLabel = this.column.get('cellAriaLabel');
if (getAriaLabel)
this.$el.append(`<span class="sr-only">${getAriaLabel}</span>`);
}
return this;
},
});
/**