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

Made responsive menu and tabs keyboard-accessible (Bug #1278672)



Changed the HTML to use an <a> inside the <h3> for the tab title so that
it's keyboard focusable, and use focus management when the tabs are
opened

Change-Id: Ie1297cdf787a5a8859867abbd9cb748b8289f56a
Signed-off-by: default avatarJono Mingard <jonom@catalyst.net.nz>
parent cebec827
......@@ -53,13 +53,14 @@ addLoadEvent(function() {
});
var tabUL = UL({'class': 'in-page-tabs'}, tabs);
var tabTitleSpan = SPAN({'class': 'rd-tab'});
var tabTitle = H3({'class': 'rd-tab-title'}, get_string('tabs'), tabTitleSpan);
tabDIV = DIV({'id': 'profiletabswrap', 'class': 'tabswrap'}, tabTitle, tabUL);
var tabTitleLink = A({'href': '#'}, get_string('tabs'), tabTitleSpan);
tabDIV = DIV({'id': 'profiletabswrap', 'class': 'tabswrap'}, H3({'class': 'rd-tab-title'}, tabTitleLink), tabUL);
var isOpen = 0;
connect(tabDIV, 'onclick', function(e) {
connect(tabTitleLink, 'onclick', function(e) {
e.stop();
if (isOpen == 0) {
addElementClass(tabDIV, 'expand');
getFirstElementByTagAndClassName('a', null, tabUL).focus();
}
else {
removeElementClass(tabDIV, 'expand');
......
......@@ -36,18 +36,23 @@ $j(document).ready(function(){
navClass($j('#category-list li'), $j('#top-pane'));
navClass($j('#main-nav-footer > ul > li'), $j('#footer'));
// adds expand when click on menu title in responsive menu
$j(".rd-nav-title").click(function(event) {
$j(".rd-nav-title a").click(function(event) {
  $j(".main-nav").toggleClass("nav-expand");
if ($j('.main-nav').hasClass('nav-expand')) {
$j('.main-nav ul').find('a').first().focus();
}
return false;
});
// adds expand when click on arrow to expand tabs
$j(".rd-tab-title").click(function(event) {
$j(".rd-tab-title a").click(function(event) {
   $j(".tabswrap").toggleClass("expand");
});
// adds expand when click on arrow to expand tabs
$j(".rd-edittab").click(function(event) {
   $j("#category-list").toggleClass("edittab-expand");
if ($j('.tabswrap').hasClass('expand')) {
$j('.tabswrap ul').find('a').first().focus();
}
return false;
});
// adds expand when click on menu title in responsive footer menu
// Why does this exist?
$j(".rd-nav-footer-title").click(function(event) {
  $j(".main-nav-footer").toggleClass("nav-footer-expand");
});
......
......@@ -376,8 +376,12 @@ div.pagination a {
}
.rd-navmenu .rd-nav-title {
display: block;
padding: 5px 10px;
font-size: 1.25em;
margin: 0 10px;
}
.rd-navmenu .rd-nav-title a {
display: block;
padding: 5px 10px;
cursor: pointer;
position: relative;
background: #547b23 url(../images/mainnav.gif) repeat-x 0 0;
......@@ -385,9 +389,12 @@ div.pagination a {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-size: 1.25em;
}
.rd-navmenu .nav-expand .rd-nav-title {
.rd-navmenu .rd-nav-title a:hover, .rd-navmenu .rd-nav-title a:focus {
text-decoration: none;
color: #E4FFB4;
}
.rd-navmenu .nav-expand .rd-nav-title a {
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
......@@ -712,14 +719,21 @@ ul.in-page-tabs li:first-child a.current-tab {
padding: 0;
}
.rd-navmenu .rd-tab-title {
cursor: pointer;
display: block;
margin: 0;
}
.rd-navmenu .rd-tab-title a {
display: block;
padding: 7px 10px;
position: relative;
border: 1px solid #d1d1d1;
border-bottom: 0;
background: #d1d1d1 url(../images/tabs.gif) repeat-x 0 0;
color: inherit;
}
.rd-navmenu .rd-tab-title a:hover, .rd-navmenu .rd-tab-title a:focus {
text-decoration: none;
color: #267BBD;
}
#mainmiddle .rd-navmenu .rd-tab {
display: block;
......
......@@ -6,7 +6,7 @@
{include file='admin/stats.tpl' cron=1}
</div>
<div class="site-stats-right">
<div class="tabswrap"><h3 class="rd-tab-title">{str tag=tabs}<span class="rd-tab"></span></h3>
<div class="tabswrap"><h3 class="rd-tab-title"><a href="#">{str tag=tabs}<span class="rd-tab"></span></a></h3>
<ul class="in-page-tabs">
{foreach from=$subpages item=subpage}
<li{if $subpage == $type} class="current-tab"{/if}><a {if $subpage == $type}class="current-tab" {/if}href="{$WWWROOT}admin/statistics.php?type={$subpage}">{str tag=$subpage}<span class="accessible-hidden">({str tag=tab}{if $subpage == $type} {str tag=selected}{/if})</span></a></li>
......
......@@ -32,7 +32,9 @@
{if $SUBPAGENAV}
{if $SUBPAGETOP}{include file=$SUBPAGETOP}{/if}
{* Tabs and beginning of page container for group info pages *} <div class="tabswrap"><h3 class="rd-tab-title">{str tag=tabs}<span class="rd-tab"></span></h3>
{* Tabs and beginning of page container for group info pages *}
<div class="tabswrap">
<h3 class="rd-tab-title"><a href="#">{str tag=tabs}<span class="rd-tab"></span></a></h3>
<ul class="in-page-tabs">
{foreach from=$SUBPAGENAV item=item}
<li {if $item.selected}class="current-tab"{/if}><a {if $item.selected}class="current-tab" {/if}href="{$WWWROOT}{$item.url}">{$item.title}<span class="accessible-hidden">({str tag=tab}{if $item.selected} {str tag=selected}{/if})</span></a></li>
......
{if $MAINNAV}
<div id="main-nav" class="{if $ADMIN || $INSTITUTIONALADMIN || $STAFF || $INSTITUTIONALSTAFF}{if $DROPDOWNMENU}dropdown-adminnav {else}adminnav {/if}{/if}main-nav">
<h3 class="rd-nav-title">{if $ADMIN || $INSTITUTIONALADMIN || $STAFF || $INSTITUTIONALSTAFF}{str tag=admin} {/if}{str tag=menu}<span class="rd-arrow"></span></h3>
<h3 class="rd-nav-title"><a href="#">{if $ADMIN || $INSTITUTIONALADMIN || $STAFF || $INSTITUTIONALSTAFF}{str tag=admin} {/if}{str tag=menu}<span class="rd-arrow"></span></a></h3>
<ul id="{if $DROPDOWNMENU}dropdown-nav{else}nav{/if}">
{strip}
{foreach from=$MAINNAV item=item}
......
......@@ -2,7 +2,7 @@
{if $tags}
<div class="rbuttons"><a class="btn" href="{$WWWROOT}edittags.php">{str tag=edittags}</a></div>
<div class="tabswrap"><h3 class="rd-tab-title">{str tag=tabs}<span class="rd-tab"></span></h3><ul class="in-page-tabs">
<div class="tabswrap"><h3 class="rd-tab-title"><a href="#">{str tag=tabs}<span class="rd-tab"></span></a></h3><ul class="in-page-tabs">
{foreach from=$tagsortoptions key=tagsortfield item=selectedsort name=tagsortoptions}
<li{if $selectedsort} class="current-tab"{/if}><a href="{$WWWROOT}tags.php?ts={$tagsortfield}"{if $selectedsort} class="current-tab"{/if}>{str tag=sort$tagsortfield} <span class="accessible-hidden">({str tag=tab}{if $selectedsort} {str tag=selected}{/if})</span></a></li>
{/foreach}
......
<div class="tabswrap"><h3 class="rd-tab-title">{str tag=tabs}<span class="rd-tab"></span></h3><ul class="in-page-tabs">
{if $edittitle}<li {if $selected == 'title'} class="current-tab"{/if}><a{if $selected == 'title'} class="current-tab"{/if} href="{$WWWROOT}view/edit.php?id={$viewid}{if $new}&new=1{/if}">{str tag=edittitleanddescription section=view}<span class="accessible-hidden">({str tag=tab}{if $selected == 'title'} {str tag=selected}{/if})</span></a></li>{/if}
<li {if $selected == 'layout'} class="current-tab"{/if}><a{if $selected == 'layout'} class="current-tab"{/if} href="{$WWWROOT}view/layout.php?id={$viewid}{if $new}&new=1{/if}">{str tag=editlayout section=view}<span class="accessible-hidden">({str tag=tab}{if $selected == 'layout'} {str tag=selected}{/if})</span></a></li>
<li {if $selected == 'content'} class="current-tab"{/if}><a{if $selected == 'content'} class="current-tab"{/if} href="{$WWWROOT}view/blocks.php?id={$viewid}{if $new}&new=1{/if}">{str tag=editcontent section=view}<span class="accessible-hidden">({str tag=tab}{if $selected == 'content'} {str tag=selected}{/if})</span></a></li>
{if can_use_skins()}<li {if $selected == 'skin'} class="current-tab"{/if}><a{if $selected == 'skin'} class="current-tab"{/if} href="{$WWWROOT}view/skin.php?id={$viewid}{if $new}&new=1{/if}">{str tag=chooseskin section=skin}<span class="accessible-hidden">({str tag=tab}{if $selected == 'skin'} {str tag=selected}{/if})</span></a></li>{/if}
<li class="displaypage"><a href="{$displaylink}">{str tag=displayview section=view} &raquo;</a></li>
{if $edittitle || $viewtype == 'profile'}<li class="sharepage"><a href="{$WWWROOT}view/access.php?id={$viewid}{if $new}&new=1{/if}">{str tag=shareview section=view} &raquo;</a></li>{/if}
</ul></div>
<div class="tabswrap">
<h3 class="rd-tab-title"><a href="#">{str tag=tabs}<span class="rd-tab"></span></a></h3>
<ul class="in-page-tabs">
{if $edittitle}
<li {if $selected == 'title'} class="current-tab"{/if}>
<a{if $selected == 'title'} class="current-tab"{/if} href="{$WWWROOT}view/edit.php?id={$viewid}{if $new}&new=1{/if}">
{str tag=edittitleanddescription section=view}<span class="accessible-hidden">({str tag=tab}{if $selected == 'title'} {str tag=selected}{/if})</span>
</a>
</li>
{/if}
<li {if $selected == 'layout'} class="current-tab"{/if}>
<a{if $selected == 'layout'} class="current-tab"{/if} href="{$WWWROOT}view/layout.php?id={$viewid}{if $new}&new=1{/if}">
{str tag=editlayout section=view}<span class="accessible-hidden">({str tag=tab}{if $selected == 'layout'} {str tag=selected}{/if})</span>
</a>
</li>
<li {if $selected == 'content'} class="current-tab"{/if}>
<a{if $selected == 'content'} class="current-tab"{/if} href="{$WWWROOT}view/blocks.php?id={$viewid}{if $new}&new=1{/if}">
{str tag=editcontent section=view}<span class="accessible-hidden">({str tag=tab}{if $selected == 'content'} {str tag=selected}{/if})</span>
</a>
</li>
{if can_use_skins()}
<li {if $selected == 'skin'} class="current-tab"{/if}>
<a{if $selected == 'skin'} class="current-tab"{/if} href="{$WWWROOT}view/skin.php?id={$viewid}{if $new}&new=1{/if}">
{str tag=chooseskin section=skin}<span class="accessible-hidden">({str tag=tab}{if $selected == 'skin'} {str tag=selected}{/if})</span>
</a>
</li>
{/if}
<li class="displaypage">
<a href="{$displaylink}">{str tag=displayview section=view} &raquo;</a>
</li>
{if $edittitle || $viewtype == 'profile'}
<li class="sharepage">
<a href="{$WWWROOT}view/access.php?id={$viewid}{if $new}&new=1{/if}">{str tag=shareview section=view} &raquo;</a>
</li>
{/if}
</ul>
</div>
......@@ -7,7 +7,8 @@
{include file='admin/users/stats.tpl' cron=1}
</div>
<div class="site-stats-right">
<div class="tabswrap"><ul class="in-page-tabs">
<div class="tabswrap"><h3 class="rd-tab-title"><a href="#">{str tag=tabs}<span class="rd-tab"></span></a></h3>
<ul class="in-page-tabs">
{foreach from=$subpages item=subpage}
<li{if $subpage == $type} class="current-tab"{/if}><a {if $subpage == $type}class="current-tab" {/if}href="{$WWWROOT}admin/users/statistics.php?institution={$institutiondata.name}&type={$subpage}">{str tag=$subpage}<span class="accessible-hidden">({str tag=tab}{if $subpage == $type} {str tag=selected}{/if})</span></a></li>
{/foreach}
......
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