Keyboard controls

[codebykat]

Internal project link: p2XJRt-2DE-p2

Keyboard Control

• Panel navigation using arrow keys

The arrow keys can be used to navigate between the visible panels of the app (Tags, Notes List, Editor). While the editor is focused, Cmd/Ctrl + Enter can be used to move focus back to the notes list.

• Tab to cycle between visible panels

n.b. This note is for the Mac app but this does not work here either.

The tab key should be used to select the next responder in the Mac app which currently does not work. Tab or Shift + Tab should cycle between the search field and all visible panels. Search > Tags List > Notes List > Editor which is quite typical for a Mac app.

(With the caveat that we do expect the editor to capture tabs and arrows within the editing context)

• Develop a better idea of what is currently focused, as mentioned here.

we should maybe formalize the rules for changing focus and then see if a more elegant solution drops out. maybe there's some global (Redux) state value tracking what context we're in that changes when we enter or blur the search field…

• Make sure it's possible to navigate to the editor with a screenreader, see Web app: Unable to navigate to the note editing area with screen reader #2365

Keyboard shortcuts

• Shortcut updates

Remove "Toggle focus mode" shortcut Ctrl+Shift+F. Change search shortcut to Ctrl+Shift+F. Merge “Toggle Focus Mode” and “Toggle Notes List” into one shortcut.

• Support browser-conflicting shortcuts in Electron build where possible.

I'd like to go through and check which of the shortcuts we can use on Electron despite them having another use in browser, and add them as "shadow" shortcuts that match the app shortcuts, though they won't be the primary shortcut on Electron/web.

One example is Ctrl+N which creates a new browser window, but I believe we should be able to map it to create a new note when in the Electron app.

• Add tracks events to all keyboard shortcuts

Add a tracks event named spweb_shortcut_used with a shortcut property corresponding to the shortcut:

focus_mode, focus_search, search_next, search_previous, tag_list, open_previous_note, open_next_note, toggle_note_tag_editing, note_list, create_note, markdown, toggle_checklist, cycle_visible_panels, information_sheet, history_sheet, share_sheet

• Fix existing bugs with keyboard shortcuts On Russian keyboards, "Б" character adds a tag #2040 , Linux accent usage sometimes blocks further input #2577

Keyboard Optimisation

• Saving cursor position

Already implemented, but seems to be bugged on long notes: scroll position is restored but editor seems to lose focus.

We should also save cursor positions across sessions.

• Let's consider syncing the scroll position between editor and preview modes (Synchronize preview scroll position with monaco scroll position #2656).

• Type to search

If the notes list is in focus then typing will automatically start a search.

[codebykat]

Doing some research, found this incidental info:

Tab Trapping

By default, pressing Tab in an editable editor inserts the Tab character (or spaces depending on the indentation setting) and does not navigate to the next focusable element on the page. You can toggle the trapping of Tab with Ctrl+M on Windows and Linux and with Ctrl+Shift+M on OSX, and subsequent Tab keys will move focus out of the editor.

You can also toggle Tab trapping from the Command Palette with the "Toggle Tab Key Moves Focus" action.

https://github.com/Microsoft/monaco-editor/wiki/Monaco-Editor-Accessibility-Guide

https://github.com/Microsoft/monaco-editor/wiki/Accessibility-Guide-for-Integrators

That first page also has some info I don't totally grok around how screen readers work with the editor.