Commit 4177ba9c authored by Jono Mingard's avatar Jono Mingard

Fix ARIA roles on bootstrap tabs (Bug #1482458)

Add tablist and tabpanel roles, and ensure that tabs are linked to
their containers with aria-controls.
Normalizes behaviour across various screen readers, ensuring that
they report click events etc.

behatnotneeded

Change-Id: I51ee2a09a67609be6f917f8894d4e4852a7d6101
Signed-off-by: default avatarJono Mingard <jonom@catalyst.net.nz>
parent 83c4fcab
......@@ -11,14 +11,14 @@ jQuery(function($) {
heading,
tabcontent = $('.pieform.jstabs .pieform-fieldset').parent();
$('.pieform.jstabs').prepend('<ul class="nav nav-tabs"></ul>');
mahara.tabnav = $('.pieform.jstabs').find('.nav-tabs')
$('.pieform.jstabs').prepend('<ul class="nav nav-tabs" role="tablist"></ul>');
mahara.tabnav = $('.pieform.jstabs').find('.nav-tabs');
// Remove class collasped that has been generated by pieform
$('.pieform.jstabs .pieform-fieldset').removeClass('collapsed');
tabcontent.removeClass('collapsed');
// Add div and bootstrap class on tabcontent to show and hide
tabcontent.addClass('tab-pane').wrapAll('<div class="tab-content">');
tabcontent.addClass('tab-pane').attr('role', 'tabpanel').wrapAll('<div class="tab-content">');
// Set up tab navigation
for(i = 0; i < tabcontent.length; i = i + 1){
......@@ -28,7 +28,9 @@ jQuery(function($) {
// if the tab-pane isn't hidden
if (!$(tabcontent[i]).hasClass('hidden')) {
listitem = '<li role="presentation"><a href="#'+id+'" role="tab" data-toggle="tab">'+heading+'</a></li>';
listitem = '<li role="presentation">' +
'<a href="#'+id+'" role="tab" data-toggle="tab" aria-controls="'+id+'" aria-expanded="false">'+heading+'</a>' +
'</li>';
mahara.tabnav.append(listitem);
}
}
......
<ul class="artefactchooser-tabs files nav nav-tabs">
<ul class="artefactchooser-tabs files nav nav-tabs" role="tablist">
{foreach from=$tabs.tabs item=displayname key=name}
<li{if $tabs.owner == $name} class="active"{/if}>
<a class="changeowner" href="{$querybase}owner={$name}">
<a class="changeowner" href="{$querybase}owner={$name}" role="tab">
{$displayname}
<span class="accessible-hidden sr-only">
({str tag=tab}
......
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