[go: up one dir, main page]

Skip to content

[Settings > Merge requests] Use Pajamas components for description template form input

Problem to solve

The text-area field for "Default description template for merge requests" does not have the necessary gl-form-input class, and also doesn't have an accessible label.

Screenshots

Problematic input

Proposal

Make textarea use gl-form-input and ensure it has an accessible label.

Implementation guide

Add the gl-form-input class and make the label use the actual <label> element:

diff --git a/ee/app/views/projects/settings/merge_requests/_merge_request_settings.html.haml b/ee/app/views/projects/settings/merge_requests/_merge_request_settings.html.haml
index 9331e2b7376c..38341241f09b 100644
--- a/ee/app/views/projects/settings/merge_requests/_merge_request_settings.html.haml
+++ b/ee/app/views/projects/settings/merge_requests/_merge_request_settings.html.haml
@@ -22,13 +22,13 @@
 
 - if @project.feature_available?(:issuable_default_templates)
   .form-group
-    %b= _('Default description template for merge requests')
+    %label.gl-mb-0{ for: 'merge_requests_template' }= _('Default description template for merge requests')
     %p.gl-text-subtle
       = s_('ProjectSettings|Used for every new merge request.')
       - link = link_to('', help_page_path('user/project/description_templates.md', anchor: 'create-a-merge-request-template'), target: '_blank', rel: 'noopener noreferrer')
       = safe_format(s_('ProjectSettings|%{link_start}What are description templates?%{link_end}'), tag_pair(link, :link_start, :link_end))
 
-    = form.text_area :merge_requests_template, class: "form-control", rows: 3, data: { testid: 'default-merge-request-template-field' }
+    = form.text_area :merge_requests_template, id: 'merge_requests_template', class: "form-control gl-form-input", rows: 3, data: { testid: 'default-merge-request-template-field' }
 
     .gl-text-subtle
       - link = link_to('', help_page_path('user/markdown.md'), target: '_blank', rel: 'noopener noreferrer')
Edited by Scott de Jonge