Keyboard shortcut support

[eppfel]

A few apps have awesome keyboard shortcuts, which makes it super easy and fast to use nextcloud. I think we should define standards for nextcloud, so the shortcuts are consistent.

Additionally It would be nice to have a current shortcut overview help like github does it.
(Try it by pushing the ? key)
Could this work as an app?

---

Keyboard shortcuts proposal

Advised general shortcuts

Shortcut	Action
r	Reload messages / feed
▶︎ / j / n	Next item / file
◀︎ / k / p	Previous message / item / file
del	Delete message
o / enter	open Item
q	Focus internal search
u	Toggle read/unread
s	Toggle Star (flag) message
c	create item
esc	close menu

Items can be mails, files, folders, etc., if not stated otherwise

Shortcuts/combinations that should be avoided

• Combinations with ctrl and cmd in general
• ▼ and ▲, because of interference with scrolling

Undecided shortcuts from News App

Maybe to special to generalize them

Shortcut	Action
e	expandItem
i / l	toggleStar
h	toggleStar && scrollToNextItem
f	nextFeed
d	previousFeed
c	previousFolder
a	scrollToActiveNavigationEntry
v	nextFolder
shift + a	markAllRead

Keybaord shortcuts: actual state

Files App

Shortcut	Action
ctrl/cmd + n	new folder
ctrl/cmd + shift + n	new file
esc	close menu (while new file context menu is open)
up/down	select file/folder
enter	open file/folder
delete/backspace	delete file/folder
ctrl/cmd + f	focus search field
esc	close menu

Mail App

Shortcut	Action
r	Reload messages
◀︎	Previous message
▶︎	Next message
s	Star (flag) message
u	Toggle read/unread
del	Delete message

News App

Shortcut	Action
j / n / ▶︎	scrollToNextItem
k / p / ◀︎	scrollToPreviousItem
u	toggleUnread
e	expandItem
s / i / l	toggleStar
h	toggleStar && scrollToNextItem
o	openLink
r	reloadFeed
f	nextFeed
d	previousFeed
c	previousFolder
a	scrollToActiveNavigationEntry
v	nextFolder
q	Focus search
shift + a	markAllRead

Todo:

• collect the shortcuts that are already available
• general: improve tabindex
• general: shortcuts for navigation / menu
  • jump to apps menu
  • jump to sidebar
  • jump to settings menu
  • select menu point (sidebar/apps/settings) with arrow keys
• add a dedicated page in the documentation
• files app: add file option (maybe distinct issue)
  • rename
  • open and focus details
  • share (is an essential feature and should be able to be directly executed on a selected file)
  • descend into newly created folder by clicking enter again [New folder creation flow: descend into newly created folder by clicking enter again #1905]
• contacts app
• calendar app [[Feature Request] Keyboard support calendar#157]
• gallery app
• ?app for a helper listing shortcuts in the current view

[MariusBluem]

...to make something great again also reminds me on this nice guy with the fancy haircut 😜

[eppfel]

@ChristophWurst Could you post/link the mail shortcuts?

[ChristophWurst]

Shortcut	Action
r	Reload messages
◀︎	Previous message
▶︎	Next message
s	Star (flag) message
u	Toggle read/unread
del	Delete message

[eppfel]

So, I just started implementing a proof-of-concept app for this "keyboard shortcut helper". Github uses facebox, which was not maintained for years. Are there modals in nextcloud? The only one I can think of, is in the first run wizard.

And what other apps besides mail use shortcuts, yet? I am not aware of any other. Maybe we postpone this, until our Design Guide is ready.

[MorrisJobke]

Are there modals in nextcloud? The only one I can think of, is in the first run wizard.

There are, but they build on an old version of jQuery UI and we try to get rid of this. Beside that these are dialog based modals (with buttons to accept or decline the stuff).

[eppfel]

I found the shortcuts of the files app, but not any other ones. ⏫
I'll open respective issues in the contacts/calendar/gallery apps. Any other apps that are essential?

Before we jump into action (see todos ⏫ ), we should develop an ideal/desired state, so shortcuts are consistent over apps and we don't have conflicts/collisions between apps and general shortcuts (navigation/search).
I'd like @nextcloud/accessibility opinion on this, too.

[phsc84]

In IE11 none of the above listed "Keyboard shortcuts: actual state" worked in the Files app on Nextcloud 10.0.1. Is this an IE11 problem or do I something wrong?

Nevertheless, I'm not sure, if backspace should trigger the "delete file/folder" action. This could lead to unintentionally deleted files (ok, we have a trashbin, but it still can be annoying).

Edit:
Just tried in Chrome and the same as with IE11: none of the shortcuts worked...

[eppfel]

@PhSc: mh, movin in the list and open works on my side, but not the rest. Maybe this is something for a dedicated issue.

[jancborchardt]

Also cc @BernhardPosselt as the News app was the first app with shortcuts like this. @BernhardPosselt can you post the list of the News app shortcuts?

Where do we have further shortcuts? cc @georgehrke @raghunayyar @tcitworld for Calendar, @Henni @irgendwie for Contacts & Notes, @oparoz for Gallery.

[skjnldsv]

@jancborchardt don't think we have shortcuts on contacts.

[ccoenen]

Regarding the suggestions in the original post: I'd not overwrite Ctrl+N it's a browser default for new window in all browsers I know. Ctrl+Shift+N is "get back the most recently closed window" at least in firefox. Some browsers also prevent you from overriding their shortcuts. This is the Case for Ctrl+R in either chrome or firefox, it applies to Ctrl+N in firefox.

up/down keys should only be touched if we're 100% positive that we do not break scrolling along the way. I guess this is why most apps default to vi-style move keys.

I am also against overriding Ctrl+F - personally I use in browser text search all the time also in Nextcloud. Wouldn't want to lose that. (Edit: turns out I didn't use it in Nextcloud, yet, as it's already overridden)

[ccoenen]

Backspace is also a bad choice for shortcuts. It is "back" in all the browsers I know. At least on windows.

[eppfel]

@ccoenen So far, we just collected the current state. I can only agree with your points (although Chrome has dropped backspace for cmd+◀︎, but del is sufficient for us)

I suggest working on the basis of the News/Mail App: Check if the user is not in an input/textarea/... and only then perform actions on key inputs (mainly) without modifier keys.

• News App: news/js/gui/KeyboardShortcuts.js Awesome work by @BernhardPosselt
• Mail App: @ChristophWurst Can you point us to the source code?

I made a proposal in the OP, please review: @nextcloud/accessibility @nextcloud/designers

[ChristophWurst]

https://github.com/nextcloud/mail/blob/52810c7b799304a7cf116abc8b13d0a4973110c0/js/views/foldercontent.js#L155-L199 is where we handle our keyboard shortcuts.

[eppfel]

@nextcloud/designers I know everyone is down, because of the guy with crazy hair being president and all, but I need some feedback on my proposal, so we can make dedicated PRs:
So, What do you think?

Advised general shortcuts

Shortcut	Action
r	Reload messages / feed
▶︎ / j / n	Next item / file
◀︎ / k / p	Previous message / item / file
del	Delete message
o / enter	open Item
q	Focus internal search
u	Toggle read/unread
s	Toggle Star (flag) message
esc	close menu

Items can be mails, files, folders, etc., if not stated otherwise

Shortcuts/combinations that should be avoided

• Combinations with ctrl and cmd in general
• ▼ and ▲, because of interference with scrolling

I'm not 100% on q and s though. s could be search, too.

What do you think about shortcuts for jumping between navigation (sidebar/apps/...)?

Any use-cases we need to add?

[ccoenen]

f could be "find" -> focus search

[tyrylu]

I am only a little bit worried about interactions between del and focused edit controls. It will probably be okay, but do not forget to test this.

[siccovansas]

@skjnldsv just merged the very useful functionality to tag multiple selected files at once in #28133 which closes #10674 🎉💛
!

A great addition to this would be to have keyboard shortcuts so you can quickly navigate files using up and down arrows to (de)select files. I must say that Gmail's keyboard shortcuts work really well (see this page for all its keyboard shortcuts). On a daily basis I use the up and down arrows to (de)select emails and use 'l' to add a label(/tag) or '#' to delete the selected emails. Such keyboard shortcuts would make Nextcloud Files much more powerful as you can quickly organize your files using only your keyboard.

For other reference, see the keyboard shortcuts that Signal uses.

[skjnldsv]

I think having this would be nice, but would require a proper API for every app to register a list of said shortcuts. So they are consistent across Nextcloud

If anyone wants to draft an RFC with a proposal, it would be cool :)
This thread is a bit messy 🙈