1

我正在处理一些需要特定辅助功能的代码。我创建了一个 js fiddle 以供参考以说明我的问题。

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>

4

1 回答 1

0

问题是，一旦您离开chainlink它就会松开:hover并且弹出窗口会回到其默认display:none样式。您可以使用简单的 js 解决此问题，如下例所示。我还添加tabindex="0"了每个链接，以便它们从chainlink.

更新

在代码段中添加了以下控件：

  • 键入 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>

于 2017-10-03T19:08:34.053 回答