Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes unnecessary error reporting by screen reader

Browse Source 
This patch would inject error message dynamically for
screen readers only when there is an error state. In
normal flow screen reader would not be reporting any
errors to users.

LEARNER-5865
This commit is contained in:
Adeel Khan
2018-08-08 00:21:13 +05:00
parent 834c2eb1b3
commit 85af79be25
2 changed files with 15 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
lms/static/js/student_account/views/RegisterView.js
View File

@@ -327,8 +327,10 @@
error = isCheckbox ? '' : decisions.validation_decisions[name];
if (hasError && this.negativeValidationEnabled) {
this.addValidationErrorMsgForScreenReader($el);
this.renderLiveValidationError($el, $label, $requiredTextLabel, $icon, $errorTip, error);
} else if (this.positiveValidationEnabled) {
this.removeValidationErrorMsgForScreenReader($el);
this.renderLiveValidationSuccess($el, $label, $requiredTextLabel, $icon, $errorTip);
}
},
@@ -341,6 +343,16 @@
return $('#' + $el.attr('id') + '-validation-icon');
},
addValidationErrorMsgForScreenReader: function($el) {
var $validation_node = this.$form.find('#' + $el.attr('id') + '-validation-error');
$validation_node.find('.sr-only').text('ERROR:');
},
removeValidationErrorMsgForScreenReader: function($el) {
var $validation_node = this.$form.find('#' + $el.attr('id') + '-validation-error');
$validation_node.find('.sr-only').text('');
},
getErrorTip: function($el) {
return $('#' + $el.attr('id') + '-validation-error-msg');
},

6
lms/templates/student_account/form_field.underscore
View File

@@ -39,7 +39,7 @@
<% }); %>
</select>
<span id="<%- form %>-<%- name %>-validation-error" class="tip error" aria-live="assertive">
<span class="sr-only">ERROR: </span>
<span class="sr-only"></span>
<span id="<%- form %>-<%- name %>-validation-error-msg"></span>
</span>
<% if ( instructions ) { %> <span class="tip tip-input" id="<%- form %>-<%- name %>-desc"><%- instructions %></span><% } %>
@@ -65,7 +65,7 @@
} %>
<% if ( required ) { %> aria-required="true" required<% } %>></textarea>
<span id="<%- form %>-<%- name %>-validation-error" class="tip error" aria-live="assertive">
<span class="sr-only">ERROR: </span>
<span class="sr-only"></span>
<span id="<%- form %>-<%- name %>-validation-error-msg"></span>
</span>
<% if ( instructions ) { %> <span class="tip tip-input" id="<%- form %>-<%- name %>-desc"><%- instructions %></span><% } %>
@@ -126,7 +126,7 @@
<% } %>
<span id="<%- form %>-<%- name %>-validation-error" class="tip error" aria-live="assertive">
<span class="sr-only">ERROR: </span>
<span class="sr-only"></span>
<span id="<%- form %>-<%- name %>-validation-error-msg"></span>
</span>
<% if ( instructions ) { %> <span class="tip tip-input" id="<%- form %>-<%- name %>-desc"><%- instructions %></span><% } %>