Keyboard navigation

[dragontheory]

No description provided.

[dragontheory]

https://javascript.plainenglish.io/add-keyboard-shortcuts-to-your-web-app-2f9e28d1ba81
https://webdesign.tutsplus.com/articles/keyboard-accessibility-tips-using-html-and-css--cms-31966
https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Keyboard
https://www.csun.edu/universal-design-center/web-accessibility-criteria-keyboard-accessibility
https://webaim.org/techniques/keyboard/

[dragontheory]

@bob2517
Now THIS is Keyboard Kung Fu!
https://activecss.org/manual/focus-on-next-cycle.html

So, doing the whole 508 compliance thing and getting my tabindexes in order (so to speak).

(At work, not on this version) I now have list-item clicks triggering on keyupEnter (as well as normal clicks) in the left panel. Awesome!

Now that there are search results in the center panel, I don't want to have to tab all the way down the rest of this list to get over to the center results panel. I want to skip directly to the center panel results list.

This is what I have so far...

app-panel:nth-of-type(2) panel-list list-item:keyupArrowRight { < --- right arrow trigger on any of the <list-item>s
  focus-on-next-cycle: app-panel:nth-of-type(3) list-item; < --- skip to first <list-item> in the center panel 
}

But it's not working! Does it not see that it is a list? Could it be that they are custom elements?