search

dragontheory / D7460N-with-db

Your data your way. Fast, easy, and secure.
https://d7460n-app-with-resizer.pages.dev/
2 stars 1 forks source link

Keyboard navigation #41

Open dragontheory opened 2 years ago

dragontheory commented 2 years ago

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 commented 2 years ago

@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?