#1134·trix

Multi-keys in data-trix-key do not work

Author: jperlakCreated Feb 12, 2024Updated Oct 30, 2025
Motivation

I have to fulfill some accessibility requirements in my Ruby on Rails application. Therefore, I have to add shortcuts, translations & aria-labels for all buttons in Trix toolbar.

Problem description

TL;DR: data-trix-key composed of more than one key (joined with +, e.g. shift+5 or shift+z) does not work.

I have tried to implement the solution presented in this comment. Using such approach, the translations & aria-labels turned out to be pretty easy, although changing the data-trix-key does not seem to work, e.g. when inspecting the buttons after strikeButton.setAttribute("data-trix-key", "shift+5");, the key is changed, e.g:

xml
<button type="button" class="trix-button trix-button--icon trix-button--icon-strike" data-trix-attribute="strike" title="Strikethrough" tabindex="-1" aria-label="Strikethrough" data-trix-key="shift+5">Strikethrough</button>

but the shortcut does not work. With such value I have tried using many combinations like Ctrl+Shift+5, Shift+5 or Fn+Shift+5 but nothing has changed (for Shift+5 I got % which seems obvious).

I have also encountered the same problem with default redo-button and its shift+z shortcut. Changing the key to just y works, i.e. Ctrl+y is correctly redoing the action. The same for other single-keys like 1.

So to sum up, it seems like single-key values always work while the multi-key values are not correctly handled.

Steps to Reproduce
  • Try to use the redo-button with data-trix-key="shift+z".
  • Try to change/set the data-trix-key to multi-key value like shift+5 and use the shortcut.
Details
  • Trix version: 2.0.4 in my project, although I have checked the 2.0.10 and the problem is relevant as well
  • Browser name and version:
    • Google Chrome Version 121.0.6167.160
    • Mozilla Firefox Version 122.0.1
  • Operating system: Ubuntu 22.04.3 LTS