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();
 
     });