Return focus to hyper link from layer

This might be a bit of a niche requirement, but it came up a few weeks ago when testing content for a client.

If you use a hyperlink (text with a link on it) to show a layer in Storyline, you cannot return the focus to the hyperlink that showed the layer, when closing the layer.

Storyline does not return the the focus automatically like it does with other elements such as buttons, nor is it possible to return the focus to a hyperlink using triggers, as the hyperlink is not exposed as an object that you can send focus to.

The result is that the focus is returned to the top of the current slide when closing a layer that has been shown using a hyperlink. Maybe the Storyline engineers can fix this up?

The solution is a bit of JavaScript.

Firstly, we need to add some JavaScript to the Storyline project, to make a function available throughout the project. The best way to do this is to add the following JavaScript to the "When timeline starts on this slide - Execute JavaScript" to the Slide Master.

window.RM_focusToLink = function(index)
{
	const arrindex = Number(index) - 1;
	setTimeout(function(){
		var link = document.querySelectorAll('#slide a')[arrindex];
		link.focus();
	},100);
}

Then, within the layer, you need to add the following JavaScript to the button (or any other trigger) that is closing the layer:

window.RM_focusToLink(1);

The number 1 that is placed within the brackets is the argument that needs to be passed to target a specific link on the slide. In this case, it is link number 1 which just means it's the first link on the slide (with regards to the order it appears in the Document Object Model). I did consider targeting the link using the text within the link, but then considered that could be duplicate links with the same name, and so using the index is the safest.

For any programmers out there, I'm starting the index at 1 rather than 0 (zero) to make it more user friendly.

I have attached a demo file.