如何在 CSS 可见时将链接添加到 Tab 键顺序？

Question

受 display: none 约束的链接不在默认的 Tab 键顺序中。然而，当它们被揭露时——例如CSS 用于下拉菜单，当父级 link 获得焦点时显示子菜单 - 他们仍然不在 Tab 键顺序中。据推测 JavaScript 是必需的，但简单地设置 tabindex="0" 什么都不做。

Answer 1

这里的问题是，一旦您关闭 "Top level page with child" link，CSS 就会更新并且锚点的父级变为 display:none anchor 可以接收焦点。您将需要使用 JavaScript 来解决此问题并使用超时延迟 CSS 中的更改，直到您可以确定失去焦点是否导致焦点转移到子元素。

当父级为 display:none 时设置 tabindex="0" 无济于事，display:none 意味着内容可能不在文档中。

Answer 2

我提出了一个基本有效的解决方案：http://codepen.io/gyrus/pen/waKjKv/ IE 中似乎存在一些问题，我正在解决这个问题。但总体思路是：

在隐藏下拉列表之前添加一个小的延迟
设置一个数据属性来标记下拉列表中的任何链接是否有焦点，并在隐藏之前检查它

这只是 jQuery，更多内容请查看笔：

jQuery( document ).ready( function( $ ) {
    $( '.nav' ).on( 'mouseenter focusin', '.menu-level-0.menu-item-has-children', function( e ) {
        var el = $( this );
        // Show sub-menu
        el.attr( 'aria-expanded', 'true' )
            .find( '.sub-menu-wrapper' ).show();
    }).on( 'mouseleave focusout', '.menu-level-0.menu-item-has-children', function( e ) {
        var el = $( this );
        // Only hide sub-menu after a short delay, so links get a chance to catch focus from tabbing
        setTimeout( function() {
            var smw = el.find( '.sub-menu-wrapper' );
            if ( smw.attr( 'data-has-focus' ) !== 'true' ) {
                el.attr( 'aria-expanded', 'false' );
                smw.hide();
            }
        }, 100 );
    }).on( 'focusin', '.sub-menu-wrapper', function( e ) {
        var el = $( this );
        el.attr( 'data-has-focus', 'true' );
    }).on( 'focusout', '.sub-menu-wrapper', function( e ) {
        var el = $( this );
        el.attr( 'data-has-focus', 'false' );                        
        // Hide sub-menu on the way out
        el.hide().parents( '.menu-level-0' ).attr( 'aria-expanded', 'false' );
    });
});

如何在 CSS 可见时将链接添加到 Tab 键顺序？

How to add links to tabbing order when they're made visible with CSS?

html

javascript

css

accessibility

drop-down-menu