basecamp / basecamp/trix

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

Open
#1,134 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
20k
Forks
1.1k
Avg merge
3d 12h
Merged PRs (30d)
13

Description

##### 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](https://github.com/basecamp/trix/issues/643#issuecomment-1848237135). 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:
```html
Strikethrough
```
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

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the redo shortcut and a custom data-trix-key such as shift+5 or shift+z in Trix 2.0.4 or 2.0.10, then trace the keyboard shortcut handling used by toolbar buttons. Done means multi-key values work consistently in Chrome and Firefox while single-key shortcuts continue to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.