govuk_publishing_components 29.9.0 → 29.10.0

data/lib/govuk_publishing_components/presenters/public_layout_helper.rb

@@ -2,7 +2,7 @@ module GovukPublishingComponents
   module Presenters
     class PublicLayoutHelper
       FOOTER_NAVIGATION_COLUMNS = [2, 1].freeze
-
+      FOOTER_TRACK_ACTIONS = %w[topicsLink governmentActivityLink].freeze
       FOOTER_META = {
         items: [
           {
@@ -46,25 +46,44 @@ module GovukPublishingComponents
       attr_reader :footer_navigation, :footer_meta, :cookie_banner_data
 
       def initialize(local_assigns)
-        @footer_navigation = local_assigns[:footer_navigation] || I18n.t("components.layout_footer.navigation_links").each_with_index.map do |menu, i|
+        @footer_navigation = local_assigns[:footer_navigation] || navigation_link_generation_from_locale(I18n.t("components.layout_footer.navigation_links"))
+        @footer_meta = local_assigns[:footer_meta] || { items: add_data_attributes_to_links(FOOTER_META[:items], "supportLink") }
+        @cookie_banner_data = local_assigns[:cookie_banner_data] || {}
+      end
+
+      def navigation_link_generation_from_locale(links)
+        links.each_with_index.map do |menu, i|
           {
             title: menu[:title],
-            columns: FOOTER_NAVIGATION_COLUMNS[i],
-            items: menu[:menu_contents].map do |item|
-              item.merge({
-                attributes: {
-                  data: {
-                    track_category: "footerClicked",
-                    track_action: "footerLinks",
-                    track_label: item[:text],
-                  },
-                },
-              })
-            end,
+            columns: footer_navigation_columns[i],
+            items: add_data_attributes_to_links(menu[:menu_contents], footer_track_actions[i]),
           }
         end
-        @footer_meta = local_assigns[:footer_meta] || FOOTER_META
-        @cookie_banner_data = local_assigns[:cookie_banner_data] || {}
+      end
+
+      def footer_navigation_columns
+        FOOTER_NAVIGATION_COLUMNS
+      end
+
+      def footer_track_actions
+        FOOTER_TRACK_ACTIONS
+      end
+
+      def generate_data_attribute(link, track_action)
+        {
+          track_category: "footerClicked",
+          track_action: track_action,
+          track_label: link[:href],
+          track_options: {
+            dimension29: link[:text],
+          },
+        }
+      end
+
+      def add_data_attributes_to_links(items, track_action)
+        items.map do |item|
+          item.deep_merge({ attributes: { data: generate_data_attribute(item, track_action) } })
+        end
       end
     end
   end

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "29.9.0".freeze
+  VERSION = "29.10.0".freeze
 end

data/node_modules/govuk-frontend/govuk/all.js

@@ -1601,9 +1601,9 @@ Details.prototype.polyfillHandleInputs = function (node, callback) {
 function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
-  if (this.$textarea) {
-    this.$countMessage = document.getElementById(this.$textarea.id + '-info');
-  }
+  this.$visibleCountMessage = null;
+  this.$screenReaderCountMessage = null;
+  this.lastInputTimestamp = null;
 }
 
 CharacterCount.prototype.defaults = {
@@ -1613,18 +1613,39 @@ CharacterCount.prototype.defaults = {
 
 // Initialize component
 CharacterCount.prototype.init = function () {
+  // Check that required elements are present
+  if (!this.$textarea) {
+    return
+  }
+
   // Check for module
   var $module = this.$module;
   var $textarea = this.$textarea;
-  var $countMessage = this.$countMessage;
-
-  if (!$textarea || !$countMessage) {
-    return
-  }
+  var $fallbackLimitMessage = document.getElementById($textarea.id + '-info');
 
-  // We move count message right after the field
+  // Move the fallback count message to be immediately after the textarea
   // Kept for backwards compatibility
-  $textarea.insertAdjacentElement('afterend', $countMessage);
+  $textarea.insertAdjacentElement('afterend', $fallbackLimitMessage);
+
+  // Create the *screen reader* specific live-updating counter
+  // This doesn't need any styling classes, as it is never visible
+  var $screenReaderCountMessage = document.createElement('div');
+  $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden';
+  $screenReaderCountMessage.setAttribute('aria-live', 'polite');
+  this.$screenReaderCountMessage = $screenReaderCountMessage;
+  $fallbackLimitMessage.insertAdjacentElement('afterend', $screenReaderCountMessage);
+
+  // Create our live-updating counter element, copying the classes from the
+  // fallback element for backwards compatibility as these may have been configured
+  var $visibleCountMessage = document.createElement('div');
+  $visibleCountMessage.className = $fallbackLimitMessage.className;
+  $visibleCountMessage.classList.add('govuk-character-count__status');
+  $visibleCountMessage.setAttribute('aria-hidden', 'true');
+  this.$visibleCountMessage = $visibleCountMessage;
+  $fallbackLimitMessage.insertAdjacentElement('afterend', $visibleCountMessage);
+
+  // Hide the fallback limit message
+  $fallbackLimitMessage.classList.add('govuk-visually-hidden');
 
   // Read options set using dataset ('data-' values)
   this.options = this.getDataset($module);
@@ -1644,23 +1665,19 @@ CharacterCount.prototype.init = function () {
   }
 
   // Remove hard limit if set
-  $module.removeAttribute('maxlength');
+  $textarea.removeAttribute('maxlength');
+
+  this.bindChangeEvents();
 
   // When the page is restored after navigating 'back' in some browsers the
   // state of the character count is not restored until *after* the DOMContentLoaded
-  // event is fired, so we need to sync after the pageshow event in browsers
-  // that support it.
+  // event is fired, so we need to manually update it after the pageshow event
+  // in browsers that support it.
   if ('onpageshow' in window) {
-    window.addEventListener('pageshow', this.sync.bind(this));
+    window.addEventListener('pageshow', this.updateCountMessage.bind(this));
   } else {
-    window.addEventListener('DOMContentLoaded', this.sync.bind(this));
+    window.addEventListener('DOMContentLoaded', this.updateCountMessage.bind(this));
   }
-
-  this.sync();
-};
-
-CharacterCount.prototype.sync = function () {
-  this.bindChangeEvents();
   this.updateCountMessage();
 };
 
@@ -1695,7 +1712,7 @@ CharacterCount.prototype.count = function (text) {
 // Bind input propertychange to the elements and update based on the change
 CharacterCount.prototype.bindChangeEvents = function () {
   var $textarea = this.$textarea;
-  $textarea.addEventListener('keyup', this.checkIfValueChanged.bind(this));
+  $textarea.addEventListener('keyup', this.handleKeyUp.bind(this));
 
   // Bind focus/blur events to start/stop polling
   $textarea.addEventListener('focus', this.handleFocus.bind(this));
@@ -1713,42 +1730,64 @@ CharacterCount.prototype.checkIfValueChanged = function () {
   }
 };
 
-// Update message box
+// Helper function to update both the visible and screen reader-specific
+// counters simultaneously (e.g. on init)
 CharacterCount.prototype.updateCountMessage = function () {
-  var countElement = this.$textarea;
-  var options = this.options;
-  var countMessage = this.$countMessage;
+  this.updateVisibleCountMessage();
+  this.updateScreenReaderCountMessage();
+};
 
-  // Determine the remaining number of characters/words
-  var currentLength = this.count(countElement.value);
-  var maxLength = this.maxLength;
-  var remainingNumber = maxLength - currentLength;
+// Update visible counter
+CharacterCount.prototype.updateVisibleCountMessage = function () {
+  var $textarea = this.$textarea;
+  var $visibleCountMessage = this.$visibleCountMessage;
+  var remainingNumber = this.maxLength - this.count($textarea.value);
 
-  // Set threshold if presented in options
-  var thresholdPercent = options.threshold ? options.threshold : 0;
-  var thresholdValue = maxLength * thresholdPercent / 100;
-  if (thresholdValue > currentLength) {
-    countMessage.classList.add('govuk-character-count__message--disabled');
-    // Ensure threshold is hidden for users of assistive technologies
-    countMessage.setAttribute('aria-hidden', true);
+  // If input is over the threshold, remove the disabled class which renders the
+  // counter invisible.
+  if (this.isOverThreshold()) {
+    $visibleCountMessage.classList.remove('govuk-character-count__message--disabled');
   } else {
-    countMessage.classList.remove('govuk-character-count__message--disabled');
-    // Ensure threshold is visible for users of assistive technologies
-    countMessage.removeAttribute('aria-hidden');
+    $visibleCountMessage.classList.add('govuk-character-count__message--disabled');
   }
 
   // Update styles
   if (remainingNumber < 0) {
-    countElement.classList.add('govuk-textarea--error');
-    countMessage.classList.remove('govuk-hint');
-    countMessage.classList.add('govuk-error-message');
+    $textarea.classList.add('govuk-textarea--error');
+    $visibleCountMessage.classList.remove('govuk-hint');
+    $visibleCountMessage.classList.add('govuk-error-message');
+  } else {
+    $textarea.classList.remove('govuk-textarea--error');
+    $visibleCountMessage.classList.remove('govuk-error-message');
+    $visibleCountMessage.classList.add('govuk-hint');
+  }
+
+  // Update message
+  $visibleCountMessage.innerHTML = this.formattedUpdateMessage();
+};
+
+// Update screen reader-specific counter
+CharacterCount.prototype.updateScreenReaderCountMessage = function () {
+  var $screenReaderCountMessage = this.$screenReaderCountMessage;
+
+  // If over the threshold, remove the aria-hidden attribute, allowing screen
+  // readers to announce the content of the element.
+  if (this.isOverThreshold()) {
+    $screenReaderCountMessage.removeAttribute('aria-hidden');
   } else {
-    countElement.classList.remove('govuk-textarea--error');
-    countMessage.classList.remove('govuk-error-message');
-    countMessage.classList.add('govuk-hint');
+    $screenReaderCountMessage.setAttribute('aria-hidden', true);
   }
 
   // Update message
+  $screenReaderCountMessage.innerHTML = this.formattedUpdateMessage();
+};
+
+// Format update message
+CharacterCount.prototype.formattedUpdateMessage = function () {
+  var $textarea = this.$textarea;
+  var options = this.options;
+  var remainingNumber = this.maxLength - this.count($textarea.value);
+
   var charVerb = 'remaining';
   var charNoun = 'character';
   var displayNumber = remainingNumber;
@@ -1760,12 +1799,44 @@ CharacterCount.prototype.updateCountMessage = function () {
   charVerb = (remainingNumber < 0) ? 'too many' : 'remaining';
   displayNumber = Math.abs(remainingNumber);
 
-  countMessage.innerHTML = 'You have ' + displayNumber + ' ' + charNoun + ' ' + charVerb;
+  return 'You have ' + displayNumber + ' ' + charNoun + ' ' + charVerb
+};
+
+// Checks whether the value is over the configured threshold for the input.
+// If there is no configured threshold, it is set to 0 and this function will
+// always return true.
+CharacterCount.prototype.isOverThreshold = function () {
+  var $textarea = this.$textarea;
+  var options = this.options;
+
+  // Determine the remaining number of characters/words
+  var currentLength = this.count($textarea.value);
+  var maxLength = this.maxLength;
+
+  // Set threshold if presented in options
+  var thresholdPercent = options.threshold ? options.threshold : 0;
+  var thresholdValue = maxLength * thresholdPercent / 100;
+
+  return (thresholdValue <= currentLength)
+};
+
+// Update the visible character counter and keep track of when the last update
+// happened for each keypress
+CharacterCount.prototype.handleKeyUp = function () {
+  this.updateVisibleCountMessage();
+  this.lastInputTimestamp = Date.now();
 };
 
 CharacterCount.prototype.handleFocus = function () {
-  // Check if value changed on focus
-  this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1000);
+  // If the field is focused, and a keyup event hasn't been detected for at
+  // least 1000 ms (1 second), then run the manual change check.
+  // This is so that the update triggered by the manual comparison doesn't
+  // conflict with debounced KeyboardEvent updates.
+  this.valueChecker = setInterval(function () {
+    if (!this.lastInputTimestamp || (Date.now() - 500) >= this.lastInputTimestamp) {
+      this.checkIfValueChanged();
+    }
+  }.bind(this), 1000);
 };
 
 CharacterCount.prototype.handleBlur = function () {

data/node_modules/govuk-frontend/govuk/components/back-link/macro-options.json

@@ -3,13 +3,13 @@
         "name": "text",
         "type": "string",
         "required": false,
-        "description": "Text to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to 'Back'."
+        "description": "Text to use within the back link component. If `html` is provided, the `text` option will be ignored. Defaults to 'Back'."
     },
     {
         "name": "html",
         "type": "string",
         "required": false,
-        "description": "HTML to use within the back link component. If `html` is provided, the `text` argument will be ignored. Defaults to 'Back'."
+        "description": "HTML to use within the back link component. If `html` is provided, the `text` option will be ignored. Defaults to 'Back'."
     },
     {
         "name": "href",

data/node_modules/govuk-frontend/govuk/components/breadcrumbs/_index.scss

@@ -128,8 +128,6 @@
       }
 
       .govuk-breadcrumbs__list {
-        display: -webkit-box;
-        display: -webkit-flex;
         display: -ms-flexbox;
         display: flex;
       }

data/node_modules/govuk-frontend/govuk/components/breadcrumbs/macro-options.json

@@ -9,13 +9,13 @@
                 "name": "text",
                 "type": "string",
                 "required": true,
-                "description": "If `html` is set, this is not required. Text to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored."
+                "description": "If `html` is set, this is not required. Text to use within the breadcrumbs item. If `html` is provided, the `text` option will be ignored."
             },
             {
                 "name": "html",
                 "type": "string",
                 "required": true,
-                "description": "If `text` is set, this is not required. HTML to use within the breadcrumbs item. If `html` is provided, the `text` argument will be ignored."
+                "description": "If `text` is set, this is not required. HTML to use within the breadcrumbs item. If `html` is provided, the `text` option will be ignored."
             },
             {
                 "name": "href",

data/node_modules/govuk-frontend/govuk/components/button/_index.scss

@@ -235,22 +235,14 @@
     @include govuk-typography-weight-bold;
     @include govuk-typography-responsive($size: 24, $override-line-height: 1);
 
-    display: -webkit-inline-box;
-
-    display: -webkit-inline-flex;
-
     display: -ms-inline-flexbox;
 
     display: inline-flex;
     min-height: auto;
 
-    -webkit-box-pack: center;
-
-    -webkit-justify-content: center;
-
-        -ms-flex-pack: center;
+    -ms-flex-pack: center;
 
-            justify-content: center;
+        justify-content: center;
   }
 
   .govuk-button__start-icon {
@@ -260,12 +252,10 @@
       margin-left: govuk-spacing(2);
     }
     vertical-align: middle;
-    -webkit-flex-shrink: 0;
-        -ms-flex-negative: 0;
-            flex-shrink: 0;
-    -webkit-align-self: center;
-        -ms-flex-item-align: center;
-            align-self: center;
+    -ms-flex-negative: 0;
+        flex-shrink: 0;
+    -ms-flex-item-align: center;
+        align-self: center;
     // Work around SVGs not inheriting color from parent in forced color mode
     // (https://github.com/w3c/csswg-drafts/issues/6310)
     forced-color-adjust: auto;

data/node_modules/govuk-frontend/govuk/components/button/macro-options.json

@@ -9,13 +9,13 @@
         "name": "text",
         "type": "string",
         "required": true,
-        "description": "If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`."
+        "description": "If `html` is set, this is not required. Text for the button or link. If `html` is provided, the `text` option will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This option has no effect if `element` is set to `input`."
     },
     {
         "name": "html",
         "type": "string",
         "required": true,
-        "description": "If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` argument will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This argument has no effect if `element` is set to `input`."
+        "description": "If `text` is set, this is not required. HTML for the button or link. If `html` is provided, the `text` option will be ignored and `element` will be automatically set to `button` unless `href` is also set, or it has already been defined. This option has no effect if `element` is set to `input`."
     },
     {
         "name": "name",

data/node_modules/govuk-frontend/govuk/components/character-count/character-count.js

@@ -1017,9 +1017,9 @@ if (detect) return
 function CharacterCount ($module) {
   this.$module = $module;
   this.$textarea = $module.querySelector('.govuk-js-character-count');
-  if (this.$textarea) {
-    this.$countMessage = document.getElementById(this.$textarea.id + '-info');
-  }
+  this.$visibleCountMessage = null;
+  this.$screenReaderCountMessage = null;
+  this.lastInputTimestamp = null;
 }
 
 CharacterCount.prototype.defaults = {
@@ -1029,18 +1029,39 @@ CharacterCount.prototype.defaults = {
 
 // Initialize component
 CharacterCount.prototype.init = function () {
+  // Check that required elements are present
+  if (!this.$textarea) {
+    return
+  }
+
   // Check for module
   var $module = this.$module;
   var $textarea = this.$textarea;
-  var $countMessage = this.$countMessage;
-
-  if (!$textarea || !$countMessage) {
-    return
-  }
+  var $fallbackLimitMessage = document.getElementById($textarea.id + '-info');
 
-  // We move count message right after the field
+  // Move the fallback count message to be immediately after the textarea
   // Kept for backwards compatibility
-  $textarea.insertAdjacentElement('afterend', $countMessage);
+  $textarea.insertAdjacentElement('afterend', $fallbackLimitMessage);
+
+  // Create the *screen reader* specific live-updating counter
+  // This doesn't need any styling classes, as it is never visible
+  var $screenReaderCountMessage = document.createElement('div');
+  $screenReaderCountMessage.className = 'govuk-character-count__sr-status govuk-visually-hidden';
+  $screenReaderCountMessage.setAttribute('aria-live', 'polite');
+  this.$screenReaderCountMessage = $screenReaderCountMessage;
+  $fallbackLimitMessage.insertAdjacentElement('afterend', $screenReaderCountMessage);
+
+  // Create our live-updating counter element, copying the classes from the
+  // fallback element for backwards compatibility as these may have been configured
+  var $visibleCountMessage = document.createElement('div');
+  $visibleCountMessage.className = $fallbackLimitMessage.className;
+  $visibleCountMessage.classList.add('govuk-character-count__status');
+  $visibleCountMessage.setAttribute('aria-hidden', 'true');
+  this.$visibleCountMessage = $visibleCountMessage;
+  $fallbackLimitMessage.insertAdjacentElement('afterend', $visibleCountMessage);
+
+  // Hide the fallback limit message
+  $fallbackLimitMessage.classList.add('govuk-visually-hidden');
 
   // Read options set using dataset ('data-' values)
   this.options = this.getDataset($module);
@@ -1060,23 +1081,19 @@ CharacterCount.prototype.init = function () {
   }
 
   // Remove hard limit if set
-  $module.removeAttribute('maxlength');
+  $textarea.removeAttribute('maxlength');
+
+  this.bindChangeEvents();
 
   // When the page is restored after navigating 'back' in some browsers the
   // state of the character count is not restored until *after* the DOMContentLoaded
-  // event is fired, so we need to sync after the pageshow event in browsers
-  // that support it.
+  // event is fired, so we need to manually update it after the pageshow event
+  // in browsers that support it.
   if ('onpageshow' in window) {
-    window.addEventListener('pageshow', this.sync.bind(this));
+    window.addEventListener('pageshow', this.updateCountMessage.bind(this));
   } else {
-    window.addEventListener('DOMContentLoaded', this.sync.bind(this));
+    window.addEventListener('DOMContentLoaded', this.updateCountMessage.bind(this));
   }
-
-  this.sync();
-};
-
-CharacterCount.prototype.sync = function () {
-  this.bindChangeEvents();
   this.updateCountMessage();
 };
 
@@ -1111,7 +1128,7 @@ CharacterCount.prototype.count = function (text) {
 // Bind input propertychange to the elements and update based on the change
 CharacterCount.prototype.bindChangeEvents = function () {
   var $textarea = this.$textarea;
-  $textarea.addEventListener('keyup', this.checkIfValueChanged.bind(this));
+  $textarea.addEventListener('keyup', this.handleKeyUp.bind(this));
 
   // Bind focus/blur events to start/stop polling
   $textarea.addEventListener('focus', this.handleFocus.bind(this));
@@ -1129,42 +1146,64 @@ CharacterCount.prototype.checkIfValueChanged = function () {
   }
 };
 
-// Update message box
+// Helper function to update both the visible and screen reader-specific
+// counters simultaneously (e.g. on init)
 CharacterCount.prototype.updateCountMessage = function () {
-  var countElement = this.$textarea;
-  var options = this.options;
-  var countMessage = this.$countMessage;
+  this.updateVisibleCountMessage();
+  this.updateScreenReaderCountMessage();
+};
 
-  // Determine the remaining number of characters/words
-  var currentLength = this.count(countElement.value);
-  var maxLength = this.maxLength;
-  var remainingNumber = maxLength - currentLength;
+// Update visible counter
+CharacterCount.prototype.updateVisibleCountMessage = function () {
+  var $textarea = this.$textarea;
+  var $visibleCountMessage = this.$visibleCountMessage;
+  var remainingNumber = this.maxLength - this.count($textarea.value);
 
-  // Set threshold if presented in options
-  var thresholdPercent = options.threshold ? options.threshold : 0;
-  var thresholdValue = maxLength * thresholdPercent / 100;
-  if (thresholdValue > currentLength) {
-    countMessage.classList.add('govuk-character-count__message--disabled');
-    // Ensure threshold is hidden for users of assistive technologies
-    countMessage.setAttribute('aria-hidden', true);
+  // If input is over the threshold, remove the disabled class which renders the
+  // counter invisible.
+  if (this.isOverThreshold()) {
+    $visibleCountMessage.classList.remove('govuk-character-count__message--disabled');
   } else {
-    countMessage.classList.remove('govuk-character-count__message--disabled');
-    // Ensure threshold is visible for users of assistive technologies
-    countMessage.removeAttribute('aria-hidden');
+    $visibleCountMessage.classList.add('govuk-character-count__message--disabled');
   }
 
   // Update styles
   if (remainingNumber < 0) {
-    countElement.classList.add('govuk-textarea--error');
-    countMessage.classList.remove('govuk-hint');
-    countMessage.classList.add('govuk-error-message');
+    $textarea.classList.add('govuk-textarea--error');
+    $visibleCountMessage.classList.remove('govuk-hint');
+    $visibleCountMessage.classList.add('govuk-error-message');
+  } else {
+    $textarea.classList.remove('govuk-textarea--error');
+    $visibleCountMessage.classList.remove('govuk-error-message');
+    $visibleCountMessage.classList.add('govuk-hint');
+  }
+
+  // Update message
+  $visibleCountMessage.innerHTML = this.formattedUpdateMessage();
+};
+
+// Update screen reader-specific counter
+CharacterCount.prototype.updateScreenReaderCountMessage = function () {
+  var $screenReaderCountMessage = this.$screenReaderCountMessage;
+
+  // If over the threshold, remove the aria-hidden attribute, allowing screen
+  // readers to announce the content of the element.
+  if (this.isOverThreshold()) {
+    $screenReaderCountMessage.removeAttribute('aria-hidden');
   } else {
-    countElement.classList.remove('govuk-textarea--error');
-    countMessage.classList.remove('govuk-error-message');
-    countMessage.classList.add('govuk-hint');
+    $screenReaderCountMessage.setAttribute('aria-hidden', true);
   }
 
   // Update message
+  $screenReaderCountMessage.innerHTML = this.formattedUpdateMessage();
+};
+
+// Format update message
+CharacterCount.prototype.formattedUpdateMessage = function () {
+  var $textarea = this.$textarea;
+  var options = this.options;
+  var remainingNumber = this.maxLength - this.count($textarea.value);
+
   var charVerb = 'remaining';
   var charNoun = 'character';
   var displayNumber = remainingNumber;
@@ -1176,12 +1215,44 @@ CharacterCount.prototype.updateCountMessage = function () {
   charVerb = (remainingNumber < 0) ? 'too many' : 'remaining';
   displayNumber = Math.abs(remainingNumber);
 
-  countMessage.innerHTML = 'You have ' + displayNumber + ' ' + charNoun + ' ' + charVerb;
+  return 'You have ' + displayNumber + ' ' + charNoun + ' ' + charVerb
+};
+
+// Checks whether the value is over the configured threshold for the input.
+// If there is no configured threshold, it is set to 0 and this function will
+// always return true.
+CharacterCount.prototype.isOverThreshold = function () {
+  var $textarea = this.$textarea;
+  var options = this.options;
+
+  // Determine the remaining number of characters/words
+  var currentLength = this.count($textarea.value);
+  var maxLength = this.maxLength;
+
+  // Set threshold if presented in options
+  var thresholdPercent = options.threshold ? options.threshold : 0;
+  var thresholdValue = maxLength * thresholdPercent / 100;
+
+  return (thresholdValue <= currentLength)
+};
+
+// Update the visible character counter and keep track of when the last update
+// happened for each keypress
+CharacterCount.prototype.handleKeyUp = function () {
+  this.updateVisibleCountMessage();
+  this.lastInputTimestamp = Date.now();
 };
 
 CharacterCount.prototype.handleFocus = function () {
-  // Check if value changed on focus
-  this.valueChecker = setInterval(this.checkIfValueChanged.bind(this), 1000);
+  // If the field is focused, and a keyup event hasn't been detected for at
+  // least 1000 ms (1 second), then run the manual change check.
+  // This is so that the update triggered by the manual comparison doesn't
+  // conflict with debounced KeyboardEvent updates.
+  this.valueChecker = setInterval(function () {
+    if (!this.lastInputTimestamp || (Date.now() - 500) >= this.lastInputTimestamp) {
+      this.checkIfValueChanged();
+    }
+  }.bind(this), 1000);
 };
 
 CharacterCount.prototype.handleBlur = function () {