diff --git a/_shared_assets/static/custom.css b/_shared_assets/static/custom.css index 958b3a62019..329c5e8e306 100644 --- a/_shared_assets/static/custom.css +++ b/_shared_assets/static/custom.css @@ -65,6 +65,16 @@ h6 { background: rgba(0, 130, 201, 0.1) } +/* kbd elements pick up the red code text color (#e74c3c) which gives + ~3.82:1 on white — below the 4.5:1 required by WCAG AA / BITV 9.1.4.3. + Override to a darker red (~5.4:1) and darken the border so the + key outline meets the 3:1 non-text contrast requirement. */ +.rst-content kbd, +kbd { + color: #c0392b !important; + border-color: #767676 !important; +} + /* Inline code — RTD uses #e74c3c on white which gives ~3.82:1, below the 4.5:1 required by WCAG AA / BITV 9.1.4.3. Use a darker shade. */ .rst-content code, diff --git a/admin_manual/desktop/troubleshooting.rst b/admin_manual/desktop/troubleshooting.rst index 210d7768898..13e0cccb737 100644 --- a/admin_manual/desktop/troubleshooting.rst +++ b/admin_manual/desktop/troubleshooting.rst @@ -170,7 +170,7 @@ Another way to obtain the client log file: 1. Open the Nextcloud Desktop Client. -2. Press F12 or Ctrl-L on your keyboard. +2. Press :kbd:`F12` or :kbd:`Ctrl+L` on your keyboard. The Log Output window opens. diff --git a/developer_manual/basics/front-end/js.rst b/developer_manual/basics/front-end/js.rst index 6f8350ffe9d..a40a78a6176 100644 --- a/developer_manual/basics/front-end/js.rst +++ b/developer_manual/basics/front-end/js.rst @@ -227,6 +227,6 @@ Nextcloud wide. You can check the setting with the following function which retu 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, +If that is the case, no additional shortcuts shall be registered by any app. Only :kbd:`Space` +to toggle checkboxes and :kbd:`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/release_notes/previous/upgrade_to_25.rst b/developer_manual/release_notes/previous/upgrade_to_25.rst index 3c231a9235b..64ff634ef40 100644 --- a/developer_manual/release_notes/previous/upgrade_to_25.rst +++ b/developer_manual/release_notes/previous/upgrade_to_25.rst @@ -35,8 +35,8 @@ A global option to disable keyboard shortcuts was added to the accessibility set Since it heavily depends on the screenreader and tools that you use if Ctrl and/or Alt or other things are okay to use or not and maintaining a more detailed list is too much effort, we went for a global on/off switch. Apps can use this public javascript API call to determine whether the user used the opt-out: ``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/links are okay to be used. +If that is the case, no additional shortcuts shall be registered by any app. Only :kbd:`Space` to toggle checkboxes and +:kbd:`Enter` to submit the currently active buttons/links are okay to be used. See `Github issue #34081 `_ and :ref:`JavaScript Frontend documentation `. Back-end changes diff --git a/user_manual/talk/call.rst b/user_manual/talk/call.rst index 32cc4e58545..91bb0099ac6 100644 --- a/user_manual/talk/call.rst +++ b/user_manual/talk/call.rst @@ -152,8 +152,8 @@ Bottom bar of the call view offers media controls, layout settings and other fea :width: 400px Use the microphone and camera icons to mute/unmute your microphone and enable/disable your camera. -You can also use the keyboard shortcuts ``M`` to mute/unmute your microphone and ``V`` to enable/disable your camera. -Use the space bar for push-to-talk: holding space temporarily unmutes you while muted, or temporarily mutes you while unmuted. +You can also use the keyboard shortcuts :kbd:`M` to mute/unmute your microphone and :kbd:`V` to enable/disable your camera. +Use :kbd:`Space` for push-to-talk: holding space temporarily unmutes you while muted, or temporarily mutes you while unmuted. Reactions ~~~~~~~~~ @@ -168,10 +168,10 @@ Every participant will see the emoji rising from the bottom of their call screen Raise hand ^^^^^^^^^^ -Clicking ``Raise hand`` will notify moderators and show an icon next to your name. This is also available via the keyboard shortcut ``R``. +Clicking ``Raise hand`` will notify moderators and show an icon next to your name. This is also available via the keyboard shortcut :kbd:`R`. Full screen ^^^^^^^^^^^ Resizes your browser window or the Talk Desktop client to full-screen mode. -Also available via the keyboard shortcut ``F``. Press ``ESC`` to return to the regular view. +Also available via the keyboard shortcut :kbd:`F`. Press :kbd:`Esc` to return to the regular view. diff --git a/user_manual/universal_access.rst b/user_manual/universal_access.rst index 3c70f047155..89805cb5647 100644 --- a/user_manual/universal_access.rst +++ b/user_manual/universal_access.rst @@ -27,12 +27,12 @@ Navigating via keyboard You can navigate the web interface with a keyboard, just as you would with a mouse: -* ``Tab`` and ``Shift + Tab`` to move between elements -* ``Enter`` or ``Space`` to activate or open the element (depending on the type of element) -* ``Escape`` to be used to close modals, popover menus, and file viewers -* ``Left arrow`` and ``Right arrow`` to navigate between photos in the viewer -* ``Ctrl + F`` to focus the search field -* ``Ctrl + S`` to save changes in editors like Nextcloud Text +* :kbd:`Tab` and :kbd:`Shift+Tab` to move between elements +* :kbd:`Enter` or :kbd:`Space` to activate or open the element (depending on the type of element) +* :kbd:`Escape` to be used to close modals, popover menus, and file viewers +* :kbd:`Left arrow` and :kbd:`Right arrow` to navigate between photos in the viewer +* :kbd:`Ctrl+F` to focus the search field +* :kbd:`Ctrl+S` to save changes in editors like Nextcloud Text For quicker navigation, we offer two "skip links" at the beginning of the document which allow you to: @@ -41,25 +41,25 @@ For quicker navigation, we offer two "skip links" at the beginning of the docume Nextcloud Talk has shortcuts which are also documented inside the settings of the app itself: -* ``C`` to focus the message input field -* ``Escape`` to unfocus the message input field to be able to use shortcuts -* ``F`` to fullscreen the chat or call +* :kbd:`C` to focus the message input field +* :kbd:`Escape` to unfocus the message input field to be able to use shortcuts +* :kbd:`F` to fullscreen the chat or call * While in a call: - * ``M`` to toggle the microphone on and off - * ``V`` to toggle video on and off - * ``Space`` for push to talk or push to mute - * ``R`` to raise or lower hand + * :kbd:`M` to toggle the microphone on and off + * :kbd:`V` to toggle video on and off + * :kbd:`Space` for push to talk or push to mute + * :kbd:`R` to raise or lower hand Nextcloud Mail has shortcuts as well, also documented inside the settings of the app itself: -* ``C`` to compose a new message -* ``Left arrow`` to switch to a newer message -* ``Right arrow`` to switch to an older message -* ``S`` to toggle a message as favorite -* ``U`` to toggle a message unread -* ``Del`` to delete a message -* ``Ctrl + Enter`` to send -* ``R`` to refresh and load new mails +* :kbd:`C` to compose a new message +* :kbd:`Left arrow` to switch to a newer message +* :kbd:`Right arrow` to switch to an older message +* :kbd:`S` to toggle a message as favorite +* :kbd:`U` to toggle a message unread +* :kbd:`Del` to delete a message +* :kbd:`Ctrl+Enter` to send +* :kbd:`R` to refresh and load new mails Included themes