Storyline 360: Yellow border inconsistent when elements in the tab index receive focus
Aug 29, 2019
I have seen this issue in a few modules developed in Storyline 360 and it appears to be a bug.
I have 3 elements on the screen, Heading, Body text and a Start button.
These elements have a Fade In animation of 0.75 seconds, and are spaced out 1 second apart on the timline.
When I preview the slide, the Start button does not get the focus yellow border around the element and so it is not clear that the button has focus. If I continue tabbing, the slide appears to do a seconds loop around, tabbing to the heading, body text and this time the button gets the yellow border.
As an experiment, I removed the animation from the button, and it received the yellow focus when tabbing to it (I did not have to do a full loop around to hit the button).
Other issues I have seen with the "focus" is that buttons seem to behave inconsitently. For example, I enter a page and have a button on it's "Disabled" state. At this stage the button can be tabbed to and has a yellow border to indicate the focus. I then perform some actions to trigger the button into a "Normal" state. When I tab to the button now (after it has changed from Disabled to Normal), the button will no longer show the yellow border to indicate focus.
This is the same behaviour with and without a screen reader.
Why am I seeing these incosisten results? I'm finding working with elements that trigger something don't seem to receive the yellow border to indicate focus consistently. Changing state and animations also seems to have an impact, but sometimes, they just don't get the yellow border for now reason, unless you continue to keep tabbing.
8 Replies
So sorry you've come across those inconsistencies, Sam. I'd love to help investigate!
I'm having trouble recreating both oddities in a test Storyline 360, Update 31, file. Here's a short Peek 360 of my testing.
To help us carefully examine both behaviors and explore our next steps:
Hi Katie, I always make sure I'm on the latest SL update.
Please find attached a file that demonstrates the issue with the button that is animated in. Maybe you are using a native button element, and not a shape, which I think this is using. That is probably the only difference I can think of?
Hi Katie, not sure if I replied correctly, but I've attached a file in my second update,
Thanks for sharing a demo, Sam. Super helpful example!
I also see some odd behavior when tabbing through the slide during Preview. Here's a new recording of my second test.
I'd like to get a second opinion from our Support team to see if I can gain further insight into why this is happening. Look out for an email shortly, and I'll follow along to share any relevant updates here. Appreciate you bringing this to our review, and I'm sorry for the trouble!
Any new info on this?
new info would be great.. I need to remove these yellow boxes but nothing seems to work. Checking all threads!
Hi Tracy, I don't think you can remove the yellow boxes. They are there by design and required for keyboard accessibility so the user knows which button has the current tab focus (sorry if I'm explaining something you already know re: the purpose).
Hi guys,
I found a work around for this. I had the same issue on using the keyboard to hit a submit button. I just added an extra trigger to change state of button to hidden when clicked... then normal when start screen :)
Rick Angelone