Permalink
Browse files

Tabbed interface: improvements for screen readers

 1. Removed `enter` key behaviour for tabs as it was preventing a
    smooth transition to/from forms mode which resulted in an extra
	`enter` key press being required.
 2. Set `aria-live="off"` for the tablist.  This greatly reduces
    the amount of content read by screen readers when the arrow
    keys are used to change tabs or `escape` is used
    to stop the tab cycle.
 3. Set `aria-live="polite"` on the "Play" button.  This causes
    changes to this buttons text to be spoken.
 4. Backported `escape` key to stop tab rotation.

Discussion is in #1081.
  • Loading branch information...
patheard committed Sep 5, 2013
1 parent 142f180 commit c1b9d87d7cd2ea1d16408fdd1cbd2cb337ac0cca
Showing with 15 additions and 11 deletions.
  1. +15 −11 src/js/workers/tabbedinterface.js
@@ -153,7 +153,7 @@
}
$tabListHeading.insertBefore($nav);
$nav.attr('role', 'tablist').children('li').attr('role', 'presentation');
$nav.attr({'role': 'tablist', 'aria-live': 'off'}).children('li').attr('role', 'presentation');
$tabs.attr({'role': 'tab', 'aria-selected': 'false'});
$tabsPanel.attr('id', $panels.eq(0).attr('id') + '-parent');
$panels.attr({'tabindex': '-1', 'role': 'tabpanel', 'aria-hidden': 'true'}).each(function () {
@@ -189,15 +189,7 @@
if (opts.cycle) {
stopCycle();
}
if (isKeySelect) {
if (!$target.is($tabs.filter('.' + opts.tabActiveClass))) {
selectTab($target, $tabs, $panels, opts, false);
} else {
href = $target.attr('href');
hash = href.substring(href.indexOf('#'));
_pe.focus($panels.filter(hash));
}
} else {
if (!isKeySelect) {
selectTab(isKeyPrev ? getPrevTab($tabs) : getNextTab($tabs), $tabs, $panels, opts, false);
}
}
@@ -274,7 +266,7 @@
$current = $tabs.filter('.' + opts.tabActiveClass);
$pbar = $current.siblings('.tabs-roller');
$nav.addClass('started');
elm.find('.tabs-toggle').data('state', 'started');
elm.find('.tabs-toggle').data('state', 'started').attr('aria-live', 'polite');
return $pbar.show().animate({
width : $current.parent().width()
}, opts.cycle - 200, 'linear', function () {
@@ -349,6 +341,18 @@
if (!opts.autoPlay) {
stopCycle();
}
_pe.document.on('keydown', function (e) {
var $tabsToggle;
if (e.keyCode === 27) { // Escape
$tabsToggle = elm.find('.tabs-toggle');
if ($tabsToggle.data('state') === 'started') {
$tabsToggle.attr('aria-live', 'off');
stopCycle();
_pe.focus(elm.find('.tabs .' + opts.tabActiveClass));
}
}
});
}
elm.find('a').filter('[href^="#"]').each(function () {

0 comments on commit c1b9d87

Please sign in to comment.