Merge branch 'cngo-make-markdown-textarea-links-tab-accessible' into 'master'

Make markdown textarea links tab-accessible

See merge request gitlab-org/gitlab!33518

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

 <script>
-/* eslint-disable @gitlab/vue-require-i18n-strings */
-import { GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui';
 
 export default {
   components: {
+    GlButton,
     GlLink,
     GlLoadingIcon,
+    GlSprintf,
   },
   props: {
     markdownDocsPath: {
@@ -35,25 +36,32 @@ export default {
   <div class="comment-toolbar clearfix">
     <div class="toolbar-text">
       <template v-if="!hasQuickActionsDocsPath && markdownDocsPath">
-        <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1">{{
+        <gl-link :href="markdownDocsPath" target="_blank">{{
           __('Markdown is supported')
         }}</gl-link>
       </template>
       <template v-if="hasQuickActionsDocsPath && markdownDocsPath">
-        <gl-link :href="markdownDocsPath" target="_blank" tabindex="-1">{{
-          __('Markdown')
-        }}</gl-link>
-        and
-        <gl-link :href="quickActionsDocsPath" target="_blank" tabindex="-1">{{
-          __('quick actions')
-        }}</gl-link>
-        are supported
+        <gl-sprintf
+          :message="
+            __(
+              '%{markdownDocsLinkStart}Markdown%{markdownDocsLinkEnd} and %{quickActionsDocsLinkStart}quick actions%{quickActionsDocsLinkEnd} are supported',
+            )
+          "
+        >
+          <template #markdownDocsLink="{content}">
+            <gl-link :href="markdownDocsPath" target="_blank">{{ content }}</gl-link>
+          </template>
+          <template #quickActionsDocsLink="{content}">
+            <gl-link :href="quickActionsDocsPath" target="_blank">{{ content }}</gl-link>
+          </template>
+        </gl-sprintf>
       </template>
     </div>
     <span v-if="canAttachFile" class="uploading-container">
       <span class="uploading-progress-container hide">
         <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"></i>
         <span class="attaching-file-message"></span>
+        <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
         <span class="uploading-progress">0%</span>
         <gl-loading-icon inline class="align-text-bottom" />
       </span>
@@ -62,18 +70,29 @@ export default {
           <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"></i>
         </span>
         <span class="uploading-error-message"></span>
-        <button class="retry-uploading-link" type="button">{{ __('Try again') }}</button> or
-        <button class="attach-new-file markdown-selector" type="button">
-          {{ __('attach a new file') }}
-        </button>
+
+        <gl-sprintf
+          :message="
+            __(
+              '%{retryButtonStart}Try again%{retryButtonEnd} or %{newFileButtonStart}attach a new file%{newFileButtonEnd}',
+            )
+          "
+        >
+          <template #retryButton="{content}">
+            <button class="retry-uploading-link" type="button">{{ content }}</button>
+          </template>
+          <template #newFileButton="{content}">
+            <button class="attach-new-file markdown-selector" type="button">{{ content }}</button>
+          </template>
+        </gl-sprintf>
       </span>
-      <button class="markdown-selector button-attach-file btn-link" tabindex="-1" type="button">
+      <gl-button class="markdown-selector button-attach-file" variant="link">
         <i class="fa fa-file-image-o toolbar-button-icon" aria-hidden="true"></i
         ><span class="text-attach-file">{{ __('Attach a file') }}</span>
-      </button>
-      <button class="btn btn-default btn-sm hide button-cancel-uploading-files" type="button">
+      </gl-button>
+      <gl-button class="btn btn-default btn-sm hide button-cancel-uploading-files" variant="link">
         {{ __('Cancel') }}
-      </button>
+      </gl-button>
     </span>
   </div>
 </template>

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

+---
+title: Make markdown textarea links tab-accessible
+merge_request: 33518
+author:
+type: fixed

locale/gitlab.pot

@@ -430,6 +430,9 @@ msgstr ""
 msgid "%{lock_path} is locked by GitLab User %{lock_user_id}"
 msgstr ""
 
+msgid "%{markdownDocsLinkStart}Markdown%{markdownDocsLinkEnd} and %{quickActionsDocsLinkStart}quick actions%{quickActionsDocsLinkEnd} are supported"
+msgstr ""
+
 msgid "%{mergeLength}/%{usersLength} can merge"
 msgstr ""
 
@@ -503,6 +506,9 @@ msgid_plural "%{releases} releases"
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "%{retryButtonStart}Try again%{retryButtonEnd} or %{newFileButtonStart}attach a new file%{newFileButtonEnd}"
+msgstr ""
+
 msgid "%{screenreaderOnlyStart}Keyboard shorcuts%{screenreaderOnlyEnd} Disabled"
 msgstr ""