feat: keyboard status navigation with j/k

[shuuji3]

resolves j/k navigation part of #1858

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for elk-docs canceled.

Name	Link
🔨 Latest commit	aa171a8
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/6625e73760334f0008dd7153

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	aa171a8
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/6625e737d75e7c000779d3d5
😎 Deploy Preview	https://deploy-preview-2739--elk-zone.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[shuuji3]

This implementation is working well if we disable the experimental virtual scrolling. When enabled and a post has a large height, the next post is not loaded until it is on-screen. As a result, this keyboard navigation code fails to find the next post to focus on and stack to the last post or is forced to go to the top post.

We are using DynamicScroller (https://github.com/Akryum/vue-virtual-scroller/blob/master/packages/vue-virtual-scroller/README.md#dynamicscroller) but it has little option to customize so I'm not sure how to fix this issue.

I'll disable this keyboard shortcut when the virtual scroller is enabled. But that means most users cannot use it as it is enabled by default.

[shuuji3]

Disabled this feature when "Virtual Scrolling" is enabled and add instructions to do so in the shortcut help dialog.