From 050a513cf5bddb1b5a931319653b64cb39d5e331 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 13 Feb 2019 17:47:24 +0000
Subject: [PATCH] Update a11y API when selection count changes

Inserts a hidden live region to ensure changes to
the count are announced.

The live region is hidden because it needs to be
in the initial markup of the page. The visual
counter is part of a larger region which is
inserted/removed from the DOM.

See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions
---
 app/assets/javascripts/templateFolderForm.js | 18 +++++++++++++++---
 app/templates/views/templates/_move_to.html  |  3 +++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index 516085c6c..79db7019e 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -11,6 +11,7 @@
       this.$form.find('button[value=unknown]').remove();
 
       this.$stickyBottom = this.$form.find('#sticky_template_forms');
+      this.$liveRegionCounter = this.$form.find('.selection-counter');
 
       this.$stickyBottom.append(this.nothingSelectedButtons);
       this.$stickyBottom.append(this.itemsSelectedButtons);
@@ -135,6 +136,17 @@
       this.render();
     };
 
+    this.selectionStatus = {
+      'default': 'Nothing selected',
+      'selected': numSelected => `${numSelected} selected`,
+      'update': numSelected => {
+        let liveRegionHTML = (numSelected > 0) ? this.selectionStatus.selected(numSelected) : this.selectionStatus.default;
+
+        $('.template-list-selected-counter-count').html(numSelected);
+        this.$liveRegionCounter.html(liveRegionHTML);
+      }
+    };
+
     this.templateFolderCheckboxChanged = function() {
       let numSelected = this.countSelectedCheckboxes();
 
@@ -148,7 +160,7 @@
 
       this.render();
 
-      $('.template-list-selected-counter-count').html(numSelected);
+      this.selectionStatus.update(numSelected);
 
       $('.template-list-selected-counter').toggle(this.hasCheckboxes());
 
@@ -188,7 +200,7 @@
           <button class="button-secondary" value="add-new-template">New template</button>
           <button class="button-secondary" value="add-new-folder">New folder</button>
           <div class="template-list-selected-counter">
-            Nothing selected
+            ${this.selectionStatus.default}
           </div>
         </div>
       </div>
@@ -200,7 +212,7 @@
           <button class="button-secondary" value="move-to-existing-folder">Move</button>
           <button class="button-secondary" value="move-to-new-folder">Add to new folder</button>
           <div class="template-list-selected-counter">
-            <span class="template-list-selected-counter-count">1</span> selected
+            ${this.selectionStatus.selected(1)}
           </div>
         </div>
       </div>
diff --git a/app/templates/views/templates/_move_to.html b/app/templates/views/templates/_move_to.html
index 0b28555f5..05334cec0 100644
--- a/app/templates/views/templates/_move_to.html
+++ b/app/templates/views/templates/_move_to.html
@@ -36,4 +36,7 @@
     {{ page_footer('Continue', button_name='operation', button_value='add-new-template') }}
     </div>
   </div>
+  <div class="selection-counter visuallyhidden" role="status" aria-live="polite">
+    Nothing selected
+  </div>
 </div>