Нужно исправить CSS для табуляции

Я работаю над кодом, который нуждается в специальных функциях специальных возможностей. Я создал 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>

Источник

1 ответ

Решение

Проблема в том, что, как только вы вкладываете в 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>

Источник
Другие вопросы по тегам