CSS-Selector: Anchor with tabindex still not focusable

Question

I have this jsfiddle with my usecase, where a hidden div should show if another div with an anchor in it gets focus: https://jsfiddle.net/gimoya/skn2y3mx

<div tabindex="1" class="pop_gpx_text"> <a>LINK</a> </div>
<div class="kofi_reminder" id="hidden_div">
<a href="https://de.wikipedia.org/wiki/Test">Link 1</a>
</div>

.kofi_reminder {display: none; }

.kofi_reminder:active {
    display:block; 
}
.pop_gpx_text:focus + #hidden_div {
    display: block; 
}

Aim is that as soon as the anchor is clicked the hidden div shows and stays visible.

Now, the issue which im fighting for hours now, is that in my implementation, in which the approach is the very same, the pseudo-selector for the focus state has no effect on the text inside the anchor tag. The functionality should be, that after selecting a track in my map, and then clicking the "GPX Download" link in the pop up, that the hidden div should show. https://tiroltrailhead.com/legacy_trails/

However, only if you focus/click content of the div "around" the anchor, and not the anchor itself, the hidden div would show. However, this is perfectly working in the jsfiddel - either clicking/focusing the div OR/AND the anchor would work for the pseudo selector...

Answer 1

Make sure your anchor has href set to a value or else it will not receive focus from click or keyboard. An anchor without href is not recognized by the browser as an interactive element. Doing this you don't need a tabindex wrapper for your link:

.box {
  display: inline-block;
  border: 1px solid;
}

.popup {
  display: none;
}

a:focus + .popup {
  display: block;
}

<div class="box">
  <a href="#">Download</a>
  <div class="popup">More download info</div>
</div>