Replace button with div

Due to a bug in Firefox buttons are not draggable:
https://bugzilla.mozilla.org/show_bug.cgi?id=568313

This changes the button to a div and uses "role" to keep
the semantics for ARIA

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

@@ -215,7 +215,8 @@ export default {
               class="add-diff-note tooltip-wrapper"
               :title="addCommentTooltipLeft"
             >
-              <button
+              <div
+                role="button"
                 :draggable="glFeatures.dragCommentSelection"
                 type="button"
                 class="add-diff-note unified-diff-components-diff-note-button note-button js-add-diff-note-button qa-diff-comment"
@@ -224,7 +225,7 @@ export default {
                 :disabled="line.left.commentsDisabled"
                 @click="handleCommentButton(line.left)"
                 @dragstart="onDragStart({ ...line.left, index })"
-              ></button>
+              ></div>
             </span>
           </template>
           <a

changelogs/unreleased/327013-draggable-comment-icon-for-multiline-comment-broken-on-firefox.yml

+---
+title: Fix multiline comment dragging in Firefox
+merge_request: 58692
+author:
+type: fixed