First focus not highlighting
August 10, 2020 12:00 AM
I just updated to Lectora 19.0.3 from 18.2.3. I have a Skip to Content transparent button as my first object in the title explorer (after two actions).
In 18.2.3, when I hit Tab, the Skip to Content transparent button would highlight. In 19.0.3, when I hit tab, it does not highlight but will work.
I turned on NVDA to make sure it is the first object found and it is. It is read like it is supposed to.
The only thing I changed was to set it Always on Top because a breadcrumb box does overlay the Skip to Content transparent button. That had no effect. I tried shortening the breadcrumb box, and that did not make a difference.
Thoughts?
Thanks!
Vicki
Discussion (5)
Sorry Vicki, this was a bug introduced in v19. As a work-around until we get it fixed you can add an action to the transparent button with a trigger of Show and an action of Run JavaScript. Set the JavaScript to the following:
%HTMLNAME%.setStateOpacity({"disabledState":1,"downState":1,"normalState":1,"overState":1});
%HTMLNAME%.rebuildDefs();
%HTMLNAME%.setDisabled(false);
Hi Eric,
Thank you for your solution. However, it didn't work. I added the action and javascript to the transparent button but when I publish to ReviewLink, I just get a blank screen.
I then replaced %HTMLNAME% with the buttons HTML name, and that didn't work. Still a blank screen.
Next, I replaced your script with a script we had previously used to show the focus on page show, but yet, again, blank page on ReviewLink.
I removed that action altogether, and I finally got the content.
I am either doing something wrong or Trivantis/eLearning Brothers messed something up bad.
Thank you again, Eric for your input.
I'm sorry to hear the fix did not work for you. If you care to share your title, I can post a link for upload and take a look. The fix for this problem should be in v19.1 which is due out in September.
@ethomas5519 and @vicki
I JUST came across this while doing some of my own work and discovered the cause and a different workaround than using JavaScript.
With the transparent buttons, the states fail if Use Web Accessibility Settings is turned on in the Title Options. Turn those settings off and transparent buttons work as expected, but the focus options can't be changed. This would not be an acceptable workaround.
However - text buttons set to use Transparent as the fill and opacity to 0 DO work, and you don't even have to have text on the button itself for them to be read correctly by a screen reader. I've attached a sample with the testing methods I used.
Vicki - I'm interested in what you did to get the button state to change on focus. Is it something built in that I'm missing
@jasonadal What we have done for years is add a couple actions to the button:
On page show, run javascript:
let stateCheck = setInterval(function() {
if (document.readyState === 'complete')
{
clearInterval(stateCheck);
document.getElementById("%HTMLNAME%btn").focus();
document.getElementById("%HTMLNAME%btn").tabIndex = 1;
}
}, 100);
On mouse click, go to, target: current page, scroll to: skipnavto, open in: existing window.
I did just recently update to 19.0.4 and they seem to have fixed the issue. On preview, my skipnavto button is highlighted.