Commit 28aa4b53 authored by Jono Mingard's avatar Jono Mingard
Browse files

Made skin metadata lightbox keyboard-accessible (Bug #1259689)



Focus now goes to the lightbox close button when it is opened and back
to the "view information" button when it is closed. The lightbox is
now inserted immediately after the button which activates it to improve
the document flow for screen reader users.

Change-Id: Ia1ad1454adcb063005c01e31d8fa62bca457104d
Signed-off-by: default avatarJono Mingard <jonom@catalyst.net.nz>
parent 32edab99
......@@ -41,6 +41,7 @@ $string['skinaddedtofavorites'] = 'Skin added to favourites';
$string['skinremovedfromfavorites'] = 'Skin removed from favourites';
$string['cantremoveskinfromfavorites'] = 'Can\'t remove skin from favourites';
$string['viewmetadata'] = 'View skin information';
$string['closemetadata'] = 'Close skin information';
$string['metatitle'] = 'Skin information';
$string['title'] = 'Title';
$string['displayname'] = 'Owner';
......
......@@ -72,13 +72,11 @@ $css = array(
$inlinejs = <<<EOF
function toggle_metadata(el) {
var meta = el.closest('.skinthumb').find('.skin-metadata');
if (meta.is(':visible')) {
// need to hide 'popup' box
jQuery('#overlay').remove();
}
else {
jQuery('#overlay').remove();
var meta = el.closest('.skin-controls').find('.skin-metadata');
if (meta.hasClass('hidden')) {
// need to display 'popup' box
meta.removeClass('hidden');
meta.addClass('skin_metadata_overlay');
meta.addClass('metadata_block');
getViewport = function() {
......@@ -94,9 +92,13 @@ $inlinejs = <<<EOF
meta.css('left', (((getViewport().w / 2) - 200) > 0) ? (getViewport().w / 2) - 200 : 0);
meta.css('top', (getViewport().t + scrolltop));
jQuery(document.body).append('<div id="overlay"></div>');
meta.find('.metadataclose').focus();
}
else {
// need to hide 'popup' box
meta.addClass('hidden');
el.focus();
}
meta.find('.metadataclose').toggleClass('hidden');
meta.toggleClass('hidden');
}
jQuery(function() {
......@@ -107,11 +109,9 @@ $inlinejs = <<<EOF
return false;
});
});
jQuery('div.metadataclose').each(function() {
jQuery(this).click(function(i) {
toggle_metadata(jQuery(this));
return false;
});
jQuery('.metadataclose').click(function(e) {
toggle_metadata(jQuery(this).closest('.skin-controls').find('.btn-big-info'));
return false;
});
});
EOF;
......
......@@ -8,7 +8,7 @@
float: right;
margin-left: 10px;
}
.skinthumb .skin-controls a {
.skinthumb .skin-controls > a {
cursor: pointer;
height: 24px;
margin: 0 0 0 5px;
......
......@@ -24,6 +24,15 @@
{/if}
{if $skin.metadata && $skin.editable}
<a href="{$WWWROOT}skin/index.php?id={$skin.id}&metadata=1" class="btn-big-info" title="{str tag='viewmetadata' section='skin'}">{str tag="viewmetadata" section="skin"}</a>
<div class="skin-metadata {if $id eq $skin.id && $metadata}show{else}hidden{/if}">
<input type="image" class="metadataclose" src="{theme_url images/btn_close.png}" alt="{str tag=closemetadata section=skin}" title="{str tag=closemetadata section=skin}" />
<div class="metadatatitle"><h2 class="title">{str tag=metatitle section=skin}</h2></div>
<div class="metatitle"><span>{str tag=title section=skin}:</span> {$skin.title|escape}</div>
<div class="metadisplayname"><span>{str tag=displayname section=skin}:</span> {$skin.metadata.displayname}</div>
<div class="metadescription"><span>{str tag=description section=skin}:</span><br>{$skin.metadata.description|clean_html|safe}</div>
<div class="metacreationdate"><span>{str tag=creationdate section=skin}:</span> {$skin.metadata.ctime}</div>
<div class="metamodifieddate"><span>{str tag=modifieddate section=skin}:</span> {$skin.metadata.mtime}</div>
</div>
{/if}
{if $skin.removable}
<a href="{$WWWROOT}skin/export.php?id={$skin.id}" class="btn-big-export" title="{str tag='exportthisskin' section='skin'}">{str tag="exportthisskin" section="skin"}</a>
......@@ -54,15 +63,6 @@
<img src="{$WWWROOT}skin/thumb.php?id={$skin.id}" width="240" height="135">
{/if}
</div>
<div class="skin-metadata {if $id eq $skin.id && $metadata}show{else}hidden{/if}">
<div class="metadataclose btn-big-close hidden"></div>
<div class="metadatatitle"><h2 class="title">{str tag=metatitle section=skin}</h2></div>
<div class="metatitle"><span>{str tag=title section=skin}:</span> {$skin.title|escape}</div>
<div class="metadisplayname"><span>{str tag=displayname section=skin}:</span> {$skin.metadata.displayname}</div>
<div class="metadescription"><span>{str tag=description section=skin}:</span><br>{$skin.metadata.description|clean_html|safe}</div>
<div class="metacreationdate"><span>{str tag=creationdate section=skin}:</span> {$skin.metadata.ctime}</div>
<div class="metamodifieddate"><span>{str tag=modifieddate section=skin}:</span> {$skin.metadata.mtime}</div>
</div>
</div>
{/foreach}
<div class="cb">{$pagination}</div>
......
Supports Markdown
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