Storyline: Using TAB to trigger Field input

I'd be interested to see a way to disable the accessibility highlight as well. I've worked before on simulations of mainframes and databases that rely heavily on the Tab key to move throughout the console.

The Tab key doesn't seem an option in the Trigger Wizard when trying to set the When to User Presses a Key, probably for that accessibility reason, but it can be kind of over-ridden with some JavaScript. If you make a boolean variable called something like nextSlide, it can be toggled with the Tab key using 

keydown(event => {
  if (event.key == 'Tab') {
  	setVar('nextSlide', true);
    setVar('nextSlide', false);
  }
});

Naturally one can check any other conditions as well (such as the value of the textbox variable) and other actions can be added next to the setVar(), but this general code can activate a trigger like

The code setting the variable to true and then back to false would allow the functionality to be easily reused on other slides as well.

The only hangup is that the subsequent slide will have the yellow highlight on since the overall course has still be told the learner is interested in accessibility mode. If the above works for you well enough, that highlight could be ameliorated with a trigger that just sets the focus to whatever the learner has to interact with next. Not entirely ideal, but at least the Tab would work.

If you go to Player Properties > Colors & Effects, you can adjust the accessibility focus colors to make them more subtle. 

 

I just experimented with desktop.min.css and identified several selectors responsible for Storyline’s keyboard focus indicators, including body.show-focus .tab-focus-box,  and rect.focused, along with the browser’s native *:focus styling.

The JavaScript below shoulld override these selectors and removes both Storyline generated and browser-native focus highlights entirely.

const style = document.createElement('style');
style.type = 'text/css';

const css = `
    /* Hide Storyline's accessibility yellow focus highlight box */
    body.show-focus .tab-focus-box {
        display: none !important;
        visibility: hidden !important;
    }

    /* Hide SVG focus borders around objects */
    rect.focused {
        stroke: none !important;
        outline: none !important;
    }

    /* Remove browser blue/yellow outline without hiding the actual focused element */
    *:focus {
        outline: none !important;
        box-shadow: none !important;
    }
`;

if (style.styleSheet) {
    style.styleSheet.cssText = css;
} else {
    style.appendChild(document.createTextNode(css));
}

document.getElementsByTagName('head')[0].appendChild(style);