About Me textarea character counter accessibility issue

LEARNER-6612

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);
+
                 }
             },
 

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}'),