Focus is pulled from narrative/hotgraphic when the course is viewed on mobile device

Subject of the issue/enhancement/features

When viewing a page on mobile that contains a narrative or a hot graphic (rendered as a narrative) then the focus is pulled to the component bypassing any other components on the page.

Issue also present when using Vanilla theme.

Steps to reproduce:

Create a course
Add a page with a few blank components at the top
Add a narrative at the bottom
Add another page with blank components at the top
Add a hot graphic to the bottom
Save and preview
Open dev tools
Change the view to a device view so it looks like a mobile
Enter either the narrative or hot graphic page

Expected behaviour

The page loads at the top of the page with the blank components

Actual behaviour

User is taken down the page to the narrative or narrative view of hot graphic missing any content before this

Additional Information:

This only occurs on the initial load of the page, returning to menu and back into the page behaves as normal.

If the hot graphics are set to not show as narrative on mobile then the issue does not occur.

adaptlearning / adapt-contrib-narrative