Ensure that toggle buttons are accessible by most screen readers. Fixes #6317

This commit is contained in:
Khushboo Vashi 2021-03-19 11:44:57 +05:30 committed by Akshay Joshi
parent ded65340fe
commit b973d6055d
2 changed files with 4 additions and 3 deletions

View File

@ -53,4 +53,5 @@ Bug fixes
| `Issue #6307 <https://redmine.postgresql.org/issues/6307>`_ - Fixed an issue where the incorrect values visible in the dependents tab for publication.
| `Issue #6312 <https://redmine.postgresql.org/issues/6312>`_ - Fixed an issue where copy/paste rows in view data paste the wrong value for boolean type.
| `Issue #6316 <https://redmine.postgresql.org/issues/6316>`_ - Ensure that the primary key should be visible properly in the table dialog.
| `Issue #6317 <https://redmine.postgresql.org/issues/6317>`_ - Ensure that toggle buttons are accessible by most screen readers.
| `Issue #6322 <https://redmine.postgresql.org/issues/6322>`_ - Fixed an issue where the top menu disappears when entering into the full screen for minimum screen resolution.

View File

@ -587,7 +587,6 @@ define([
},
template: _.template([
'<span class="<%=controlLabelClassName%>"><%=label%></span>',
'<label class="sr-value sr-only" for="<%=cId%>"></label>',
'<div class="<%=controlsClassName%> <%=extraClasses.join(\' \')%>">',
' <input tabindex="-1" type="checkbox" aria-hidden="true" aria-label="' + gettext('Toggle button') + '" data-style="quick" data-toggle="toggle"',
' data-size="<%=options.size%>" data-height="<%=options.height%>" ',
@ -615,11 +614,11 @@ define([
if(this.$el.find('.toggle.btn').hasClass('off')) {
this.$el.find('.sr-value').text(`
${label}, ${offText}, ` + gettext('Toggle button') + `
${label}, ${offText}, ` + gettext('Toggle') + `
`);
} else {
this.$el.find('.sr-value').text(`
${label}, ${onText}, ` + gettext('Toggle button') + `
${label}, ${onText}, ` + gettext('Toggle') + `
`);
}
},
@ -693,6 +692,7 @@ define([
.attr('id', data.cId);
this.$el.find('.toggle.btn .toggle-group .btn').attr('aria-hidden', true);
this.$el.find('div.toggle').append('<label class="sr-value sr-only" for="<%=cId%>"></label>');
this.setSrValue();
this.updateInvalid();