Commit d728a2d5 authored by Jono Mingard's avatar Jono Mingard
Browse files

Use focus management in form help links (Bug #1259394)



When building the contextual help box, focus is set to the close button
(which now has descriptive alt text)
The help box is now inserted into the HTML immediately after the help
icon that was clicked (or after its parent if the parent is a heading)
so that the document still appears in a logical order to screen readers.

Change-Id: Ib8a10e2766038cfd32b1c6c76883f9642255639b
Signed-off-by: default avatarJono Mingard <jonom@catalyst.net.nz>
parent 138dd7d5
......@@ -324,19 +324,20 @@ contextualHelpSelected = null;
contextualHelpContainer = null;
contextualHelpDeferrable = null;
contextualHelpOpened = false;
contextualHelpLink = null;
badIE = false;
function contextualHelpIcon(formName, helpName, pluginType, pluginName, page, section) {
var link = A(
{'href': null},
IMG({'alt': '?', 'src': get_themeurl('images/help.png')})
IMG({'alt': get_string('Help'), 'src': get_themeurl('images/help.png')})
);
connect(link, 'onclick', function (e) {
e.stop();
contextualHelp(formName, helpName, pluginType, pluginName, page, section, link);
});
return link;
return SPAN({'class':'help'}, link);
}
function contextualHelp(formName, helpName, pluginType, pluginName, page, section, ref) {
......@@ -348,7 +349,7 @@ function contextualHelp(formName, helpName, pluginType, pluginName, page, sectio
'pluginname': pluginName
};
var parentElement = 'messages';
contextualHelpLink = ref;
// deduce the key
if (page) {
......@@ -386,11 +387,25 @@ function contextualHelp(formName, helpName, pluginType, pluginName, page, sectio
// create and display the container
contextualHelpContainer = DIV({
'style': 'position: absolute;',
'class': 'contextualHelp hidden'
'class': 'contextualHelp hidden',
'role' : 'dialog'
},
IMG({'src': config.theme['images/loading.gif']})
);
appendChildNodes($(parentElement), contextualHelpContainer);
var parent = ref.parentNode;
var inserted = false;
var illegalParents = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend'];
while (parent != null) {
if (illegalParents.indexOf(parent.nodeName.toLowerCase()) >= 0) {
insertSiblingNodesAfter(parent, contextualHelpContainer);
inserted = true;
break;
}
parent = parent.parentNode;
}
if (!inserted) {
insertSiblingNodesAfter(ref.parentNode, contextualHelpContainer);
}
var position = getElementPosition(ref);
var dimensions = getElementDimensions(contextualHelpContainer);
......@@ -449,13 +464,12 @@ function contextualHelp(formName, helpName, pluginType, pluginName, page, sectio
},
function (error) {
contextualHelpCache[key] = get_string('couldnotgethelp');
contextualHelpContainer.innerHTML = contextualHelpCache[key];
buildContextualHelpBox(contextualHelpCache[key]);
processingStop();
contextualHelpOpened = true;
},
true, true);
}
contextualHelpContainer.focus();
}
/*
......@@ -464,12 +478,16 @@ function contextualHelp(formName, helpName, pluginType, pluginName, page, sectio
* help closing the box
*/
function buildContextualHelpBox(content) {
var result = '<div class="fr"><a href="" onclick="return false;"><img src="' + config.theme['images/btn_close.png'] + '" alt="X"></a></div>';
var result = '<div class="fr">';
result += '<a href="" class="help-dismiss" onclick="return false;"><img src="' + config.theme['images/btn_close.png'] + '" alt="' + get_string('closehelp') + '"></a>';
result += '</div>';
result += '<div id="helpstop">';
result += content;
result += '</div>';
contextualHelpContainer.innerHTML = result;
connect('helpstop', 'onclick', function(e) { if (e.target().nodeName != "A") { e.stop(); } });
getFirstElementByTagAndClassName(null, 'help-dismiss', contextualHelpContainer).focus();
}
/*
......@@ -494,6 +512,10 @@ connect(document, 'onclick', function(e) {
contextualHelpContainer = null;
contextualHelpSelected = null;
contextualHelpOpened = false;
if (contextualHelpLink) {
contextualHelpLink.focus();
contextualHelpLink = null;
}
}
badIE = false;
});
......
......@@ -35,6 +35,7 @@ $string['description'] = 'Description';
$string['remove'] = 'Remove';
$string['Close'] = 'Close';
$string['Help'] = 'Help';
$string['closehelp'] = 'Close help';
$string['applychanges'] = 'Apply changes';
$string['general'] = 'General';
$string['tabs'] = 'TABS';
......
......@@ -950,6 +950,8 @@ function jsstrings() {
'home',
'youhavenottaggedanythingyet',
'wanttoleavewithoutsaving?',
'Help',
'closehelp'
),
),
'tablerenderer' => array(
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment