Fix: Fix setFocus() when using _isMobileTextBelowImage (fixes #271)

[swashbuck]

Fixes #271

Fix

• Fix the animatedElement target in setFocus() when using _isMobileTextBelowImage. The element .narrative__strapline-header-inner doesn't exist when using _isMobileTextBelowImage: true which is why it was breaking

Testing

1. Enable _isMobileTextBelowImage in a Narrative component
2. Test on mobile

[cahirodoherty-learningpool]

👀

[kirsty-hames]

Thanks @swashbuck. Testing this, focusOnNarrativeElement needs updating too. Replacing lines 58 - 60 with the following resolves the issue for me. Testing on Mac Safari running VoiceOver, Chrome and iPhone.

    const $elementToFocus = this.isLargeMode() ||
    this.model.get('_isMobileTextBelowImage')
      ? this.$(`.narrative__content-item${dataIndexAttr}`)
      : this.$(`.narrative__strapline-btn${dataIndexAttr}`);

The focus and VoiceOver reading is consistent with the _isTextBelowImage experience.

[swashbuck]

Testing this, focusOnNarrativeElement needs updating too.

@kirsty-hames Nice catch. This has been updated.

[github-actions]

🎉 This PR is included in version 7.4.10 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀