Якорные ссылки внутри div больше не доступны с помощью клавиши табуляции

Question

В настоящее время я изучаю проблему A11y, над которой работаю.

У нас есть upvotes div, который скрывается, когда пользователь наводит курсор на него (с помощью мыши) или фокусируется на нем (с помощью tab ключ), если указанный пользователь не вошел в систему.

Когда это происходит, signup/signin Появляется div с двумя ссылками привязки, предлагающими пользователю зарегистрироваться или войти в систему.

Вот код, который у нас изначально был (на CoffeeScript):

hoverize: (votes) ->
  $(document).on {
    'mouseenter focus': ->
      $("div.participation-not-allowed", this).show()
      $("div.participation-allowed", this).hide()
    mouseleave: ->
      $("div.participation-not-allowed", this).hide()
      $("div.participation-allowed", this).show()
  }, votes

Проблема с этим кодом заключалась в том, что, если пользователь перемещался по сайту с tab ключ, signup/signin div будет оставаться сосредоточенным и не будет прятаться, пока пользователь не наведет на него курсор мыши.

Мы исправили это добавление размытия к mouseleave функция, которая дает нам следующий код:

hoverize: (votes) ->
  $(document).on {
    "mouseenter focus": ->
      $("div.participation-not-allowed", this).show()
    "mouseleave blur": ->
      $("div.participation-not-allowed", this).hide()
  }, votes

Но теперь якорные ссылки внутри signup/signin div не доступны с tab ключ больше

Вот изображение, которое изображает текущее поведение

,

А вот еще один, который изображает желаемую реализацию

,