信頼できる解決策が見つからなかったので、独自の関数を作成することにしました。私はそれをいじるのはあまり幸せではありませんが、TABキーの動作を制御し、グローバルなキーアップ/キーダウン関数を作成する必要がありました。
興味のある人のために、私はSOでいくつかのリソースを見つけました、ここ、ここ、そしてここ。
スクリプトのアンカーに「disabled」という名前のCSSクラスを割り当てていることに注意してください。これにより、コードに表示されるdisabled="disabled"ものを、該当する要素の属性のように考慮することができます。また、HTMLコンテンツからブラウザの選択可能なUI要素に焦点を合わせる方法を見つけることができませんでしたが、それがおそらく最後の懸念事項です。
// lightbox keyboard navigation
function getFocusList() {
return $('body,#lightbox *:visible').filter(function(idx,elm) {
if ($(elm).is('body')) return true;
if (/^hidden$/i.test($(elm).css('visibility'))) return false;
return (
(/^a(rea)?$/i.test(elm.nodeName) && $(elm).hasAttr('href') && !$(elm).is('.disabled')) ||
(/^(input|textarea|button|select)$/i.test(elm.nodeName) && !$(elm).prop('disabled')) ||
(/^\d+$/.test($(elm).prop('tabindex')) && !$(elm).prop('disabled') && !$(elm).is('.disabled'))
)
});
}
function globalKeyDown(e) {
var
LB = !!$('#lightbox').length,
isTAB = e.which == 9,
isSHIFT = e.which == 16,
SHIFT_ON = LB && typeof $('#lightbox').data('SHIFT_ON') != 'undefined'
if (isSHIFT && LB) $('#lightbox').data('SHIFT_ON',true);
if (!isTAB || !LB) return;
var focusList = getFocusList(), nextIndex;
var curIndex = $.inArray($(this).get(0),focusList);
if (SHIFT_ON) nextIndex = --curIndex == 0 ? focusList.length - 1 : curIndex;
else nextIndex = ++curIndex == focusList.length ? (focusList.length > 1 ? 1 : 0) : curIndex;
var next = $(focusList[nextIndex]);
e.preventDefault();
e.stopImmediatePropagation();
next.focus();
}
function globalKeyUp(e) {
var
LB = !!$('#lightbox').length,
isSHIFT = e.which == 16,
SHIFT_ON = LB && typeof $('#lightbox').data('SHIFT_ON') != 'undefined'
if (isSHIFT && SHIFT_ON) $('#lightbox').removeData('SHIFT_ON')
}
$.fn.extend({
hasAttr:function(attrStr) {
var res = true;
$(this).each(function() {
if (typeof $(this).attr(attrStr) == 'undefined') res = false;
});
return res;
}
});
$(document).ready(function() {
$('body')
.on('focus','#lightbox a',function() {$(this).addClass('hover')})
.on('blur','#lightbox a',function() {$(this).removeClass('hover')})
.on('keydown','*',globalKeyDown).on('keyup','*',globalKeyUp)
.on('keydown',globalKeyDown).on('keyup',globalKeyUp)
// remaining jQuery code...
});
これにより、同様の問題を抱えている他の人の時間を節約できることを願っています。