Indent/unindent in plain text editor is unusable on certain international keyboard layouts

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Summary

Indent/unindent in plain text editor is unusable on certain international keyboard layouts

Steps to reproduce

1. Make sure plain text editing is enabled (not rich text editing)
2. Try to press the Ctrl/Command+] or Ctrl/Command+[ shortcut (to unindent/indent content in the text/Markdown editor), when a Swedish keyboard map is being used.
3. Ctrl+å and Ctrl+¨ (the key to the right of å on a Swedish keyboard) might work to indent or unindent (it behaves different on gitlab.com vs our local v16.6.1-ee instance, and also seems to vary between Chrome and Firefox), but the feature is not reliably available.

With a US keyboard, the feature works as intended.

Example Project

Any project. Try editing a comment right in this issue, for example.

What is the current bug behavior?

The indent and unindent keys are not reliably available when using a Swedish keyboard.

What is the expected correct behavior?

Both unindent and indent should be available, as on US keyboards.

Relevant logs and/or screenshots

N/A

Output of checks

This bug happens on GitLab.com

Results of GitLab environment info

N/A

Results of GitLab application Check

N/A

Possible fixes/Background

These shortcuts were added in gitlab-foss!28914 (merged):

• Ctrl/Command+] indents the current line or selection by 4 spaces
• Ctrl/Command+[ unindents the current line or selection by 4 spaces

The reason why Tab/Shift+Tab was not used is this:

Why not use Tab/Shift+Tab? This would override the native tab-ordering of forms, breaking accessibility and keyboard-only workflows.

This is a valid concern. But we need to think about our internal users (like my current employer 😂) as well. 🙂

How does the competitors do it?

I discussed this with @slovdahl and we realized that GitHub (which uses Tab/Shift-Tab) has chosen an interesting semantic here. It is described on https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#nested-lists:

Note: In the web-based editor, you can indent or dedent one or more lines of text by first highlighting the desired lines and then using Tab or Shift+Tab respectively.

(emphasis mine)

This approach - only overriding tab/shift tab if text is selected is actually a pretty awesome UX to me. It means:

1. that you don't break accessibility and keyboard-only workflows, which is important. When text is not selected, you can still use Tab and Shift+Tab to navigate to other fields on the web page.
2. that you can still use key combinations (Tab and Shift+Tab) which are widely used for indent and unindent in IDEs and text editors
3. that it works on international keyboard layouts as well as US layout

Point number 2 is an important one. I had been missing this feature in GitLab now for some time, knowing that it was available in GitHub. However, yesterday I googled which led me to gitlab-foss#59657 (closed) and gitlab-foss!28914 (merged), which made me realize that it is indeed supported - it just uses different keyboard shortcuts than you would expect.

What I think we should do

I think we should mimic the GitHub behavior in this case. It would make the feature much more discoverable, while still retaining accessibility and keyboard-only workflows.