How to implement guide with `<a>` elements losing focus in html5 when navigating with keyboard shortcuts
I'm having trouble with I've searched everywhere and can't find a clear answer. I've searched everywhere and can't find a clear answer. I'm experiencing a frustrating scenario where keyboard navigation using tabbing causes certain `<a>` elements to lose focus unexpectedly when using Chrome 118. This question arises specifically when the `<a>` elements are nested within a `<div>` that has a CSS class applying `overflow: hidden;`. I've implemented the following structure: ```html <div class="container" style="overflow: hidden;"> <a href="#link1" class="nav-link">Link 1</a> <a href="#link2" class="nav-link">Link 2</a> <a href="#link3" class="nav-link">Link 3</a> </div> ``` When I navigate using the tab key, I find that after focusing on the first link, it becomes unresponsive, and I want to tab to the next link unless I click on it with the mouse. I've also tried inspecting the computed styles and ensuring there are no JavaScript event listeners interfering. Additionally, I wrapped the links in a `<nav>` element like this: ```html <nav> <div class="container" style="overflow: hidden;"> <a href="#link1" class="nav-link">Link 1</a> <a href="#link2" class="nav-link">Link 2</a> <a href="#link3" class="nav-link">Link 3</a> </div> </nav> ``` But the scenario continues. I'm testing on multiple machines and it seems to be isolated to Chrome. Other browsers like Firefox 117 and Safari 17 handle this correctly. Is there a known scenario with Chrome regarding focus management under specific CSS properties? Any guidance on a workaround or fix would be greatly appreciated. I'm working on a CLI tool that needs to handle this. Any ideas what could be causing this? For context: I'm using Html on Debian. Thanks for your help in advance!