From 949ee687f89e7be4830ae28536af5c9e698f3206 Mon Sep 17 00:00:00 2001
From: Oliver Foster <oliver.foster@kineo.com>
Date: Fri, 26 May 2023 10:23:04 +0100
Subject: [PATCH] Fix: Delay button update until after focus (fixes #261)
 (#266)

---
 js/NarrativeView.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/js/NarrativeView.js b/js/NarrativeView.js
index 23c5a3c..c51fe85 100644
--- a/js/NarrativeView.js
+++ b/js/NarrativeView.js
@@ -47,7 +47,10 @@ class NarrativeView extends ComponentView {
       $animatedElement.one('transitionend', () => this.focusOnNarrativeElement(itemIndex));
       return;
     }
-    this.focusOnNarrativeElement(itemIndex);
+    // Allow dom to settle before moving focus
+    requestAnimationFrame(() => {
+      this.focusOnNarrativeElement(itemIndex);
+    });
   }
 
   focusOnNarrativeElement(itemIndex) {
@@ -56,6 +59,9 @@ class NarrativeView extends ComponentView {
       this.$(`.narrative__content-item${dataIndexAttr}`) :
       this.$(`.narrative__strapline-btn${dataIndexAttr}`);
     a11y.focusFirst($elementToFocus);
+    // Set button labels after focus to stop the change reading on a focused button
+    this.setupBackNextLabels();
+    this.manageBackNextStates();
   }
 
   onItemsActiveChange(item, _isActive) {
@@ -68,10 +74,13 @@ class NarrativeView extends ComponentView {
     const index = item.get('_index');
     this.model.set('_activeItemIndex', index);
 
-    this.manageBackNextStates(index);
     this.setStage(item);
 
-    if (this.model.get('_isInitial')) return;
+    if (this.model.get('_isInitial')) {
+      this.setupBackNextLabels();
+      this.manageBackNextStates();
+      return;
+    }
     this.setFocus(index);
   }
 
@@ -219,7 +228,6 @@ class NarrativeView extends ComponentView {
       item.toggleVisited(true);
     }
 
-    this.setupBackNextLabels();
     this.evaluateCompletion();
     this.shouldShowInstructionError();
     this.moveSliderToIndex(index);