Phocus: Todo List Example

Phocus manages actions, hotkeys, and focus for poweruser-friendly, accessible webapps.

This is an absolutely pared-down example of how to use Phocus. Phocus is not intended to be used stand-alone like this; it's intended to be paired with the frontend framework of your choice. A wrapper for react is available: react-phocus.

Things to note:

• Try using the arrow keys, or j and k, to move between list items
• Todo items are focusable, and when focused, you can use contextual hotkeys to manipulate them; try 's' to start a task, or 'backspace' to delete one.
• Use Alt+n to create a new item by focusing on the input
• For todo items, hover and focus have been unified. This is scary and dangerous, but useful for allowing keyboard shortcuts to apply to the object under the mouse. Otherwise, one item can have focus while another has hover, and it's unclear which will receive the action. Pulling this stunt is optional in Phocus, and not the default.
• This text has the same phocus-id as one of the todo items, but phocus never mistakenly focuses on it instead.
• In the source, none of these buttons have text; empty buttons are given default labels by Phocus.
• Buttons are given aria labels and tooltips which describe their behavior, and any relevant keyboard shortcut. A screenreader will read the × button as "Delete (backspace)".

Read more about how to use Phocus in its README on Github. View the source for this example here.