Forum Discussion

IanMarkiewicz's avatar
IanMarkiewicz
Community Member
7 hours ago

Storyline: Using TAB to trigger Field input

I'm building a system simulation that requires the learner to fill an input field then press TAB. The input is evaluated and if it's correct the learner is taken to the next slide, where the simulati...
storyline 360
Nedim's avatar
Nedim
Community Member
6 hours ago

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