Use `issuable_show` for requirement show & create

Use `issuable_body.vue` component to render
requirement sidebar body.

app/assets/javascripts/lib/utils/keycodes.js

@@ -2,6 +2,7 @@
 // See: https://gitlab.com/gitlab-org/gitlab/-/issues/216102
 
 export const BACKSPACE_KEY_CODE = 8;
+export const TAB_KEY_CODE = 9;
 export const ENTER_KEY_CODE = 13;
 export const ESC_KEY_CODE = 27;
 export const UP_KEY_CODE = 38;

ee/app/assets/stylesheets/pages/requirements.scss

@@ -21,10 +21,42 @@
     }
   }
 
-  .requirement-form-drawer.zen-mode {
-    // We need to override `z-index` provided to GlDrawer
-    // in Zen mode to enable full-screen editing.
-    z-index: auto !important;
+  .requirement-form-drawer {
+    &.zen-mode {
+      // We need to override `z-index` provided to GlDrawer
+      // in Zen mode to enable full-screen editing.
+      z-index: auto !important;
+    }
+
+    // Following overrides are done to
+    // elements within `issuable_body.vue`
+    // and are specific to requirements.
+    .title-container {
+      @include gl-border-b-solid;
+      @include gl-border-b-gray-100;
+      @include gl-border-b-1;
+
+      &,
+      .title {
+        @include gl-mb-3;
+      }
+
+      .title {
+        @include gl-font-size-markdown-h2;
+      }
+    }
+
+    .issuable-details {
+      @include gl-py-0;
+
+      li.md-header-toolbar {
+        @include gl-py-3;
+      }
+
+      .detail-page-description {
+        @include gl-border-none;
+      }
+    }
   }
 }
 

ee/changelogs/unreleased/233548-requirement-form-with-issuable-show.yml

+---
+title: Improve accessibility of keyboard navigation for Requirements
+merge_request: 48325
+author:
+type: added

ee/spec/features/projects/requirements_management/requirements_list_spec.rb

@@ -16,8 +16,8 @@ RSpec.describe 'Requirements list', :js do
       find('button.js-new-requirement').click
     end
 
-    page.within('.requirements-list-container') do
-      find('textarea#requirementTitle').native.send_keys title
+    page.within('.requirement-form-drawer') do
+      find('input#issuable-title').native.send_keys title
       find('button.js-requirement-save').click
 
       wait_for_all_requests
@@ -66,7 +66,7 @@ RSpec.describe 'Requirements list', :js do
         end
 
         page.within('.requirements-list-container') do
-          expect(page).to have_selector('.requirement-form')
+          expect(page).to have_selector('.requirement-form-drawer')
         end
       end
 
@@ -137,7 +137,7 @@ RSpec.describe 'Requirements list', :js do
         page.within('.requirement-form-drawer') do
           expect(page.find('.title-container')).to have_content(requirement1.title)
           expect(page.find('.title-container')).to have_selector('button.btn-edit')
-          expect(page.find('.description-container')).to have_content(requirement1.description)
+          expect(page.find('.description')).to have_content(requirement1.description)
         end
       end
 
@@ -148,8 +148,8 @@ RSpec.describe 'Requirements list', :js do
 
         page.within('.requirement-form-drawer') do
           expect(page.find('.gl-drawer-header span', match: :first)).to have_content("REQ-#{requirement1.iid}")
-          expect(page.find('textarea#requirementTitle')['value']).to have_content("#{requirement1.title}")
-          expect(page.find('textarea#requirementDescription')['value']).to have_content("#{requirement1.description}")
+          expect(page.find('input#issuable-title')['value']).to have_content("#{requirement1.title}")
+          expect(page.find('textarea#issuable-description')['value']).to have_content("#{requirement1.description}")
           expect(page.find('input[type="checkbox"]')['checked']).to eq(requirement1.last_test_report_state)
           expect(page.find('.js-requirement-save')).to have_content('Save changes')
         end
@@ -164,8 +164,8 @@ RSpec.describe 'Requirements list', :js do
         end
 
         page.within('.requirement-form-drawer') do
-          find('textarea#requirementTitle').native.send_keys requirement_title
-          find('textarea#requirementDescription').native.send_keys requirement_description
+          find('input#issuable-title').native.send_keys requirement_title
+          find('textarea#issuable-description').native.send_keys requirement_description
           find('input[type="checkbox"]').click
 
           click_button 'Save changes'

locale/gitlab.pot

@@ -9415,9 +9415,6 @@ msgstr ""
 msgid "Describe the goal of the changes and what reviewers should be aware of."
 msgstr ""
 
-msgid "Describe the requirement here"
-msgstr ""
-
 msgid "Description"
 msgstr ""
 
@@ -23561,9 +23558,6 @@ msgstr ""
 msgid "Requirement %{reference} has been updated"
 msgstr ""
 
-msgid "Requirement title"
-msgstr ""
-
 msgid "Requirement title cannot have more than %{limit} characters."
 msgstr ""