タブ付け用のCSS修正が必要

Question

特定のアクセシビリティ機能が必要なコードを作成しています。私は私の問題を説明するために参考のためにjsのバイブルを作成しました。

https://jsfiddle.net/c6chmugu/

私は純粋なCSSのポップオーバーをトリガチェーンのフォント素晴らしいアイコンを持っています。チェーンアイコンにタブを移動すると、フォーカス（青色の枠線で囲まれています）が表示され、ポップオーバーが自動的に開きます。しかし、私が持っている問題は、次のタブをポップオーバー内の最初のリンクにしたいということです。現在、ポップオーバーは閉じられており、リンクは非表示になります。

マウスを使用してチェーンアイコンとタブをクリックするだけで、次のリンクに移動します。私は可能性がある場合は、マウスを触ったり、他のキーを打つことなく、チェーンアイコンからポップオーバーの最初のリンクにタブを使用していくつかの種類のCSSトリックで可能ですか？

ここでは、コードです：

.popover-wrapper ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.popover-wrapper ul li { 
 
    padding: 0.2rem 0 0.2rem 0; 
 
} 
 

 
.popover-wrapper ul a:hover, 
 
.popover-wrapper ul a:focus { 
 
    color: $c-blue-dark; 
 
    text-decoration: none; 
 
} 
 

 
.popover-wrapper ul a { 
 
    font-weight: bold; 
 
} 
 

 
.popover-wrapper { 
 
    background: $c-white; 
 
    display: none; 
 
    position: absolute; 
 
    padding: 1rem; 
 
    bottom: 4rem; 
 
    right: -1rem; 
 
    width: 16rem; 
 
    border: 1px solid $c-gray-2; 
 
    transition: all .25s ease-in-out; 
 
} 
 

 
.popover-wrapper:focus, 
 
.chainlink:focus+.popover-wrapper:hover, 
 
.chainlink+.popover-wrapper:hover, 
 
.chainlink:hover+.popover-wrapper, 
 
.chainlink:focus+.popover-wrapper { 
 
    display: block; 
 
} 
 

 
.popover-wrapper:after, 
 
.popover-wrapper:before { 
 
    content: ''; 
 
    left: 12.7rem; 
 
    position: absolute; 
 
} 
 

 

 
/* Styling for second triangle (border) */ 
 

 
.popover-wrapper:before { 
 
    border-left: 2.2rem solid transparent; 
 
    border-right: 2.2rem solid transparent; 
 
    border-top: 2.2rem solid; 
 
    border-top-color: inherit; 
 
    /* Can't be included in the shorthand to work */ 
 
    bottom: -2.2rem; 
 
    margin-left: -2.2rem; 
 
} 
 

 
.popover-wrapper:after { 
 
    border-left: 2.1rem solid transparent; 
 
    border-right: 2.1rem solid transparent; 
 
    border-top: 2.1rem solid white; 
 
    bottom: -2.1rem; 
 
    margin-left: -2.1rem; 
 
}

<a class="chainlink pull-right" aria-label="Linked applications popover" href="#">chain<i class="fa fa-link" aria-hidden="true"></i></a> 
 
<div class="popover-wrapper" tabindex="0" aria-label="linked application popover. Tab through all linked applications"> 
 
    <div class="margin-bottom-1">Linked Applications</div> 
 
    <ul aria-role="dropdown"> 
 
    <li><a class="popover-link" href="">#1234567</a></li> 
 
    <li><a class="popover-link" href="">#2345678</a></li> 
 
    <li><a class="popover-link" href="">#3456789</a></li> 
 
    <li><a class="popover-link" href="">#1234567</a></li> 
 
    </ul> 
 
</div>

Answer 1

問題が離れchainlinkからあなたはタブたら、それは:hoverを失い、ポップアップがデフォルトdisplay:noneスタイルに戻って落ちるということですが。以下の例のように単純なjsを使ってこれを解決できます。また、を各リンクに追加して、順次タブオーダーchainlinkになるようにしました。

UPDATE

は、スニペットに次のコントロールを追加しました：

• タイプESCをポップアップを非表示にします。
• タブ移動時にチェーンや個別のリンクにフォーカスがない場合（例：activeElement）、ポップアップが非表示になります。
• ポップアップの外側をクリックして非表示にします。

var chain = document.getElementById('chainlink'); 
 
var popover = document.getElementById('popover'); 
 
var links = document.body.querySelectorAll('.popover-link') 
 

 
chainlink.onfocus = function(event) { 
 
    popover.style.display = 'block'; 
 
} 
 

 
window.onkeyup = function(e) { 
 
    var key = e.keyCode ? e.keyCode : e.which; 
 
    if (key == 27) { 
 
     popover.style.display = 'none'; 
 
    } 
 
    else if (key == 9) { 
 
     let shouldClose = true; 
 
     for (i = 0; i < links.length; i++) { 
 
     if (links[i] == document.activeElement || chain == document.activeElement) { 
 
      shouldClose = false; 
 
     } 
 
    } 
 
     if (shouldClose) 
 
      popover.style.display = 'none'; 
 
     //console.log(document.activeElement); 
 
    } 
 
    //console.log(key); 
 
} 
 

 
window.onclick = function(e) { 
 
    popover.style.display = 'none'; 
 
} 
 

 
popover.onclick = function(e) { 
 
    e.stopPropagation(); 
 
}

.chainlink { 
 
    position:absolute; 
 
    right: 40px; 
 
    top: 40px; 
 
    margin-right:100px; 
 
} 
 

 
.downstream { 
 
    margin-top:100px; 
 
} 
 
    
 
.popover-wrapper ul { 
 
    list-style: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.popover-wrapper ul li { 
 
    padding: 0.2rem 0 0.2rem 0; 
 
} 
 

 
.popover-wrapper ul a:hover, 
 
.popover-wrapper ul a:focus { 
 
    color: blue; 
 
    text-decoration: none; 
 
} 
 

 
.popover-wrapper ul a { 
 
    font-weight: bold; 
 
} 
 

 
.popover-wrapper { 
 
    background: white; 
 
    display: none; 
 
    position: absolute; 
 
    padding: 1rem; 
 
    bottom: 4rem; 
 
    right: -1rem; 
 
    width: 16rem; 
 
    border: 1px solid gray; 
 
    transition: all .25s ease-in-out; 
 
} 
 

 
.popover-wrapper:after, 
 
.popover-wrapper:before { 
 
    content: ''; 
 
    left: 12.7rem; 
 
    position: absolute; 
 
} 
 

 

 
/* Styling for second triangle (border) */ 
 

 
.popover-wrapper:before { 
 
    border-left: 2.2rem solid transparent; 
 
    border-right: 2.2rem solid transparent; 
 
    border-top: 2.2rem solid; 
 
    border-top-color: inherit; 
 
    /* Can't be included in the shorthand to work */ 
 
    bottom: -2.2rem; 
 
    margin-left: -2.2rem; 
 
} 
 

 
.popover-wrapper:after { 
 
    border-left: 2.1rem solid transparent; 
 
    border-right: 2.1rem solid transparent; 
 
    border-top: 2.1rem solid white; 
 
    bottom: -2.1rem; 
 
    margin-left: -2.1rem; 
 
}

<a href="url">link text</a> 
 
<br/> 
 

 

 
<a id="chainlink" class="chainlink pull-right" aria-label="Linked applications popover" href="#">chain<i class="fa fa-link" aria-hidden="true"></i></a> 
 
<div id="popover" class="popover-wrapper" aria-label="linked application popover. Tab through all linked applications"> 
 
    <div class="margin-bottom-1">Linked Applications</div> 
 
    <ul aria-role="dropdown"> 
 
    <li><a class="popover-link" href="" tabindex="0">#1234567</a></li> 
 
    <li><a class="popover-link" href="" tabindex="0">#2345678</a></li> 
 
    <li><a class="popover-link" href="" tabindex="0">#3456789</a></li> 
 
    <li><a class="popover-link" href="" tabindex="0">#1234567</a></li> 
 
    </ul> 
 
</div> 
 
<div tabindex="0" class="downstream">downstream tab order</div>