Skip to content

fix(a11y): fix contrast of keyboard shortcut labels #14831

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
skjnldsv wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix(a11y): fix contrast of keyboard shortcut labels #14831

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
183dcf3
fix(a11y): fix contrast of keyboard shortcut labels
skjnldsv May 12, 2026
74f3276
fix(a11y): use proper sphinx keyboard shortcut definition
skjnldsv May 12, 2026
b65d819
Merge branch 'master' into fix/bitv-9675-kbd-contrast
skjnldsv May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions _shared_assets/static/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion admin_manual/desktop/troubleshooting.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
4 changes: 2 additions & 2 deletions developer_manual/basics/front-end/js.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
4 changes: 2 additions & 2 deletions developer_manual/release_notes/previous/upgrade_to_25.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <https://github.com/nextcloud/server/pull/34081>`_ and :ref:`JavaScript Frontend documentation <basics_frontend_javascript_keyboard_shortcuts>`.

Back-end changes
Expand Down
8 changes: 4 additions & 4 deletions user_manual/talk/call.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
~~~~~~~~~
Expand All @@ -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.
42 changes: 21 additions & 21 deletions user_manual/universal_access.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand All @@ -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
Expand Down
Loading