Show hidden header on 'focus-within'

[snelsi]

Currently, if you have links or buttons in the header, then scroll down and try to navigate your page by keyboard 'tab', elements in the header will be focused, but the header itself won't appear.

Check my sandbox
This is possibly an accessibility issue and a bug.

Possible solution is just apply 'headroom--pinned' styles on 'headroom--unpinned:focus-within':

.headroom--unpinned:focus-within {
    transform: translate3d(0px, 0, 0px) !important;
}

[mparsakia]

Bumping this as its an accessibility issue for users that navigate with keyboard only. I assume the problem is that react standalone does not support pseudo-selectors, however I think using CSS Modules here would be a good fix. Simply adding that CSS line fixes the entire problem.

Thank you @snelsi for the simple fix. Thankfully as its a pseudo-selector, I was able to simply put that code into my Next.js global styles and it fixed the problem.

One edit I shall note: If a user is on mobile and clicks a button in the navbar, and you have a hide-on-scroll navbar like this, you'll need to remove the focus from the button to "fix" the scroll behavior (as the focus is trapped on the button still). For some reason, scrolling does not move the focus on mobile, which is not the problem of this library, but for anyone else:

I simply did document.activeElement.blur() for onClick in my button. In my case it opens a modal, so this was necessary.