HTML navigation with arrow keys
Is it possible to allow navigation of the html pages with the arrow keys, with up and down selecting up and down and left and right closing and opening the items?
I like the idea! Pull requests welcome!
Do you have an example of keyboard navigation working elsewhere?
You mean another webpage that does this? I'd have to look around a bit.
If you're just wondering what behavior the arrow keys should have, I'd expect it to work like in the Mac Finder or Windows File Explorer. Up and Down should move up and down. Right should open the selected item if it is closed. Left should close the selected item if it is open, and otherwise jump up to the containing item.
You mean another webpage that does this?
Yes, especially one that works across safari, firefox, chrome.
Here is one that seems to work, with a non-trivial javascript implementation of key binding https://www.w3.org/WAI/ARIA/apg/patterns/treeview/examples/treeview-1a/, from the Accessible Rich Internet Applications (ARIA) Working Group
keyevent processing in svelte looks like-
https://svelte.dev/repl/162005fa12cc4feb9f668e09260595a7?version=3.24.1
It would probably be a good idea to use the browser 'focus' system to track the selected row. I suppose the event handler would be in Frame.svelte, but it's rendered as a tree structure, so there'd be some complexity to ensure that if an event is triggered and there's no 'next child', the Frame component lets it propagate to the parent (this is how HTML event propagation works), which might be able to handle it, all the way up the tree.
Then there's the styling question, how the 'keyboard selection' looks. That's something we can work together on, I'd be happy to mock up some designs for how it should look. Probably it's not far off the current 'hover' appearance
Also, I agree with @asmeurer's description of UX behaviour.