Make markdown textarea buttons tab accessible

The buttons were hidden from keyboard focus so this is removed
for accessibility

app/assets/javascripts/vue_shared/components/markdown/header.vue

@@ -89,14 +89,13 @@ export default {
   <div class="md-header">
     <ul class="nav-links clearfix">
       <li :class="{ active: !previewMarkdown }" class="md-header-tab">
-        <button class="js-write-link" tabindex="-1" type="button" @click="writeMarkdownTab($event)">
+        <button class="js-write-link" type="button" @click="writeMarkdownTab($event)">
           {{ __('Write') }}
         </button>
       </li>
       <li :class="{ active: previewMarkdown }" class="md-header-tab">
         <button
           class="js-preview-link js-md-preview-button"
-          tabindex="-1"
           type="button"
           @click="previewMarkdownTab($event)"
         >
@@ -187,7 +186,6 @@ export default {
             :aria-label="__('Go full screen')"
             class="toolbar-btn toolbar-fullscreen-btn js-zen-enter"
             data-container="body"
-            tabindex="-1"
             :title="__('Go full screen')"
             type="button"
           >

app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue

@@ -64,7 +64,6 @@ export default {
     :aria-label="buttonTitle"
     type="button"
     class="toolbar-btn js-md"
-    tabindex="-1"
     data-container="body"
     @click="() => $emit('click')"
   >

app/helpers/markup_helper.rb

@@ -244,7 +244,6 @@ module MarkupHelper
     content_tag :button,
       type: 'button',
       class: 'toolbar-btn js-md has-tooltip',
-      tabindex: -1,
       data: data,
       title: options[:title],
       aria: { label: options[:title] } do

app/views/projects/issues/_by_email_description.html.haml

 The subject will be used as the title of the new issue, and the message will be the description.
 
-= link_to 'Quick actions', help_page_path('user/project/quick_actions'), target: '_blank', tabindex: -1
+= link_to 'Quick actions', help_page_path('user/project/quick_actions'), target: '_blank'
 and styling with
-= link_to 'Markdown', help_page_path('user/markdown'), target: '_blank', tabindex: -1
+= link_to 'Markdown', help_page_path('user/markdown'), target: '_blank'
 are supported.

app/views/shared/_md_preview.html.haml

@@ -11,10 +11,10 @@
   .md-header
     %ul.nav.nav-tabs.nav-links.clearfix
       %li.md-header-tab.active
-        %button.js-md-write-button{ tabindex: -1 }
+        %button.js-md-write-button
           = _("Write")
       %li.md-header-tab
-        %button.js-md-preview-button{ tabindex: -1 }
+        %button.js-md-preview-button
           = _("Preview")
 
       %li.md-header-toolbar.active

app/views/shared/blob/_markdown_buttons.html.haml

@@ -9,5 +9,5 @@
   = markdown_toolbar_button({ icon: "list-task", data: { "md-tag" => "- [ ] ", "md-prepend" => true }, title: _("Add a task list") })
   = markdown_toolbar_button({ icon: "table", data: { "md-tag" => "| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |", "md-prepend" => true }, title: _("Add a table") })
   - if show_fullscreen_button
-    %button.toolbar-btn.toolbar-fullscreen-btn.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, "aria-label": "Go full screen", title: _("Go full screen"), data: { container: "body" } }
+    %button.toolbar-btn.toolbar-fullscreen-btn.js-zen-enter.has-tooltip{ type: "button", "aria-label": "Go full screen", title: _("Go full screen"), data: { container: "body" } }
       = sprite_icon("screen-full")

app/views/shared/issuable/form/_default_templates.html.haml

 %p.form-text.text-muted
   Add
-  = link_to 'description templates', help_page_path('user/project/description_templates'), tabindex: -1
+  = link_to 'description templates', help_page_path('user/project/description_templates')
   to help your contributors communicate effectively!

app/views/shared/issuable/form/_title.html.haml

@@ -11,7 +11,7 @@
   - if issuable.respond_to?(:work_in_progress?)
     .form-text.text-muted
       .js-wip-explanation
-        %a.js-toggle-wip{ href: '', tabindex: -1 }
+        %a.js-toggle-wip{ href: '' }
           Remove the
           %code WIP:
           prefix from the title
@@ -22,7 +22,7 @@
         - if has_wip_commits
           It looks like you have some WIP commits in this branch.
           %br
-        %a.js-toggle-wip{ href: '', tabindex: -1 }
+        %a.js-toggle-wip{ href: '' }
           Start the title with
           %code WIP:
         to prevent a

app/views/shared/notes/_hints.html.haml

 - supports_quick_actions = local_assigns.fetch(:supports_quick_actions, false)
 .comment-toolbar.clearfix
   .toolbar-text
-    = link_to _('Markdown'), help_page_path('user/markdown'), target: '_blank', tabindex: -1
+    = link_to _('Markdown'), help_page_path('user/markdown'), target: '_blank'
     - if supports_quick_actions
       and
-      = link_to _('quick actions'), help_page_path('user/project/quick_actions'), target: '_blank', tabindex: -1
+      = link_to _('quick actions'), help_page_path('user/project/quick_actions'), target: '_blank'
       are
     - else
       is
@@ -28,7 +28,7 @@
       or
       %button.attach-new-file.markdown-selector{ type: 'button' }= _("attach a new file")
 
-    %button.markdown-selector.button-attach-file.btn-link{ type: 'button', tabindex: '-1' }
+    %button.markdown-selector.button-attach-file.btn-link{ type: 'button' }
       = icon('file-image-o', class: 'toolbar-button-icon')
       %span.text-attach-file<>
         = _("Attach a file")

changelogs/unreleased/cngo-make-markdown-textarea-buttons-tab-accessible.yml

+---
+title: Make markdown textarea buttons tab accessible
+merge_request: 34300
+author:
+type: fixed