From 0c00416deb637c8cfbb48033c862841a2b6fc08d Mon Sep 17 00:00:00 2001
From: Ahsan Ulhaq <ahsan.haq@arbisoft.com>
Date: Thu, 1 Nov 2018 16:27:57 +0500
Subject: [PATCH] About Me textarea character counter accessibility issue
 LEARNER-6612

---
 lms/static/js/views/fields.js                 | 21 ++++++++++++++++++-
 .../fields/field_textarea.underscore          |  4 +++-
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/lms/static/js/views/fields.js b/lms/static/js/views/fields.js
index cc79cd4bc4..360bbff032 100644
--- a/lms/static/js/views/fields.js
+++ b/lms/static/js/views/fields.js
@@ -601,10 +601,29 @@
 
             updateCharCount: function() {
                 var curCharCount;
+                var remainingCharCount;
+                var $charCount = $('.u-field-footer .current-char-count');
                 // Update character count for textarea
                 if (this.options.maxCharacters) {
                     curCharCount = $('#u-field-textarea-' + this.options.valueAttribute).val().length;
-                    $('.u-field-footer .current-char-count').text(curCharCount);
+                    remainingCharCount = this.options.maxCharacters - curCharCount;
+                    if (remainingCharCount < 20) {
+                        $charCount.attr({
+                            'aria-live': 'assertive',
+                            'aria-atomic': true
+                        });
+                    }
+                    else if (remainingCharCount < 60) {
+                        $charCount.attr('aria-atomic', 'false');
+                    }
+                    else if (remainingCharCount < 70) {
+                        $charCount.attr({
+                            'aria-live': 'polite',
+                            'aria-atomic': true
+                        });
+                    }
+                    $charCount.text(curCharCount);
+
                 }
             },
 
diff --git a/lms/templates/fields/field_textarea.underscore b/lms/templates/fields/field_textarea.underscore
index 915f4f4553..17c63a4023 100644
--- a/lms/templates/fields/field_textarea.underscore
+++ b/lms/templates/fields/field_textarea.underscore
@@ -18,6 +18,8 @@
             aria-labelledby="u-field-title-<%- id %>"><textarea maxlength="<%- maxCharacters%>" id="u-field-textarea-<%- id %>" rows="4"
             <% if (message) { %>
                 aria-describedby="u-field-message-help-<%- id %>"
+            <% } else { %>
+                aria-describedby="character-count-<%- id %>"
             <% } %>
             ><%- value %></textarea>
         <% } else if (editable === 'never') { %>
@@ -44,7 +46,7 @@
             </span>
         <% } %>
         <% if (mode === 'edit' && maxCharacters) { %>
-            <div class="field-textarea-character-count">
+            <div id="character-count-<%- id %>" class="field-textarea-character-count">
                 <%=
                     HtmlUtils.interpolateHtml(
                         gettext('{currentCountOpeningTag}{currentCharacterCount}{currentCountClosingTag} of {maxCharacters}'),