CSS-Tricks / coding-fonts

https://coding-fonts.css-tricks.com/
MIT License
461 stars 67 forks source link

FEAT: Simple keyboard navigation. #73

Closed elfsternberg closed 3 years ago

elfsternberg commented 3 years ago

While playing with the site, i found what I really wanted was to be able to navigate through the list without having to click on each view individually. This handler adds controls so that, in a desktop environment, hovering over the navigation block activates keyboard navigation, and 'n' and 'p' take you to the 'next' and 'prev' fonts in the list.

chriscoyier commented 3 years ago

Looks fun to me, I'm down to try it. We can always tweak and reevaulte if we get feedback on it.

chriscoyier commented 3 years ago

Seems a smidge "undiscoverable" as a feature, so if you have a way to explain it somehow someway on the site, that would probably be good. Also maybe up-key and down-key?

elfsternberg commented 3 years ago

Yeah, I don't have a good answer for that. I chose the 'n' and 'p' keys because you don't have any forms on the page, so using them doesn't interfere with input, and the 'up' and 'down' keys do scrolling things that I don't want to break. Maybe an onhover tooltip that says '"n' and 'p' for 'next' and 'previous' also work?" I'll look into it. (Sorry, gotta do my $DAYJOB right now...)

On Fri, Dec 4, 2020 at 9:43 AM Chris Coyier notifications@github.com wrote:

Seems a smidge "undiscoverable" as a feature, so if you have a way to explain it somehow someway on the site, that would probably be good. Also maybe up-key and down-key?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/chriscoyier/coding-fonts/pull/73#issuecomment-738920685, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAA37ZDDPOPQV7J7GNACB3TSTENUHANCNFSM4UMG36IQ .

landjonathan commented 3 years ago

As long as we're doing keyboard shortcuts, I think it could be nice to add shortcuts to switch languages and themes, too. That'll be enough to justify a modal with all the shortcuts, with a small icon-button in the corner. I'll try to whip something up tomorrow.