From 15104e9d25bc7c721f8b4b36cb6bbbe53b6fb9dd Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Fri, 15 Feb 2019 11:03:22 +0000
Subject: [PATCH] Re-position live-region to remove duplication

Adding a visually hidden live-region creates
duplication in the HTML. End result for users of
screen readers are that you get the same text read
out twice.

This adds `aria-hidden` to hide the visible
version and re-positions the live-region one next
to it. That means the live-region text appears in
the same place in the document order as the
visible one so things are announced as expected.
---
 app/assets/javascripts/templateFolderForm.js | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index 79db7019e..7fcb4ce6c 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -10,11 +10,10 @@
       // which field is visible.
       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);
+      this.$liveRegionCounter.before(this.nothingSelectedButtons);
+      this.$liveRegionCounter.before(this.itemsSelectedButtons);
 
       // all the diff states that we want to show or hide
       this.states = [
@@ -180,7 +179,7 @@
 
       // detach everything, unless they are the currentState
       this.states.forEach(
-        state => (state.key === this.currentState ? this.$stickyBottom.append(state.$el) : state.$el.detach())
+        state => (state.key === this.currentState ? this.$liveRegionCounter.before(state.$el) : state.$el.detach())
       );
 
       // use dialog mode for states which contain more than one form control
@@ -199,7 +198,7 @@
         <div class="js-stick-at-bottom-when-scrolling">
           <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">
+          <div class="template-list-selected-counter" aria-hidden="true">
             ${this.selectionStatus.default}
           </div>
         </div>
@@ -211,7 +210,7 @@
         <div class="js-stick-at-bottom-when-scrolling">
           <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">
+          <div class="template-list-selected-counter" aria-hidden="true">
             ${this.selectionStatus.selected(1)}
           </div>
         </div>