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