Tab Order Color

Was the tab order highlight box "color" ever addressed or put in as feature request?

The current "Yellow" color does not meet Section 508 if the slide background color is similar or white. It doesn't meet the contrast ratio requirements.

Feature request would be to allow that color to be editable within the player options.

And just for fun, why is it RED in the tab order preview but YELLOW when published?

27 Replies
Matthew Bibby

That would be a good feature. 

The difference between outline colours may be due to differences between the browser used to preview and the browser that you are using to view the published course. 

If there is one colour that would work for all of your screens, then you could change the outline colour by editing the .css files in the published output. This method isn't supported by Articulate and will only change things in the HTML5 output, but it might be an option worth exploring.

Bob O'Donnell

I think Articulate needs to include it.

That "Red" tabbing color is built inside storyline. Its the tabbing order pre-check before publishing or "previewing". Sorry, should have chose my wording better. It has nothing to do with your browser settings at all since you're working inside the Storyline program and not inside a browser window.

Changing the tab color after the file is published is not a great option. Especially considering we need to turn our master file over to the client. Asking them to take extra steps outside of the program if they make a change is not a great solution. Option yes, solution no.

I'll submit a request.

Matthew Bibby

I wish I could Rachel. I may have misspoke about this being possible.

I remember trying this a few months ago and being able to change it, but when I went back and tried to do it again I wasn't able to. I don't know if something has changed behind the scenes or if I just haven't had enough coffee yet...

I'll keep looking into it when I have more time and will report back here if I can figure it out.

 

Matthew Bibby

For those who are playing along at home, it looks like SL is somehow overriding the outline style.

This CSS should completely remove the yellow outline:

*:focus {
  outline: 0 !important;
}

However, it doesn't work. I suspect this is due to some React dark magic that I don't understand. 

If you use the below CSS, you'll see that the right thing is being targeted:

*:focus {
  border: 5px red solid;
}

(Demo here)

But no idea why I can't mess with the outline.

Anyway, hopefully, someone else can figure this one out. 

Matthew Bibby

C'mon Wendy. Surely you've got this one? ;P

I've reached out to Zsolt, I reckon he might be able to figure it out. 

The frustrating thing is I made this change a few months ago when messing around with things, but I didn't write down what I had done or keep the modified output around.

Or maybe it was all a dream?

Anyway...

Zsolt Olah

Try this: in the /html5/lib/scripts/app.min.js

find:

i.setStyles(this.borderEl,{position:"absolute",left:0,top:0,border:"3px solid yellow","pointer-events":"none","z-index":99999})

Change the "yellow" to whatever you want. for example red: 

i.setStyles(this.borderEl,{position:"absolute",left:0,top:0,border:"3px solid red","pointer-events":"none","z-index":99999})

Let me know if this helps!

Zsolt Olah

Sure! I always wanted to be a legend! By the way, if anyone is trying to crack down something like that:

1. I use ColorZilla to identify colors on the screen.

2. Then search for all files (and within files) for the rgb or hexa code.

3. This one is a two step process because I found the definition of "yellow" in one file first. Then I reran the search for yellow instead of the hexa color code. Found three instances.

4. Changed them one by one and see which one makes a difference.

I'm not sure if this also works on the non-html5 version.

Matthew Bibby

For anyone who wants to change the focus colour in the HTML5 output without having to alter the app.min.js file each time you publish, drop this code into an Execute JavaScript trigger that runs on the slide master when the timeline starts:

if (/_html5.html/.test(window.location.href)) {
if (!window.changeFocusColor){
var sheet = document.createElement('style');
sheet.innerHTML = ".tab-focus-box{border: 3px solid red !important;}";
document.body.appendChild(sheet);
window.changeFocusColor = true;
}
}

You can change red to any colour you want, for example:

if (/_html5.html/.test(window.location.href)) {
if (!window.changeFocusColor){
var sheet = document.createElement('style');
sheet.innerHTML = ".tab-focus-box{border: 3px solid #000000 !important;}";
document.body.appendChild(sheet);
window.changeFocusColor = true;
}
}

And everyone who appreciates this tip should buy Zsolt's book!