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 %>"> <% } else if (editable === 'never') { %> @@ -44,7 +46,7 @@ <% } %> <% if (mode === 'edit' && maxCharacters) { %> -
+
<%= HtmlUtils.interpolateHtml( gettext('{currentCountOpeningTag}{currentCharacterCount}{currentCountClosingTag} of {maxCharacters}'),