From 42a9a0cf23330ad4f4bfd3ac3cb787a8ad4ba57b Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 7 May 2019 11:44:12 +0100
Subject: [PATCH] Make selection summary a live region

Live regions need to be in the original HTML of
the page to work. We were generating the summary
in JS.

This changes the JS to only generate the contents
of the summary so changes to its contents are
announces by the existing live-region.
---
 app/assets/javascripts/collapsibleCheckboxes.js | 16 ++++++++--------
 app/templates/components/select-input.html      |  3 +++
 tests/javascripts/collapsibleCheckboxes.test.js | 10 +++++-----
 3 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/collapsibleCheckboxes.js b/app/assets/javascripts/collapsibleCheckboxes.js
index 97957b3d1..7c8b5bae0 100644
--- a/app/assets/javascripts/collapsibleCheckboxes.js
+++ b/app/assets/javascripts/collapsibleCheckboxes.js
@@ -20,7 +20,7 @@
       this.addFooterAndDoneButton();
 
       // create summary from component pieces and match text to current selection
-      this.summary.$el = this.summary.create(this.getSelection(), this.total);
+      this.summary.addContent();
       this.summary.update(this.getSelection(), this.total, this.fieldLabel);
       this.$fieldset.before(this.summary.$el);
 
@@ -55,15 +55,15 @@
           }
         }
       },
-      create: function() {
-        const $el = $(`<p class="selection-summary folder-selection">
-                        <span class="selection-summary__text"></span> <button class="button button-secondary">Change</button>
-                      </p>`);
+      addContent: function() {
+        const $content = $(`<p>
+                             <span class="selection-summary__text"></span> <button class="button button-secondary">Change</button>
+                            </p>`);
 
-        this.$text = $el.find('span');
-        this.$changeButton = $el.find('button');
+        this.$text = $content.find('span');
+        this.$changeButton = $content.find('button');
 
-        return $el;
+        this.$el.append($content);
       },
       update: function(selection, total, field) {
         let template;
diff --git a/app/templates/components/select-input.html b/app/templates/components/select-input.html
index a42f00a9f..f65647647 100644
--- a/app/templates/components/select-input.html
+++ b/app/templates/components/select-input.html
@@ -38,6 +38,9 @@
 {% macro select_wrapper(field, hint=None, disable=[], option_hints={}, hide_legend=False, collapsible_opts={}, legend_style="text") %}
   {% set is_collapsible = collapsible_opts|length %}
   <div class="form-group {% if field.errors %} form-group-error{% endif %}"{% if is_collapsible %} data-module="collapsible-checkboxes"{% if collapsible_opts.field %} data-field-label="{{ collapsible_opts.field }}"{% endif %}{% endif %}>
+    {% if is_collapsible %}
+    <div class="selection-summary" role="region" aria-live="polite"></div>
+    {% endif %}
     <fieldset id="{{ field.id }}">
       <legend class="{{ 'form-label' if not hide_legend else '' }}{% if legend_style != 'text' %} {{ legend_style }}{% endif %}">
         {% if hide_legend %}<span class="visually-hidden">{% endif %}
diff --git a/tests/javascripts/collapsibleCheckboxes.test.js b/tests/javascripts/collapsibleCheckboxes.test.js
index 6a8e266fe..f56917ffa 100644
--- a/tests/javascripts/collapsibleCheckboxes.test.js
+++ b/tests/javascripts/collapsibleCheckboxes.test.js
@@ -47,6 +47,7 @@ describe('Collapsible fieldset', () => {
     // set up DOM
     document.body.innerHTML =
       `<div class="form-group" data-module="collapsible-checkboxes" data-field-label="folder">
+        <div class="selection-summary"></div>
         <fieldset id="folder_permissions">
           <legend class="form-label heading-small">
             Folders this team member can see
@@ -98,13 +99,12 @@ describe('Collapsible fieldset', () => {
 
     });
 
-    test("has a summary added before the selected fieldset", () => {
+    test("adds the right content to the summary", () => {
 
-      const summary = helpers.element(fieldset).getPreviousSibling(
-        el => (el.nodeName === 'p') && (el.hasClass('selection-summary'))
-      );
+      const summary = formGroup.querySelector('.selection-summary');
 
-      expect(summary).not.toBeNull();
+      expect(summary.querySelector('p')).not.toBeNull();
+      expect(summary.querySelector('p .selection-summary__text')).not.toBeNull();
 
     });