Merge branch 'update-new-issue-form-to-match-pajamas-specs' into 'master'

Update new issue form to match Pajamas specs

See merge request gitlab-org/gitlab!82425

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

 = form_for [@project, @issue],
-           html: { class: 'issue-form common-note-form gl-mt-3 js-quick-submit js-requires-input' } do |f|
+  html: { class: 'issue-form common-note-form gl-mt-3 js-quick-submit gl-show-field-errors' } do |f|
   = render 'shared/issuable/form', f: f, issuable: @issue

app/views/shared/issuable/_form.html.haml

@@ -19,7 +19,9 @@
 = render 'shared/issuable/form/branch_chooser', issuable: issuable, form: form
 
 .form-group.row
-  = form.label :title, class: 'col-form-label col-sm-2'
+  = form.label :title, class: 'col-form-label col-sm-2' do
+    = _('Title')
+    %i{ aria: { hidden: true } }= '*'
 
   = render 'shared/issuable/form/title', issuable: issuable, form: form, has_wip_commits: commits && commits.detect(&:work_in_progress?)
 #js-suggestions{ data: { project_path: @project.full_path } }

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

@@ -8,9 +8,9 @@
 - add_wip_text = (_('%{link_start}Start the title with %{draft_snippet}%{link_end} to prevent a merge request draft from merging before it\'s ready.') % { link_start: toggle_wip_link_start, link_end: toggle_wip_link_end, draft_snippet: '<code>Draft:</code>'.html_safe } ).html_safe
 - remove_wip_text = (_('%{link_start}Remove the %{draft_snippet} prefix%{link_end} from the title to allow this merge request to be merged when it\'s ready.' ) % { link_start: toggle_wip_link_start, link_end: toggle_wip_link_end, draft_snippet: '<code>Draft</code>'.html_safe } ).html_safe
 
-%div{ class: div_class }
-  = form.text_field :title, required: true, maxlength: 255, autofocus: true,
-      autocomplete: 'off', class: 'form-control pad qa-issuable-form-title', placeholder: _('Title'), dir: 'auto'
+%div{ class: div_class, data: { testid: 'issue-title-input-field' } }
+  = form.text_field :title, required: true, aria: { required: true }, maxlength: 255, autofocus: true,
+    autocomplete: 'off', class: 'form-control pad qa-issuable-form-title', placeholder: _('Title'), dir: 'auto'
 
   - if issuable.respond_to?(:work_in_progress?)
     .form-text.text-muted

spec/features/issues/form_spec.rb

@@ -187,6 +187,14 @@ RSpec.describe 'New/edit issue', :js do
       end
     end
 
+    it 'displays an error message when submitting an invalid form' do
+      click_button 'Create issue'
+
+      page.within('[data-testid="issue-title-input-field"]') do
+        expect(page).to have_text(_('This field is required.'))
+      end
+    end
+
     it 'correctly updates the dropdown toggle when removing a label' do
       click_button 'Labels'