Unexpected tabbing behavior

[bcgrossm]

As our current documentation has some larger pages with sections, I tried to implement links to the sections - by hand, as there are many anchors on the page and only certain ones should be targets.

On the output page.html, this leads to:

---
Links to sections:
page.html#anchor1
page.html#anchor2
page.html#anchor3


#anchor 1
<content>

#anchor2
<content>

#anchor3
<content>

---

When I test the tabbing, the behavior is unexpected - the flow is:
TAB to link page.html#anchor2
ENTER -> Jump to #anchor2
TAB or arrow down -> Jump back to the linklist on top of the page

This means one can jump, but cannot scroll from that point to the content below.

I tested this also on the pages of another user here in the forum who also used V5 Coolmax, and their behavior is identical.

Is there any solution to this? My expectation would be that after the jump, the reading process can continue at that anchor.

Thanks, Birgit

[Tim Green]

Is there any solution to this? My expectation would be that after the jump, the reading process can continue at that anchor.

Currently the page scrolls to the anchor, but it is not highlighted because anchors are invisible objects. It would be necessary to highlight the next paragraph after the anchor, if the anchor is in an empty paragraph, or the paragraph containing the anchor, if it contains text or other content. I'm putting this on the list for possible inclusion in the next update.

[bcgrossm]

The line is actually highlighted / blinks, but then I cannot scroll further.

Is there any workaround I can implement? I doubt this behavior would pass any certification attempts in an accessibility check - which is our final goal.

[Tim Green]

The line is actually highlighted / blinks, but then I cannot scroll further.
Is there any workaround I can implement? I doubt this behavior would pass any certification attempts in an accessibility check - which is our final goal.

Please try this: Edit the hm_webhelp.js file in the baggage and locate this function at around line 2036:

Code: Select all

// Flash paragraph of target anchor on arrival
hmWebHelp.flashTarget = function(obj,repeat,delay) {
...
	

Between the lines

Code: Select all

if (repeat > 0) doFlash();
	},delay);

insert:

Code: Select all

else {$(obj).attr("tabindex", "0").focus().click();

So that the result is;

Code: Select all

if (repeat > 0) doFlash();
else {$(obj).attr("tabindex", "0").focus().click();
	},delay);

This will select the flashed paragraph and set the highlight on it. You should then be able to scroll with the up and down arrow keys or jump to the next target item with tab.

[bcgrossm]

I tried to integrate it - the first line is at 1984 in my file.
The code is now:

// Flash paragraph of target anchor on arrival
hmWebHelp.flashTarget = function(obj,repeat,delay) {
if (!<%OPT_BLINK_ANCHOR_TARGET%>) return;
repeat--;
doFlash();
function doFlash() {
setTimeout(function() {
$(obj).each(function() {
$(obj).css("visibility","hidden");
setTimeout(function() {
repeat--;
$(obj).css("visibility","visible");
if (repeat > 0) doFlash();
else {$(obj).attr("tabindex", "0").focus().click();
},delay);
});
},delay);
} // doFlash;
}; // flashTarget

However, when I generate the project, the HTML files don't display at all. The code is there, but the browser shows just a white page.

[Tim Green]

Sorry, there was an additional character that shouldn't be there in this version. Remove the curly brace after "else". It should be:

Code: Select all

else $(obj).attr("tabindex", "0").focus().click();

[bcgrossm]

Thank you, this fixed the issue!

All the best, Birgit