Question

我正在研究一些需要特定辅助功能的代码。我创建了一个js小提琴，以供参考，以说明我的问题。

我有一个链的字体真棒图标，触发纯CSS弹出窗口。当您选择链接图标时，它会聚焦（用蓝色边框勾勒），弹出窗口会自动打开。我遇到的问题是，我希望下一个标签成为popover中的第一个链接。目前，弹出窗口已关闭，链接将被隐藏。

如果您只是使用鼠标并单击链图标和选项卡，该选项卡将转到下一个链接。我想知道是否可以使用某种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解决此问题，如下例所示。我还在每个链接中添加了tabindex="0"，以便它们属于chainlink的顺序Taborder。

<强>更新

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

键入ESC以隐藏弹出窗口;
当标签显示时，如果链接和个别链接都没有聚焦（例如activeElement），则弹出隐藏;
在弹出窗口外单击以隐藏它。

＆＃13;

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();
}

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

需要CSS修复标签

1 个答案: