Keyboard shortcuts

Having keyboard support is really important to ClassTranscribe in terms of accessibility, and useful to a large variety of users. Make sure that all the keyboard shortcuts you work with are

• properly documented in code
• have ARIA information available to the user
• trigger the redux state/action in the same way as normal mouse actions
• are known to the user - either via a label or via some Shortcuts component

Event Flow

While it's not very standardized, it's typical to use dispatch() to trigger a change in the global redux state on each keyboard action. This way the same action can be triggered in many different ways. Here is a (not exhaustive, but feel free to add on) list of some of the files with the state triggers:

• src/components/CTPlayer/Player/index.js
• src/components/CTMarkdown/MarkdownEditor/ace/ace-shortcut.js
• src/components/CTPlayer/Player/index.js
• src/screens/EPub/index.js
• src/screens/Watch/Utils/keydown.control.js

After that you have to ensure that the updated redux state is the only source of truth on those UI actions. This means relying less on local state and linking those actions with the UI. Make sure to connect() your props correctly and use that to trigger things right.

For debugging it helps to use the React Browser Extension to capture the entire global state from <Provider /> and seeing if the keyboard actions updated the state accordingly, and if that happened, if the react components made use of that state correctly.