Replace styled reply button with textarea

In discussion threads there is a "Reply..." button styled to look like
a textarea which, when clicked, will open up a full GFM discussion
form with a textarea element. This changes this button into an actual
textarea to improve accessibility.

app/assets/javascripts/design_management/components/design_notes/design_discussion.vue

@@ -257,8 +257,8 @@ export default {
         <reply-placeholder
           v-if="!isFormVisible"
           class="qa-discussion-reply"
-          :button-text="__('Reply...')"
-          @onClick="showForm"
+          :placeholder-text="__('Reply...')"
+          @focus="showForm"
         />
         <apollo-mutation
           v-else

app/assets/javascripts/diffs/components/diff_discussion_reply.vue

@@ -35,8 +35,8 @@ export default {
       <slot v-if="hasForm" name="form"></slot>
       <template v-else-if="renderReplyPlaceholder">
         <reply-placeholder
-          :button-text="__('Start a new discussion...')"
-          @onClick="$emit('showNewDiscussionForm')"
+          :placeholder-text="__('Start a new discussion...')"
+          @focus="$emit('showNewDiscussionForm')"
         />
       </template>
     </template>

app/assets/javascripts/notes/components/discussion_actions.vue

@@ -50,8 +50,8 @@ export default {
   <div class="discussion-with-resolve-btn clearfix">
     <reply-placeholder
       data-qa-selector="discussion_reply_tab"
-      :button-text="s__('MergeRequests|Reply...')"
-      @onClick="$emit('showReplyForm')"
+      :placeholder-text="s__('MergeRequests|Reply...')"
+      @focus="$emit('showReplyForm')"
     />
 
     <div v-if="userCanResolveDiscussion" class="btn-group discussion-actions" role="group">

app/assets/javascripts/notes/components/discussion_reply_placeholder.vue

@@ -2,7 +2,7 @@
 export default {
   name: 'ReplyPlaceholder',
   props: {
-    buttonText: {
+    placeholderText: {
       type: String,
       required: true,
     },
@@ -11,13 +11,11 @@ export default {
 </script>
 
 <template>
-  <button
-    ref="button"
-    type="button"
-    class="js-vue-discussion-reply btn btn-text-field"
+  <textarea
+    rows="1"
+    class="reply-placeholder-text-field js-vue-discussion-reply"
+    :placeholder="placeholderText"
     :title="s__('MergeRequests|Add a reply')"
-    @click="$emit('onClick')"
-  >
-    {{ buttonText }}
-  </button>
+    @focus="$emit('focus')"
+  ></textarea>
 </template>

app/assets/stylesheets/framework/buttons.scss

@@ -216,6 +216,7 @@
     color: $gray-700;
   }
 
+  // deprecated class
   &.btn-text-field {
     width: 100%;
     text-align: left;

app/assets/stylesheets/pages/note_form.scss

@@ -303,7 +303,15 @@ table {
     }
   }
 
-  .btn-text-field {
+  .reply-placeholder-text-field {
+    border-radius: $gl-border-radius-base;
+    width: 100%;
+    resize: none;
+    padding: $gl-padding-4 $gl-padding;
+    border-color: $border-color;
+    color: $gray-darkest;
+    background-color: $white;
+
     @include media-breakpoint-down(xs) {
       margin-bottom: $gl-padding-8;
     }

spec/features/issues/gfm_autocomplete_spec.rb

@@ -1008,7 +1008,7 @@ RSpec.describe 'GFM autocomplete', :js do
   end
 
   def start_and_cancel_discussion
-    click_button('Reply...')
+    find('.js-vue-discussion-reply').click
 
     fill_in('note_note', with: 'Whoops!')
 

spec/features/merge_request/batch_comments_spec.rb

@@ -223,7 +223,7 @@ end
 
 def write_reply_to_discussion(button_text: 'Start a review', text: 'Line is wrong', resolve: false, unresolve: false)
   page.within(first('.diff-files-holder .discussion-reply-holder')) do
-    click_button('Reply...')
+    first('.js-vue-discussion-reply').click
 
     fill_in('note_note', with: text)
 

spec/features/merge_request/user_posts_diff_notes_spec.rb

@@ -192,7 +192,7 @@ RSpec.describe 'Merge request > User posts diff notes', :js do
       it 'adds as discussion' do
         should_allow_commenting(find('[id="6eb14e00385d2fb284765eb1cd8d420d33d63fc9_22_22"]'), asset_form_reset: false)
         expect(page).to have_css('.notes_holder .note.note-discussion', count: 1)
-        expect(page).to have_button('Reply...')
+        expect(page).to have_css('.js-vue-discussion-reply')
       end
     end
   end

spec/features/merge_request/user_resolves_diff_notes_and_discussions_resolve_spec.rb

@@ -149,7 +149,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
 
           it 'allows user to comment' do
             page.within '.diff-content' do
-              click_button 'Reply...'
+              find('.js-vue-discussion-reply').click
 
               find(".js-unresolve-checkbox").set false
               find('.js-note-text').set 'testing'
@@ -179,7 +179,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
 
           it 'allows user to comment & unresolve thread' do
             page.within '.diff-content' do
-              click_button 'Reply...'
+              find('.js-vue-discussion-reply').click
 
               find('.js-note-text').set 'testing'
 
@@ -208,7 +208,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
 
       it 'allows user to comment & resolve thread' do
         page.within '.diff-content' do
-          click_button 'Reply...'
+          find('.js-vue-discussion-reply').click
 
           find('.js-note-text').set 'testing'
 
@@ -442,7 +442,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
 
       it 'allows user to comment & resolve thread' do
         page.within '.diff-content' do
-          click_button 'Reply...'
+          find('.js-vue-discussion-reply').click
 
           find('.js-note-text').set 'testing'
 
@@ -461,7 +461,7 @@ RSpec.describe 'Merge request > User resolves diff notes and threads', :js do
         page.within '.diff-content' do
           click_button 'Resolve thread'
 
-          click_button 'Reply...'
+          find('.js-vue-discussion-reply').click
 
           find('.js-note-text').set 'testing'
 

spec/features/merge_request/user_sees_avatar_on_diff_notes_spec.rb

@@ -37,7 +37,7 @@ RSpec.describe 'Merge request > User sees avatars on diff notes', :js do
     end
 
     it 'does not render avatars after commenting on discussion tab' do
-      click_button 'Reply...'
+      find('.js-vue-discussion-reply').click
 
       page.within('.js-discussion-note-form') do
         find('.note-textarea').native.send_keys('Test comment')
@@ -132,7 +132,7 @@ RSpec.describe 'Merge request > User sees avatars on diff notes', :js do
       end
 
       it 'adds avatar when commenting' do
-        click_button 'Reply...'
+        first('.js-vue-discussion-reply').click
 
         page.within '.js-discussion-note-form' do
           find('.js-note-text').native.send_keys('Test')
@@ -151,7 +151,7 @@ RSpec.describe 'Merge request > User sees avatars on diff notes', :js do
 
       it 'adds multiple comments' do
         3.times do
-          click_button 'Reply...'
+          first('.js-vue-discussion-reply').click
 
           page.within '.js-discussion-note-form' do
             find('.js-note-text').native.send_keys('Test')

spec/features/merge_request/user_sees_discussions_spec.rb

@@ -60,7 +60,7 @@ RSpec.describe 'Merge request > User sees threads', :js do
 
       it 'can be replied to' do
         within(".discussion[data-discussion-id='#{discussion_id}']") do
-          click_button 'Reply...'
+          find('.js-vue-discussion-reply').click
           fill_in 'note[note]', with: 'Test!'
           click_button 'Comment'
 

spec/features/merge_request/user_sees_notes_from_forked_project_spec.rb

@@ -27,7 +27,7 @@ RSpec.describe 'Merge request > User sees notes from forked project', :js do
     expect(page).to have_content('A commit comment')
 
     page.within('.discussion-notes') do
-      find('.btn-text-field').click
+      find('.js-vue-discussion-reply').click
       scroll_to(page.find('#note_note', visible: false))
       find('#note_note').send_keys('A reply comment')
       find('.js-comment-button').click

spec/features/merge_request/user_suggests_changes_on_diff_spec.rb

@@ -83,7 +83,7 @@ RSpec.describe 'User comments on a diff', :js do
 
       wait_for_requests
 
-      click_button 'Reply...'
+      first('.js-vue-discussion-reply').click
 
       find('.js-suggestion-btn').click
 

spec/frontend/design_management/components/design_notes/design_discussion_spec.js

@@ -93,7 +93,7 @@ describe('Design discussions component', () => {
     });
 
     it('does not render a checkbox in reply form', () => {
-      findReplyPlaceholder().vm.$emit('onClick');
+      findReplyPlaceholder().vm.$emit('focus');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(findResolveCheckbox().exists()).toBe(false);
@@ -124,7 +124,7 @@ describe('Design discussions component', () => {
     });
 
     it('renders a checkbox with Resolve thread text in reply form', () => {
-      findReplyPlaceholder().vm.$emit('onClick');
+      findReplyPlaceholder().vm.$emit('focus');
       wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id });
 
       return wrapper.vm.$nextTick().then(() => {
@@ -193,7 +193,7 @@ describe('Design discussions component', () => {
       });
 
       it('renders a checkbox with Unresolve thread text in reply form', () => {
-        findReplyPlaceholder().vm.$emit('onClick');
+        findReplyPlaceholder().vm.$emit('focus');
         wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id });
 
         return wrapper.vm.$nextTick().then(() => {
@@ -205,7 +205,7 @@ describe('Design discussions component', () => {
 
   it('hides reply placeholder and opens form on placeholder click', () => {
     createComponent();
-    findReplyPlaceholder().vm.$emit('onClick');
+    findReplyPlaceholder().vm.$emit('focus');
     wrapper.setProps({ discussionWithOpenForm: defaultMockDiscussion.id });
 
     return wrapper.vm.$nextTick().then(() => {
@@ -307,7 +307,7 @@ describe('Design discussions component', () => {
 
   it('emits openForm event on opening the form', () => {
     createComponent();
-    findReplyPlaceholder().vm.$emit('onClick');
+    findReplyPlaceholder().vm.$emit('focus');
 
     expect(wrapper.emitted('open-form')).toBeTruthy();
   });

spec/frontend/notes/components/discussion_actions_spec.js

@@ -96,7 +96,7 @@ describe('DiscussionActions', () => {
 
     it('emits showReplyForm event when clicking on reply placeholder', () => {
       jest.spyOn(wrapper.vm, '$emit');
-      wrapper.find(ReplyPlaceholder).find('button').trigger('click');
+      wrapper.find(ReplyPlaceholder).find('textarea').trigger('focus');
       expect(wrapper.vm.$emit).toHaveBeenCalledWith('showReplyForm');
     });
 

spec/frontend/notes/components/discussion_reply_placeholder_spec.js

 import { shallowMount } from '@vue/test-utils';
 import ReplyPlaceholder from '~/notes/components/discussion_reply_placeholder.vue';
 
-const buttonText = 'Test Button Text';
+const placeholderText = 'Test Button Text';
 
 describe('ReplyPlaceholder', () => {
   let wrapper;
 
-  const findButton = () => wrapper.find({ ref: 'button' });
+  const findTextarea = () => wrapper.find('.js-vue-discussion-reply');
 
   beforeEach(() => {
     wrapper = shallowMount(ReplyPlaceholder, {
       propsData: {
-        buttonText,
+        placeholderText,
       },
     });
   });
@@ -20,17 +20,17 @@ describe('ReplyPlaceholder', () => {
     wrapper.destroy();
   });
 
-  it('emits onClick event on button click', () => {
-    findButton().trigger('click');
+  it('emits focus event on button click', () => {
+    findTextarea().trigger('focus');
 
     return wrapper.vm.$nextTick().then(() => {
       expect(wrapper.emitted()).toEqual({
-        onClick: [[]],
+        focus: [[]],
       });
     });
   });
 
   it('should render reply button', () => {
-    expect(findButton().text()).toEqual(buttonText);
+    expect(findTextarea().element.placeholder).toEqual(placeholderText);
   });
 });

spec/frontend/notes/components/noteable_discussion_spec.js

@@ -65,7 +65,7 @@ describe('noteable_discussion component', () => {
       expect(wrapper.vm.isReplying).toEqual(false);
 
       const replyPlaceholder = wrapper.find(ReplyPlaceholder);
-      replyPlaceholder.vm.$emit('onClick');
+      replyPlaceholder.vm.$emit('focus');
       await nextTick();
 
       expect(wrapper.vm.isReplying).toEqual(true);