Keyboard navigation: a new prototype

[Yakov]

Hello everyone,

recently I figured that I really want to implement some nice keyboard navigation (aside the JumpKeysPlugin) while keeping an eye on accessibility, too. That proved to be a long-term project, but I think I now have a prototype that can be helpful, so let me share it:

https://a11y.tiddlyhost.com

I'm not 100% satisfied about the behavior on tiddler click (sometimes scrolling to the title is not convenient, so I'll be thinking about when to prevent it), but other than that (and maybe the selected tiddler styling), it looks to me as a good candidate to be included into the future core versions.

Let me know if you find it helpful or if you have any objections to adding similar functionality to the core.

Best regards,

Yakov

[Yakov]

Just want to point that the plugin got much more mature, now there are scopes (global/tiddlerEdit/tiddlerFocus) for commands, and one can set different hotkeys for those scopes (as an example of a global command, there's an implementation of saveChanges command, which can substitute SaveByHotKeyPlugin). Various other features were added, like ctrl+↑/↓ to jump between edit fields, esc to move focus from an in-tiddler element to the tiddler itself, etc.

There's still a lot to do (for instance, support of edit context commands, so that one can "ctrl+b to wrap selected text with ''...''", or means to quickly navigate between "areas" like backstage, main menu, or tiddlers), but it already makes my user experience much more pleasant, so you may want to give it a try.

(by the way, I've also updated YourSearchPlugin to make it compatible with DarkModePlugin and KNP)

пятница, 18 июля 2025 г. в 22:51:10 UTC+3, Yakov:

[Roma]

Dear Yakov,

Many thanks. I still find this kind of plugin very useful as it is related to productivity. I could try KeyboardNavPrototype, so here are my comments.

• I love the keyboard access to menu commands (edit, cancel, focus, etc.) or fields in a tiddler. [Shift+Tab], [Tab] to reverse the cycle or go to fields in a tiddler, [Esc] to shift menu access / fields in a tiddler.
• I use a lot JumpKeysPlugin. Both plugins are companions.
• I didn't catch the focus trick. ctrl+↑/↓ just puts me page up or down. Since for first release I never could find FocusTiddlerPlugin (the reason why I didn't comment). I use CollapseTiddlersPlugin.
• [Ctrl+Shift+d] or [d] just proposes me to suppress the tiddler when in edit mode, otherwise nothing.
• I use TW almost always in "Tab mode" (TiddlersBarPlugin). This is why JumpKeysPlugin is, somewhat, more useful for me. But yes, the possibility to access commands, panels (areas)... was missing.

May be I forgot some comments. I will let you know in this case. I am very enthousiastic! I wish you the best...

Roma -

[Yakov]

Hi Roma, thanks for the feedback!

The ctrl+↑/↓ are set to do 2 types of navigation:

1. If you select a tiddler (for instance, by clicking on it, but not on a button or an input inside it), it shifts selection to the next/prev tiddler;

2. If an input is in focus (for instance, an editor of title/text/tags), it shifts focus to the next editor. This was done primarily because with chkInsertTabs: true, you can't navigate out of text editor (as tab/shift+tab are "blocked").

> [Ctrl+Shift+d] or [d] just proposes me to suppress the tiddler when in edit mode, otherwise nothing.

Not sure what you mean by "suppress", doesn't it delete the tiddler?

среда, 10 сентября 2025 г. в 12:14:17 UTC+3, Roma:

[Yakov]

Another update includes:

• self-documentation (KeyboardShortcuts shadow/<<keyboardShortcuts>> macro);
• hotkeys to jump to tiddlers (t)/sidebar (s)/main menu (m)/backstage (b) + ability to add custom (see self-doc);
• skip to content link (hidden, gets into focus on first Tab) + hidden link to KeyboardShortcuts after it;
• some minor improvements.

PS Roma, I got what confused you about the d/ctrl+shift+d shortcuts, see the updated intro.

Presumably, I'll start merging the plugin into JumpKeysPlugin soon.

суббота, 13 сентября 2025 г. в 16:50:19 UTC+3, Yakov:

[Roma]

This is great! Works well. Thank you for all... Merging with JumpKeyPlugin will make a key plugin ;) :)

[Roma]

I notice that the Plugin prevents me from selecting text when not in edit mode: the highlight is not maintained...

[Yakov]

Could you be more specific on how to reproduce the issue (steps, expected behavior, actual one)? If it's reproducible on a11y.tiddlyhost.com, please describe for it; otherwise, this needs investigating interaction with other extensions, maybe listing all the installed ones will be a start. Finally: did the behavior changed to the unwanted one on some update of KNP, or you just have noticed the problem recently, while it may have been there since the first version you've tried?

воскресенье, 28 сентября 2025 г. в 14:24:19 UTC+3, Roma:

[Roma]

Yes.

• When I disable KeyboardNavPrototype the issue disappears.
• In a11y... same effect: when I highlight (select) text, the selection does not retain.
• I didn't change anything to KeyboardNavPrototype.
• I have other plugins of course and could give you the list but seem to me alright because no issues between them...
• My OS is Pop OS on Linux. It has native shortcuts but I don't see a potential relationship with mouse actions.
• I use Firefox with Timimi.
• I changed the pointer device, from a graphic tablet to a tracker: same issue.
• As a reminder, JumpKeyPlugin is installed and works well (no such issue).

As the problem remains on your a11y site, we can suppose some problematic computer caracteristics on my side. 

Let me know what you want me to do to check other parameters. Meanwhile I will try to test on a Windows system.

To be followed...

[Roma]

Sorry, forgot:

• I don't remember this issue on the previous version of KeyboardNavPrototype. May be I just didn't notice / try.
• I replaced the previous version by the latest.

[Yakov]

Right, no need for further testing, it's Firefox that behaves differently, thanks for the report! I'll debug this somewhat soon (most likely in a couple of days).

четверг, 2 октября 2025 г. в 14:46:04 UTC+3, Roma:

[Wolfgang]

Hi, I use Palemoon with Tiddlymoon on Windows. The shortcuts do not work. Instead Palmoon functionality is invoked...

Regards, Wolfgang

[Yakov]

Roma, check v0.17.8, for some reason I've commented out the check of noTextIsSelected and it happened to behave differently in Chromium-based browsers and Firefox; I've returned the check in the new version.

Wolfgang, which hotkeys/actions do you have problems with?

• Are there any problems with the global "jump to " shortcuts or scoped "an editable is in focus" actions "jump to the next/prev editable"?
• In 0.17.8, I've fixed a similar bug for commands with "a tiddler is in focus" scope (in Chrome, if I set ctrl+f shortcut to such a command, pressing ctrl+f caused both default browser action and the command, now just the command), does it help in your cases?
• If any problems with the other commands/actions, please provide an example.

суббота, 4 октября 2025 г. в 07:57:15 UTC+3, Wolfgang:

[Wolfgang]

Hi Yakov,

sorry for beeing unprecise.

The global shortcuts work.

I don't understand what "a non-editable inside a tiddler is in focus" means and <esc> should do.

Using the standard "empty" TWc v2.10.2:

• "d" does not delete tiddler (which is better so, I think)
• ctrl+shift+d in edit mode brings "new bookmarks" in Palemoon
• ctrl+b brings "organise bookmarks" in Palemoon
• ctrl+l brings "open web link" in Palemoon

Using my customized TWc, some shortcuts do not make sense:

• e.g. arrow-up/-down (have SinglePageModePlugin ), global "t" (only have tiddlers), global "b" (do not use backstage), global "s" (do not use backstage)

But that is OK for me. What would be nice:

• global "m" opens  MainMenu, where arrow-up/-down selects menu entries and <enter> opens menu
• global shortcut (e.g. "h") to open history (HistoryPlugin), same behavior for arrow-up/-down to select/open entries
• global shortcuts to go to next/previous tiddler in history
• global shortcuts for new tiddler, new journal, references, fields...
• in edit mode shortcuts for "done", "cancel"...

I attached my customized TWc v2.10.2.

Many thanks,

Wolfgang

[Roma]

• For my part, I confirm the text selection issue is fixed. 
• Moreover, I confirm the plugin is handy and works overall. 
• However, B worked previously but strangely no more now. 
• S worked when Side panel is open but not anymore now (I use a button to "fold" it by befault, like backstage, it to get space and mainly to get rid of the long list of tiddlers which gives huge page height and makes page navigation top / bottom too heavy for nothing). 
• (I have no MainMenu.) 
• Ctrl+B Fold / Unfold Bookmarks panel, which is handy. 
• T worked if I remember well but has no effect now, which I regret just a little because Ctrl+J is so handy! 
• Other shortcuts have no effect. 
• So, to sum up, I appreciate the easy access to the toolbar menu through TAB. 
• Ctrl+TAB shifts to the navigator tabs. 
• May be what I see useless and as a kind of "pollution" are the buttons (the scopes?) appearing to choose the Keyboard Shortcuts reminder or the Jump to Main Content, unless I missed something.

Many thanks too, Yakov!

R -

[Yakov]

Hi Wolfgang,

I haven't reproduced the "browser defaults are used" issue in Firefox (I don't have Palemoon), but I've added a probable fix in 0.17.9, give it a try.

>  I don't understand what "a non-editable inside a tiddler is in focus" means and <esc> should do.

In a tiddler, you can have various focusable elements (links, buttons, inputs like from the <<option>> macro, etc). You can move (focus) from one to another with Tab/Shift+Tab (standard browser behavior), but if you do, it's way too slow to get back to the state when "the tiddler itself" is in focus and the shortcuts work (for instance, Enter to start editing). So I added the behavior when pressing Escape gets you to that state. "Editables" are inputs, textereas, etc, while "non-editables" are links, buttons, and some others.

> "d" does not delete tiddler (which is better so, I think)

Like discussed earlier, it currently only works if deleteTiddler command is in the ToolbarCommands::ViewToolbar.

> some shortcuts do not make sense

For most of the shortcuts that doesn't fit your needs, you can remove it similarly to what is described in KeyboardShortcuts##Customizing shortcuts – just use an empty array like this:

config.commands.collapseTiddler.hotkeys = []

For now it's not very convenient, though, as the KeyboardShortcuts for now mixes command names and descriptions, for a description the command name should be found in the code, and non-commands can't be customized like that (since otherShortcuts are not accessible outside the plugin code yet). I'll probably improve these aspects once I start adding UI to customize shortcuts.

[for this section, see the PS below first]

> global "m" opens  MainMenu, where arrow-up/-down selects menu entries and <enter> opens menu

Note that you can use Tab/Shift+Tab and Enter already (the plugin makes the the focused one visible and focuses the first one once you open a popup – same for references, etc). But yes, supporting arrows to navigate and Escape to close is also planned.

As for "m" for your type of MainMenu, you can first set (again, see KeyboardShortcuts)

config.macros.keyboardShortcuts.jumpableAreas["main menu"] = { selector: '#topMenu [title="menu"]', keys: "KeyM" }

This will overwrite the current global "m" shortcut and focus your button. Unfortunatelly, it won't "click" the button, so you'll have to press Enter for now.

Likewise, for history, you can use title="history", i.e.

config.macros.keyboardShortcuts.jumpableAreas["history"] = { selector: '#topMenu [title="history"]', keys: "KeyH" }

title="back" and title="forward" for next/prev tiddler...

Let me show how I decide what selector to use for "global shortcuts for new tiddler":

1. I open browser inspector/dev tools (usually ctrl+shift+I);
2. I click the button on the left to the "Inspector" tab (ctrl+shift+c in Firefox, not sure if it works this way in Palemoon);
3. I click the target element (i.e. the "new tiddler" button) – it will be "selected" in the inspector;
4. Finally, I have to decide on the path that will be specific enough for this element. This may be tricky for a non-developer, but here are 2 possible shortcuts:
   1. If it has a specific title, like in this case, I can use just the title (attribute) selector: selector: '[title="Create a new tiddler"]'
   2. If it has not, I can right click in the inspector and copy..CSS path. It will give a very verbose selector like this: 'html body div#contentWrapper div#displayArea div#tiddlerDisplay div#tiddlerKeyboardShortcuts.tiddler.shadow span.viewer a.button', and sometimes it will work.. but not in this case, unfortunatelly: first, the div#tiddlerKeyboardShortcuts part is too specific (will work only in the KeyboardShortcuts tiddler), and the span.viewer a.button part is too inspecific (you can see in the inspector that there are other span-s with class viewer with a inside that has class button – for instance "edit"), that's why I used the attribute selector and omitted the rest. Still, it can help in some cases.

Let me know how it goes, I'll consider improving the descriptions for the customizing docs.

PS Ah, sorry, the trick with jumpableAreas won't probably work exactly as I've described. The problem is, it's designed for the areas with a selectable things inside it (like normal MainMenu), while in this case the areas has no children, they have to be selected themselves, and also a "click"/enter is needed to activate them. I'll probably add such a customization feature in the next version.

> in edit mode shortcuts for "done", "cancel"...

This is readily available, please let me know what's unclear in KeyboardShortcuts##Customizing shortcuts, I'll fill the gaps.

Again, for now all these customizations require creating a plugin. At some point I'll probably make it possible to do this with just UI and options, but not very soon, I guess.

воскресенье, 5 октября 2025 г. в 07:55:52 UTC+3, Wolfgang:

[Yakov]

Roma, thanks for the feedback, it's a bit too much to process both Wolfgang's and yours at once, but I have yours "marked as todo", so I'll return to it at some point.

I'll be thankful if you retest with the latest version and, if there are any changes, re-post your feedback in the up-to-date state (in that case, I'll ignore the previous message when I come to review it).

воскресенье, 5 октября 2025 г. в 16:56:52 UTC+3, Roma:

[Wolfgang]

Hi Yakov,

many thanks for your detailed explanations!

<Esc> and "d" are clear now.

Unfortunately, ctrl+b etc. still open Palemoon standard functionality.

I managed to override "d" in making a tiddler "MyCustomShortcuts", tagging it "systemConfig" and placing "config.commands.deleteTiddler.hotkeys = []" there.

I will  further experiment a bit with custom shortcuts...

Best regards,

Wolfgang

[Yakov]

Hi Wolfgang, I've released 0.18.0, which also supports clickableControls beside jumpableAreas – the customization is basically the same, so check my explanations above and try it. "new tiddler" is included into the plugin itself.

As for Palemoon, looks like it is its internal thing. As it began as a fork of an early Firefox, it uses old ways to handle hotkeys, and there's not much we can do from TW itself (from any web app) to prevent default handling (as I understood from a quick research with AI). So basically your best option is to customize either browser shortcuts or in-TW shortcuts (it will work no matter what).

воскресенье, 19 октября 2025 г. в 10:34:40 UTC+3, Wolfgang:

[Roma]

Hi, Yakov.

Same thing for me since my previous test. To tell the truth, I disabled the plugin mainly because I can no longer save a tiddler with Ctrl+Enter (Ctrl+S opens a window for me to choose a place where to save TW). Also, - but it's my special case - my self-made keyboard allows me to do what a mouse do. Access to menus / links is thus almost as handy as shifting with Tab clics... 

But I was enthusiastic with a previous version: B worked, I could save a tiddler if I remember well, etc.

Nonetheless, I'm convinced that the plugin has a great future. I will test custom shortcuts asap...

Many thanks -

R -