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	0b9b880
🔍 Latest deploy log	https://app.netlify.com/sites/elk-docs/deploys/6659657ae16f86000834d91e

[netlify]

✅ Deploy Preview for elk-zone ready!

Name	Link
🔨 Latest commit	0b9b880
🔍 Latest deploy log	https://app.netlify.com/sites/elk-zone/deploys/6659657a591a120008e4f8ff
😎 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.

[patak-dev]

I'm not sure about adding j/k only when virtual scrolling is disabled. It may push users to disable it and we could get performance reports later on. Maybe we could wait to see if a way to have it always enabled comes up?

[shuuji3]

Right, that's not an ideal situation. OK, let's revert the message to encourage disabling virtual scrolling and seek a solution.

[shuuji3]

Thanks!