pyinstrument icon indicating copy to clipboard operation
pyinstrument copied to clipboard

HTML navigation with arrow keys

Open asmeurer opened this issue 11 years ago • 7 comments

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?

asmeurer avatar Jun 04 '14 19:06 asmeurer

I like the idea! Pull requests welcome!

joerick avatar Jun 06 '14 19:06 joerick

Do you have an example of keyboard navigation working elsewhere?

mattip avatar Aug 06 '23 08:08 mattip

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.

asmeurer avatar Aug 07 '23 06:08 asmeurer

You mean another webpage that does this?

Yes, especially one that works across safari, firefox, chrome.

mattip avatar Aug 07 '23 06:08 mattip

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

mattip avatar Aug 07 '23 08:08 mattip

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

joerick avatar Aug 07 '23 10:08 joerick

Also, I agree with @asmeurer's description of UX behaviour.

joerick avatar Aug 07 '23 10:08 joerick