Merge pull request #9167 from nextcloud/bugfix/noid/document-disabled…

…-keyboard-shortcuts

Document disabled keyboard shortcuts

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.

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 <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/AppNavigation?id=appnavigation-1>`_. 
+`Vue component for the app navigation <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/AppNavigation?id=appnavigation-1>`_.
 
 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 <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/AppNavigation?id=appnavigationitem>`_.
 
@@ -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 <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers/AppNavigation?id=appnavigationsettings>`_.
 
-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 <https://nextcloud-vue-components.netlify.app/#/Components/App%20containers?id=appsidebar>`_.