I'm working on some code that needs specific accessibility features. I created a js fiddle for reference to illustrate my issue.
https://jsfiddle.net/c6chmugu/
I have a font awesome icon of a chain that triggers a pure CSS popover. When you tab to the chain icon it comes in focus(outlined with a blue border)the popover opens automatically. The issue I'm having however is that I'd like the next tab to be the first link within the popover. Currently the popover is closed and the links become hidden.
If you just use the mouse and click the chain icon and tab, the tab takes you to the next link. I'm wondering if it is possible with some kind of CSS trick using only tabs to tab from the chain icon to the first link in the popover without touching the mouse or hitting any other keys.
Here's the code:
.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>The problem is that once you tab away from chainlink it looses :hover and the popup falls back to its default display:none style. You can resolve this using a simple js as in the example below. I also added tabindex="0" to each link so that they fall in the sequential taborder from chainlink.
UPDATE
Added the following controls to the snippet:
activeElement), popup hides;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>