需要 CSS 修复 Tab 键

Question

我正在编写一些需要特定辅助功能的代码。我创建了一个 js fiddle 作为参考来说明我的问题。

我有一个很棒的链条图标，可以触发纯 CSS 弹出窗口。当您切换到链图标时，它会成为焦点（带有蓝色边框），弹出窗口会自动打开。然而，我遇到的问题是我希望下一个选项卡成为弹出窗口中的第一个 link。当前弹出窗口已关闭，link 已隐藏。

如果您只使用鼠标并单击链图标和选项卡，该选项卡会将您带到下一个 link。我想知道是否可以使用某种 CSS 技巧，仅使用选项卡从链图标切换到弹出窗口中的第一个 link，而无需触摸鼠标或点击任何其他键。

代码如下：

.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 解决此问题，如下例所示。我还向每个 link 添加了 tabindex="0" ，以便它们从 chainlink.

开始按顺序排列

更新

向代码段添加了以下控件：

键入 ESC 以隐藏弹出窗口；
使用 Tab 键时，如果链条和单个 link 都没有聚焦（例如 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>

需要 CSS 修复 Tab 键

Need a CSS fix for tabbing

css

accessibility

css-selectors

tabbing