Commit 0c92f9b4 authored by Jono Mingard's avatar Jono Mingard Committed by Gerrit Code Review
Browse files

Added text description of tab state (Bug #1259387)



Added hidden text to all in-page tabs to show that a) they are
tabs and b) which one is selected. This applies to tabs defined
in templates and tabs generated with JavaScript.

Change-Id: I20969547081ad4b39fc698a24f8987be9a08508c
Signed-off-by: default avatarJono Mingard <reason.koan@gmail.com>
Signed-off-by: default avatarJono Mingard <jonom@catalyst.net.nz>
parent 15b384bb
......@@ -431,7 +431,9 @@ $smarty = smarty(array('artefact/internal/js/profile.js'), array(), array(
'mahara' => array(
'cannotremovedefaultemail',
'emailtoolong',
'tabs'
'tabs',
'tab',
'selected',
),
'artefact.internal' => array(
'loseyourchanges',
......
......@@ -16,7 +16,12 @@ addLoadEvent(function() {
var tabs = [];
forEach(legends, function(legend) {
var a = A({'href': ''}, scrapeText(legend));
var accessibleText = SPAN({'class':'accessible-hidden'}, '(' + get_string('tab') + ')');
appendChildNodes(a, accessibleText);
legend.parentNode.tabLink = a;
legend.parentNode.tabAccessibleText = accessibleText;
// Pieforms is unhelpful with legend/fieldset ids; get it from children
var fsid = 'general';
var row = getFirstElementByTagAndClassName('tr', 'html', legend.parentNode);
......@@ -31,12 +36,14 @@ addLoadEvent(function() {
addElementClass(fieldset.tabLink, 'current-tab');
removeElementClass(fieldset, 'safe-hidden');
removeElementClass(fieldset, 'collapsed');
fieldset.tabAccessibleText.innerHTML = '(' + get_string('tab') + ' ' + get_string('selected') + ')';
$('profileform_fs').value = fsid;
}
else {
else if (hasElementClass(fieldset.tabLink.parentNode, 'current-tab')) {
removeElementClass(fieldset.tabLink.parentNode, 'current-tab');
removeElementClass(fieldset.tabLink, 'current-tab');
addElementClass(fieldset, 'collapsed');
fieldset.tabAccessibleText.innerHTML = '(' + get_string('tab') + ')';
}
});
e.stop();
......@@ -68,6 +75,7 @@ addLoadEvent(function() {
// not collapsed by default, probably was the default one to show
addElementClass(fieldset.tabLink.parentNode, 'current-tab');
addElementClass(fieldset.tabLink, 'current-tab');
fieldset.tabAccessibleText.innerHTML = '(' + get_string('tab') + ' ' + get_string('selected') + ')';
}
});
......
......@@ -15,7 +15,10 @@ addLoadEvent(function() {
var tabs = [];
forEach(legends, function(legend) {
var a = A({'href': ''}, scrapeText(legend));
var accessibleSpan = SPAN({'class':'accessible-hidden'}, '(' + get_string('tab') + ')');
appendChildNodes(a, accessibleSpan);
legend.parentNode.tabLink = a;
legend.parentNode.tabAccessibleText = accessibleSpan;
// Pieforms is unhelpful with legend/fieldset ids; get it from children
var fsid = 'viewbuttons';
var row = getFirstElementByTagAndClassName('tr', 'html', legend.parentNode);
......@@ -30,6 +33,7 @@ addLoadEvent(function() {
addElementClass(fieldset.tabLink, 'current-tab');
removeElementClass(fieldset, 'safe-hidden');
removeElementClass(fieldset, 'collapsed');
fieldset.tabAccessibleText.innerHTML = '(' + get_string('tab') + ' ' + get_string('selected') + ')';
$('designskinform_fs').value = fsid;
}
else {
......@@ -37,6 +41,7 @@ addLoadEvent(function() {
removeElementClass(fieldset.tabLink, 'current-tab');
addElementClass(fieldset, 'safe-hidden');
addElementClass(fieldset, 'collapsed');
fieldset.tabAccessibleText.innerHTML = '(' + get_string('tab') + ')';
}
});
e.stop();
......@@ -54,6 +59,7 @@ addLoadEvent(function() {
// not collapsed by default, probably was the default one to show
addElementClass(fieldset.tabLink.parentNode, 'current-tab');
addElementClass(fieldset.tabLink, 'current-tab');
fieldset.tabAccessibleText.innerHTML = '(' + get_string('tab') + ' ' + get_string('selected') + ')';
}
});
......
......@@ -38,6 +38,8 @@ $string['Help'] = 'Help';
$string['applychanges'] = 'Apply changes';
$string['general'] = 'General';
$string['tabs'] = 'TABS';
$string['tab'] = 'tab';
$string['selected'] = 'selected';
$string['no'] = 'No';
$string['yes'] = 'Yes';
$string['none'] = 'None';
......
......@@ -564,7 +564,12 @@ $designskinform = pieform(array(
));
$smarty = smarty(array('jquery', 'js/skindesign.js'), array(), array(), array());
$smarty = smarty(array('jquery', 'js/skindesign.js'), array(), array(
'mahara' => array(
'tab',
'selected',
),
), array());
$smarty->assign('LANG', substr($CFG->lang, 0, 2));
$smarty->assign('USER', $USER);
$smarty->assign('designskinform', $designskinform);
......
......@@ -357,13 +357,15 @@ ul.in-page-tabs li a,
ul.in-page-tabs li a:link,
ul.in-page-tabs li a:visited,
ul.in-page-tabs li a:active,
ul.in-page-tabs li input.linkbtn {
ul.in-page-tabs li input.linkbtn,
ul.in-page-tabs li button.linkbtn {
color: #FFFFFF;
background: #00084F;
border: 1px solid #00084F;
}
ul.in-page-tabs li a:hover,
ul.in-page-tabs li input:hover {
ul.in-page-tabs li input:hover,
ul.in-page-tabs li button:hover {
text-decoration: underline;
color: #1F97D5;
}
......@@ -371,7 +373,8 @@ ul.in-page-tabs li a.current-tab,
ul.in-page-tabs li a.current-tab:link,
ul.in-page-tabs li a.current-tab:visited,
ul.in-page-tabs li a.current-tab:active,
ul.in-page-tabs li input.current-tab {
ul.in-page-tabs li input.current-tab,
ul.in-page-tabs li button.current-tab {
color: #14336F;
background-color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
......
......@@ -211,7 +211,8 @@ ul.in-page-tabs li a,
ul.in-page-tabs li a:link,
ul.in-page-tabs li a:visited,
ul.in-page-tabs li a:active,
ul.in-page-tabs li input.linkbtn {
ul.in-page-tabs li input.linkbtn,
ul.in-page-tabs li button.linkbtn {
color: #333333;
}
/******************** Sidebar ********************/
......
......@@ -666,6 +666,7 @@ ul.in-page-tabs li a:link,
ul.in-page-tabs li a:visited,
ul.in-page-tabs li a:active,
ul.in-page-tabs li input.linkbtn,
ul.in-page-tabs li button.linkbtn,
ul.searchtab li span.inactive {
color: #1E6297;
background: none;
......@@ -679,14 +680,16 @@ ul.searchtab li span.inactive {
border-radius: 0;
}
ul.in-page-tabs li a:hover,
ul.in-page-tabs li input:hover {
ul.in-page-tabs li input:hover,
ul.in-page-tabs li button:hover {
color: #7E7327;
}
ul.in-page-tabs li a.current-tab,
ul.in-page-tabs li a.current-tab:link,
ul.in-page-tabs li a.current-tab:visited,
ul.in-page-tabs li a.current-tab:active,
ul.in-page-tabs li input.current-tab {
ul.in-page-tabs li input.current-tab,
ul.in-page-tabs li button.current-tab {
color: #000;
background: #FFFFFF url(../images/tabs-active.gif) repeat-x 0 0;
border-left: 1px solid #FFFFFF;
......
......@@ -9,7 +9,7 @@
<div class="tabswrap"><h3 class="rd-tab-title">{str tag=tabs}<span class="rd-tab"></span></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}</a></li>
<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>
{/foreach}
</ul></div>
......
......@@ -36,7 +36,7 @@
{* 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>
<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}</a></li>
<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>
{/foreach}
</ul>
</div>
......
......@@ -4,7 +4,7 @@
<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">
{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}</a></li>
<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}
</ul></div>
<div class="subpage mytags">
......
<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}</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}</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}</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}</a></li>{/if}
{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>
......@@ -371,13 +371,15 @@ ul.in-page-tabs li a:link,
ul.in-page-tabs li a:visited,
ul.in-page-tabs li a:active,
ul.in-page-tabs li input.linkbtn,
ul.in-page-tabs li button.linkbtn,
ul.searchtab li span.inactive {
color: #FFFFFF;
background: url(../images/mainnav-bg.png) repeat-x 0 50%;
border: 0;
}
ul.in-page-tabs li a:hover,
ul.in-page-tabs li input:hover {
ul.in-page-tabs li input:hover,
ul.in-page-tabs li button:hover, {
color: #FFFFFF;
background: url(../images/mainnav-bg.png) repeat-x 0 50%;
text-decoration: underline;
......@@ -386,7 +388,8 @@ ul.in-page-tabs li a.current-tab,
ul.in-page-tabs li a.current-tab:link,
ul.in-page-tabs li a.current-tab:visited,
ul.in-page-tabs li a.current-tab:active,
ul.in-page-tabs li input.current-tab {
ul.in-page-tabs li input.current-tab,
ul.in-page-tabs li button.current-tab {
background: url(../images/subnav-bg.png) repeat-x 0 50%;
border: 0;
color: #FFFFFF;
......
......@@ -532,6 +532,7 @@ ul.in-page-tabs li a:link,
ul.in-page-tabs li a:visited,
ul.in-page-tabs li a:active,
ul.in-page-tabs li input.linkbtn,
ul.in-page-tabs li button.linkbtn,
ul.searchtab li span.inactive {
color: #FFFFFF;
background: none;
......@@ -541,7 +542,8 @@ ul.searchtab li span.inactive {
display: table-cell;
}
ul.in-page-tabs li a:hover,
ul.in-page-tabs li input:hover {
ul.in-page-tabs li input:hover,
ul.in-page-tabs li button:hover {
color: #ffd850;
}
ul.in-page-tabs li.current-tab {
......@@ -551,7 +553,8 @@ ul.in-page-tabs li a.current-tab,
ul.in-page-tabs li a.current-tab:link,
ul.in-page-tabs li a.current-tab:visited,
ul.in-page-tabs li a.current-tab:active,
ul.in-page-tabs li input.current-tab {
ul.in-page-tabs li input.current-tab,
ul.in-page-tabs li button.current-tab {
color: #000000;
background: url(../images/inpage-active-left.png) no-repeat left top;
border: 0;
......
......@@ -163,6 +163,14 @@ form.oneline.inline div,
.inline {
display: inline;
}
/* Hides the element but leaves it accessible to screen readers */
.accessible-hidden {
display: inline;
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE7 */
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
}
.hidden,
.dontshow {
display: none;
......@@ -180,13 +188,6 @@ form.oneline.inline div,
margin: 0;
padding: 0;
}
/* Hides the element but leaves it accessible to screen readers */
.accessible-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE7 */
clip: rect(1px, 1px, 1px, 1px);
overflow: hidden;
}
.nojs-hidden-inline,
.nojs-hidden-block,
.nojs-hidden-table,
......@@ -1567,6 +1568,7 @@ ul.in-page-tabs li a:link,
ul.in-page-tabs li a:visited,
ul.in-page-tabs li a:active,
ul.in-page-tabs li input.linkbtn,
ul.in-page-tabs li button.linkbtn,
ul.searchtab li span.inactive {
text-decoration: none;
display: inline-block;
......@@ -1582,14 +1584,16 @@ ul.searchtab li span.inactive {
.ie7 ul.in-page-tabs li a:link,
.ie7 ul.in-page-tabs li a:visited,
.ie7 ul.in-page-tabs li a:active,
.ie7 ul.in-page-tabs li input.linkbtn {
.ie7 ul.in-page-tabs li input.linkbtn,
.ie7 ul.in-page-tabs li button.linkbtn {
margin: 0 0 0 3px;
}
ul.in-page-tabs li a.current-tab,
ul.in-page-tabs li a.current-tab:link,
ul.in-page-tabs li a.current-tab:visited,
ul.in-page-tabs li a.current-tab:active,
ul.in-page-tabs li input.current-tab {
ul.in-page-tabs li input.current-tab,
ul.in-page-tabs li button.current-tab {
color: #333333;
text-decoration: none;
cursor: default;
......
......@@ -8,7 +8,7 @@
<div class="site-stats-right">
<div class="tabswrap"><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}</a></li>
<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>
{/foreach}
</ul></div>
......
......@@ -12,7 +12,9 @@
<div class="tabswrap"><ul class="in-page-tabs">
{foreach from=$tabs item=tab}
<li {if $tab.selected} class="current-tab"{/if}>
<input type="submit" class="linkbtn{if $tab.selected} current-tab{/if}" name="report:{$tab.id}" value="{$tab.name}">
<button type="submit" class="linkbtn{if $tab.selected} current-tab{/if}" name="report:{$tab.id}" value="{$tab.name}" />
{$tab.name}<span class="accessible-hidden">({str tag=tab}{if $tab.selected} {str tag=selected}{/if})</span>
</button>
</li>
{/foreach}
</ul></div>
......
......@@ -9,7 +9,7 @@
<div class="site-stats-right">
<div class="tabswrap"><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}</a></li>
<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}
</ul></div>
......
......@@ -39,7 +39,7 @@
<div class="tabswrap">
<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}</a></li>
<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>
{/foreach}
</ul>
</div>
......
......@@ -4,7 +4,7 @@
<div class="rbuttons"><a class="btn" href="{$WWWROOT}edittags.php">{str tag=edittags}</a></div>
<div class="tabswrap"><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}</a></li>
<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}
</ul></div>
<div class="subpage mytags">
......
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