Update tab behavior of markdown editors

Problem to solve

Tabbing through a markdown field is tedious, because each of the formatting options (bold, italic, quote, etc.) is included in the tab sequence:

2020-08-19_09.12.29

Intended users

Anyone who navigates GitLab using the keyboard.

User experience goal

Filling out forms that include a markdown editor with the keyboard should be natural and quick.

Proposal

Update the markdown editor to only select the main editing area when tabbing through a form.

Using the example GIF above, tabbing through the form would select the following elements:

  1. Release title input
  2. Milestones dropdown
  3. Release notes text body
  4. URL input

Further details

It's important we don't lose any accessibility by removing buttons from the tab sequence. All buttons removed from the tab sequence should have their own dedicated keyboard shortcut, for example:

  • Bold: ⌘/Ctrl+B
  • Italic: ⌘/Ctrl+I
  • etc...

Alternatively, we could build a single keyboard shortcut that jumps the keyboard focus to the formatting button area and allows the user to tab through the buttons.

Documentation

Any keyboard shortcuts that are added or changed should be documented (probably here: https://docs.gitlab.com/ee/user/shortcuts.html).

Availability & Testing

It would be worth building a feature test to ensure that the tab order works as expected.