From db9f8f3f87d9e4c9da9139ee3cd46bf77a468804 Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Fri, 7 Jul 2023 07:42:47 -0600
Subject: [PATCH 1/3] Add screenreader-only headings for easier intra-page
 navigation

---
 app/assets/javascripts/notes/components/comment_form.vue | 1 +
 app/assets/javascripts/notes/i18n.js                     | 1 +
 app/views/projects/merge_requests/_widget.html.haml      | 2 ++
 locale/gitlab.pot                                        | 6 ++++++
 4 files changed, 10 insertions(+)

diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index 97444bb11294e3..ef61720134f7a0 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -348,6 +348,7 @@ export default {
           {{ error }}
         </gl-alert>
         <div class="timeline-content timeline-content-form">
+          <h2 class="gl-sr-only">{{ $options.i18n.shortPlaceholder }}</h2>
           <form ref="commentForm" class="new-note common-note-form gfm-form js-main-target-form">
             <comment-field-layout
               :with-alert-container="true"
diff --git a/app/assets/javascripts/notes/i18n.js b/app/assets/javascripts/notes/i18n.js
index c25ca6b586d770..0b9bf298ea9e98 100644
--- a/app/assets/javascripts/notes/i18n.js
+++ b/app/assets/javascripts/notes/i18n.js
@@ -14,6 +14,7 @@ export const COMMENT_FORM = {
   mergeRequest: __('merge request'),
   epic: __('epic'),
   bodyPlaceholder: __('Write a comment or drag your files here…'),
+  shortPlaceholder: __('Write a comment'),
   bodyPlaceholderInternal: __('Write an internal note or drag your files here…'),
   internal: s__('Notes|Make this an internal note'),
   internalVisibility: s__(
diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 576fed5860957b..8d09f5269460e5 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -23,4 +23,6 @@
     window.gl.mrWidgetData.user_preferences_gitpod_path = '#{profile_preferences_path(anchor: 'user_gitpod_enabled')}';
     window.gl.mrWidgetData.user_profile_enable_gitpod_path = '#{profile_path(user: { gitpod_enabled: true })}';
 
+%h2.gl-sr-only
+  = _("Merge Request Widgets")
 #js-vue-mr-widget.mr-widget
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index ea64c1b5b42bed..1f7ac0668ec04f 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -28525,6 +28525,9 @@ msgstr ""
 msgid "Merge Request Analytics"
 msgstr ""
 
+msgid "Merge Request Widgets"
+msgstr ""
+
 msgid "Merge Requests"
 msgstr ""
 
@@ -52204,6 +52207,9 @@ msgstr ""
 msgid "Write"
 msgstr ""
 
+msgid "Write a comment"
+msgstr ""
+
 msgid "Write a comment or drag your files here…"
 msgstr ""
 
-- 
GitLab


From 293853114b4e5aa09c9f957b4b32b6fee5fc7c07 Mon Sep 17 00:00:00 2001
From: Amy Qualls <aqualls@gitlab.com>
Date: Tue, 11 Jul 2023 18:46:55 +0000
Subject: [PATCH 2/3] (Review suggestion) Switch to using "Reports" instead of
 "Widgets"

---
 app/views/projects/merge_requests/_widget.html.haml | 2 +-
 locale/gitlab.pot                                   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 8d09f5269460e5..9a85629cd18544 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -24,5 +24,5 @@
     window.gl.mrWidgetData.user_profile_enable_gitpod_path = '#{profile_path(user: { gitpod_enabled: true })}';
 
 %h2.gl-sr-only
-  = _("Merge Request Widgets")
+  = _("Reports")
 #js-vue-mr-widget.mr-widget
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 1f7ac0668ec04f..7fefef65b4cf54 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -28525,9 +28525,6 @@ msgstr ""
 msgid "Merge Request Analytics"
 msgstr ""
 
-msgid "Merge Request Widgets"
-msgstr ""
-
 msgid "Merge Requests"
 msgstr ""
 
@@ -38554,6 +38551,9 @@ msgstr ""
 msgid "Reporting"
 msgstr ""
 
+msgid "Reports"
+msgstr ""
+
 msgid "Reports|%{combinedString} and %{resolvedString}"
 msgstr ""
 
-- 
GitLab


From cf19d6805d2245b0c2eb975a4df7a27292fda27c Mon Sep 17 00:00:00 2001
From: Thomas Randolph <trandolph@gitlab.com>
Date: Wed, 12 Jul 2023 00:51:09 -0600
Subject: [PATCH 3/3] (Review) Use `role=region` and don't put a heading over
 the comment form

---
 app/assets/javascripts/notes/components/comment_form.vue | 1 -
 app/assets/javascripts/notes/i18n.js                     | 1 -
 app/views/projects/merge_requests/_widget.html.haml      | 9 ++++++---
 locale/gitlab.pot                                        | 6 ------
 4 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index ef61720134f7a0..97444bb11294e3 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -348,7 +348,6 @@ export default {
           {{ error }}
         </gl-alert>
         <div class="timeline-content timeline-content-form">
-          <h2 class="gl-sr-only">{{ $options.i18n.shortPlaceholder }}</h2>
           <form ref="commentForm" class="new-note common-note-form gfm-form js-main-target-form">
             <comment-field-layout
               :with-alert-container="true"
diff --git a/app/assets/javascripts/notes/i18n.js b/app/assets/javascripts/notes/i18n.js
index 0b9bf298ea9e98..c25ca6b586d770 100644
--- a/app/assets/javascripts/notes/i18n.js
+++ b/app/assets/javascripts/notes/i18n.js
@@ -14,7 +14,6 @@ export const COMMENT_FORM = {
   mergeRequest: __('merge request'),
   epic: __('epic'),
   bodyPlaceholder: __('Write a comment or drag your files here…'),
-  shortPlaceholder: __('Write a comment'),
   bodyPlaceholderInternal: __('Write an internal note or drag your files here…'),
   internal: s__('Notes|Make this an internal note'),
   internalVisibility: s__(
diff --git a/app/views/projects/merge_requests/_widget.html.haml b/app/views/projects/merge_requests/_widget.html.haml
index 9a85629cd18544..606d4e06d339b3 100644
--- a/app/views/projects/merge_requests/_widget.html.haml
+++ b/app/views/projects/merge_requests/_widget.html.haml
@@ -23,6 +23,9 @@
     window.gl.mrWidgetData.user_preferences_gitpod_path = '#{profile_preferences_path(anchor: 'user_gitpod_enabled')}';
     window.gl.mrWidgetData.user_profile_enable_gitpod_path = '#{profile_path(user: { gitpod_enabled: true })}';
 
-%h2.gl-sr-only
-  = _("Reports")
-#js-vue-mr-widget.mr-widget
+%h2#merge-request-widgets-heading.gl-sr-only
+  = _("Merge request reports")
+#js-vue-mr-widget.mr-widget{
+  role: 'region',
+  'aria-labelledby': 'merge-request-widgets-heading'
+}
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 7fefef65b4cf54..ea64c1b5b42bed 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -38551,9 +38551,6 @@ msgstr ""
 msgid "Reporting"
 msgstr ""
 
-msgid "Reports"
-msgstr ""
-
 msgid "Reports|%{combinedString} and %{resolvedString}"
 msgstr ""
 
@@ -52207,9 +52204,6 @@ msgstr ""
 msgid "Write"
 msgstr ""
 
-msgid "Write a comment"
-msgstr ""
-
 msgid "Write a comment or drag your files here…"
 msgstr ""
 
-- 
GitLab