From 85af79be25ae139fcf146a355201653299d28f85 Mon Sep 17 00:00:00 2001
From: Adeel Khan <muhammad.adeel@arbisoft.com>
Date: Wed, 8 Aug 2018 00:21:13 +0500
Subject: [PATCH] Fixes unnecessary error reporting by screen reader

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
---
 lms/static/js/student_account/views/RegisterView.js | 12 ++++++++++++
 lms/templates/student_account/form_field.underscore |  6 +++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/lms/static/js/student_account/views/RegisterView.js b/lms/static/js/student_account/views/RegisterView.js
index c0bb0337c7..034f113e55 100644
--- a/lms/static/js/student_account/views/RegisterView.js
+++ b/lms/static/js/student_account/views/RegisterView.js
@@ -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');
                 },
diff --git a/lms/templates/student_account/form_field.underscore b/lms/templates/student_account/form_field.underscore
index 52a3f8af89..4fd26e7eb7 100644
--- a/lms/templates/student_account/form_field.underscore
+++ b/lms/templates/student_account/form_field.underscore
@@ -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><% } %>