Tinykeys 2

[jamiebuilds]

Opening this to track some thoughts about a potential next version of this package

Specifically I want to push developers to make more accessible keyboard shortcuts.

• Declare keyboard shortcuts directly on elements (in the general case)
  • Only visible & focusable & clickable elements
• Display the shortcut on the clickable element

I'm certain there are edge cases to this, but I think you should have to opt-out of these requirements.

Draft API

In React terms, it would look something like this:

<TinyKeys
  // tinykeys props
  binding="$mod+KeyS" bindingLabel="$mod+S" 
  // button props
  as={Button} onClick={save}
>
	Save
</TinyKeys>

<button>
  Save
  <kbd>Ctrl+S</kbd>
</button>

Save Ctrl+S

By putting the keyboard shortcut on the clickable element you know how the two types of interactions are related

I don't want to make this library very React specific though.

[sassanh]

Thinking about ideas for the potential next version, it would be nice if developers can decide whether they want to have the shortcut key on all buttons/etc all the time, have it only until it is used for the first time (as soon as you hit ctrl-s for the first time, it is not displayed anymore, there is an option to reset all hints), show them only when a specific modifier is held, show them only inside a customizable tooltip, a combination of these options (when applicable), or not show them at all.

[jamiebuilds]

@sassanh To do that reliably you'd need to store data server side

[sassanh]

Parts of it need a storage in the client side, we can let the user decide whether they want to store it in the cookies, the local storage or the server. In order to use those parts, users should provide the storage. It should be as simple as saving a string somewhere, and initializing it with that same string. The user needs to write something like this:

tinykeys.initialize(JSON.parse(localStorage.getItem('myapp-tinykeys')));

tinykeys.onChange((state) => {
  localStorage.setItem('myapp-tinykeys', JSON.stringify(state));
})

[sassanh]

Or one may store it in server as you suggested:

tinykeys.initialize(JSON.parse(await fetch('x.com/tinykeys-state', {headers: {oauthToken}})));

tinykeys.onChange(_.debounce((state) => {
  fetch('x.com/tinykeys-state', {body: JSON.stringify(state), headers: {oauthToken}});
}, 1000))