From 9ea91c26aa7beaf3cc727bc93dc2691222e4a738 Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Fri, 16 Sep 2022 09:48:34 +0200 Subject: [PATCH] Document disabled keyboard shortcuts Signed-off-by: Joas Schilling --- developer_manual/basics/front-end/js.rst | 18 ++++++++++++++++++ developer_manual/design/layoutcomponents.rst | 13 +++++++------ 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/developer_manual/basics/front-end/js.rst b/developer_manual/basics/front-end/js.rst index 60432698aeb..17d69ec51e7 100644 --- a/developer_manual/basics/front-end/js.rst +++ b/developer_manual/basics/front-end/js.rst @@ -149,3 +149,21 @@ function Now state will contain the provided state which you can use as any variable. It is as simple as that. + + +Keyboard shortcuts +------------------ + +In case you want to improve your user experience with keyboard shortcuts, make sure +to not overwrite browser, operating system and other Nextcloud wide shortcuts. +Also there is an accessibility setting for users to opt-out of **any** keyboard shortcuts +Nextcloud wide. You can check the setting with the following function which returns a boolean +(available in Nextcloud 25 and later): + +.. code-block:: js + + OCP.Accessibility.disableKeyboardShortcuts(); + +If that is the case, no additional shortcuts shall be registered by any app. Only space +to toggle checkboxes and enter to submit the currently active buttons or links are okay, +as any other shortcut might interfere with screenreaders and other accessibility tools. diff --git a/developer_manual/design/layoutcomponents.rst b/developer_manual/design/layoutcomponents.rst index f26bdbcb672..c26461b6f0c 100644 --- a/developer_manual/design/layoutcomponents.rst +++ b/developer_manual/design/layoutcomponents.rst @@ -11,9 +11,9 @@ Navigation :alt: Contacts navigation -The left navigation provides a way for users to move around different sections of your app. +The left navigation provides a way for users to move around different sections of your app. -`Vue component for the app navigation `_. +`Vue component for the app navigation `_. The navigation consists of 4 main elements: @@ -60,7 +60,7 @@ Top-level navigation entries ideally have a suitable icon left next to them. Opt * a 3 dot action menu (seen in Mail) * a counter (seen in Contacts and Mail) -A sublevel of navigation is possible, but can lead to entries being hard to discover. It is only advised if there is actually a hierarchy like for folders in Mail or News. +A sublevel of navigation is possible, but can lead to entries being hard to discover. It is only advised if there is actually a hierarchy like for folders in Mail or News. `Navigation entries Vue component `_. @@ -91,11 +91,12 @@ Settings The user-specific settings for your app may be shown in a settings modal, which can be accessed through a settings entry at the bottom of the navigation. Try to keep the settings to a minimum, as too many configurable options can be a burden to the user. If no settings are needed for the app, that is great and the settings modal can be omitted. Within the modal, categorizing your settings can sometimes offer a better experience if you have a lot of settings. If this is required, the categories are placed in the left of the settings modal. -You can also include a "Help" as an entry in the settings of your app and provide some simple information about your app and how to use it. Some apps like Talk and Mail also include keyboard shortcuts. +You can also include a "Help" as an entry in the settings of your app and provide some simple information about your app and how to use it. Some apps like Talk and Mail also include keyboard shortcuts, if they are not disabled by the user. +The global javascript function ``OCP.Accessibility.disableKeyboardShortcuts()`` can be used to check that. `Settings Vue component `_. -Also see: :ref:`Modal` +Also see: :ref:`Modal` .. _List: @@ -148,7 +149,7 @@ Spacing between elements in your app should be in multiples of 4px. Sidebar ------- -Details of a particular entry in your content, as well as some actions associated with it, are shown in the right sidebar. In apps where the sidebar is used, it only opens when required. The sidebar is never used in the 3-column layout (Navigation + list + content). It contains the main information and sometimes a preview of the selected item, as well as a maximum of 3 possible tabs. +Details of a particular entry in your content, as well as some actions associated with it, are shown in the right sidebar. In apps where the sidebar is used, it only opens when required. The sidebar is never used in the 3-column layout (Navigation + list + content). It contains the main information and sometimes a preview of the selected item, as well as a maximum of 3 possible tabs. `Sidebar Vue component `_.