From b3d7c3ff755a2591c25e9f04227df98d1f77a0b0 Mon Sep 17 00:00:00 2001
From: Anton <anton@scinote.net>
Date: Wed, 6 Jul 2022 14:31:55 +0200
Subject: [PATCH] Fix microinteractions for step editing [SCI-6933]

---
 .../stylesheets/my_modules/protocols/index.scss   |  2 ++
 .../shared_styles/elements/dropdown.scss          |  4 ----
 app/javascript/vue/protocol/container.vue         | 15 +++++++++------
 app/javascript/vue/protocol/protocolOptions.vue   |  1 +
 app/javascript/vue/protocol/step.vue              |  6 +++++-
 .../vue/protocol/step_attachments/file_modal.vue  |  6 ++++--
 .../vue/protocol/step_elements/checklist.vue      | 10 +++++++---
 .../vue/protocol/step_elements/checklistItem.vue  |  4 ++--
 .../vue/protocol/step_elements/table.vue          |  6 +++---
 .../vue/protocol/step_elements/text.vue           |  7 ++++---
 app/javascript/vue/shared/inline_edit.vue         |  2 +-
 11 files changed, 38 insertions(+), 25 deletions(-)

diff --git a/app/assets/stylesheets/my_modules/protocols/index.scss b/app/assets/stylesheets/my_modules/protocols/index.scss
index 10d22f77f..8598aab92 100644
--- a/app/assets/stylesheets/my_modules/protocols/index.scss
+++ b/app/assets/stylesheets/my_modules/protocols/index.scss
@@ -33,6 +33,7 @@
   .task-section-caret {
     color: $color-volcano;
     display: inline-block;
+    padding: .5em;
     text-decoration: none;
 
     .fas {
@@ -399,6 +400,7 @@
   .status-info {
     @include font-h2;
     color: inherit;
+    padding: .5em;
     text-decoration: none;
 
     &:hover,
diff --git a/app/assets/stylesheets/shared_styles/elements/dropdown.scss b/app/assets/stylesheets/shared_styles/elements/dropdown.scss
index be146e7c3..6489c3e44 100644
--- a/app/assets/stylesheets/shared_styles/elements/dropdown.scss
+++ b/app/assets/stylesheets/shared_styles/elements/dropdown.scss
@@ -4,10 +4,6 @@
 
 .sci-dropdown {
   [data-toggle="dropdown"] {
-    &:focus {
-      box-shadow: none;
-    }
-
     .caret {
       margin: 8px 0 8px 8px;
     }
diff --git a/app/javascript/vue/protocol/container.vue b/app/javascript/vue/protocol/container.vue
index 02aa0a85d..d6ca6c611 100644
--- a/app/javascript/vue/protocol/container.vue
+++ b/app/javascript/vue/protocol/container.vue
@@ -2,7 +2,7 @@
   <div class="task-protocol">
     <div class="task-section-header" v-if="!inRepository">
       <div class="portocol-header-left-part">
-        <a class="task-section-caret" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
+        <a class="task-section-caret" tabindex="0" role="button" data-toggle="collapse" href="#protocol-content" aria-expanded="true" aria-controls="protocol-content">
           <i class="fas fa-caret-right"></i>
           <div class="task-section-title">
             <h2>{{ i18n.t('Protocol') }}</h2>
@@ -14,11 +14,11 @@
       </div>
       <div class="actions-block">
         <div class="protocol-buttons-group">
-          <a v-if="urls.add_step_url" class="btn btn-primary" @click="addStep(steps.length)">
+          <a v-if="urls.add_step_url" class="btn btn-primary" @click="addStep(steps.length)" tabindex="0">
               <span class="fas fa-plus" aria-hidden="true"></span>
               <span>{{ i18n.t("protocols.steps.new_step") }}</span>
           </a>
-          <a class="btn btn-default" data-toggle="modal" data-target="#print-protocol-modal">
+          <a class="btn btn-secondary" data-toggle="modal" data-target="#print-protocol-modal" tabindex="0">
             <span class="fas fa-print" aria-hidden="true"></span>
             <span>{{ i18n.t("protocols.print.button") }}</span>
           </a>
@@ -69,15 +69,18 @@
         <span>{{ i18n.t("protocols.steps.new_step") }}</span>
       </a>
       <div v-if="steps.length > 0" class="protocol-step-actions">
-        <button class="btn btn-light" @click="collapseSteps">
+        <button class="btn btn-light" @click="collapseSteps" tabindex="0">
           <span class="fas fa-caret-up"></span>
           {{ i18n.t("protocols.steps.collapse_label") }}
         </button>
-        <button class="btn btn-light" @click="expandSteps">
+        <button class="btn btn-light" @click="expandSteps" tabindex="0">
           <span class="fas fa-caret-down"></span>
           {{ i18n.t("protocols.steps.expand_label") }}
         </button>
-        <a v-if="urls.reorder_steps_url" class="btn btn-light" data-toggle="modal" @click="startStepReorder">
+        <a v-if="urls.reorder_steps_url" class="btn btn-light" data-toggle="modal"
+           @click="startStepReorder"
+           @keyup.enter="startStepReorder"
+           tabindex="0" >
             <span class="fas fa-arrows-alt-v" aria-hidden="true"></span>
             <span>{{ i18n.t("protocols.reorder_steps.button") }}</span>
         </a>
diff --git a/app/javascript/vue/protocol/protocolOptions.vue b/app/javascript/vue/protocol/protocolOptions.vue
index bc9d3cb46..a6dea302f 100644
--- a/app/javascript/vue/protocol/protocolOptions.vue
+++ b/app/javascript/vue/protocol/protocolOptions.vue
@@ -8,6 +8,7 @@
         data-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="true"
+        tabindex="0"
       >
         <span class="fas fa-cog"></span>
         <span>{{ i18n.t("my_modules.protocol.options_dropdown.title") }}</span>
diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index 91ffaf097..0b6d2c1ab 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -22,7 +22,11 @@
           <span class="fas fa-caret-right"></span>
       </a>
       <div v-if="!inRepository" class="step-complete-container">
-        <div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`" @click="changeState"></div>
+        <div :class="`step-state ${step.attributes.completed ? 'completed' : ''}`"
+             @click="changeState"
+             @keyup.enter="changeState"
+             tabindex="0"
+        ></div>
       </div>
       <div class="step-position">
         {{ step.attributes.position + 1 }}.
diff --git a/app/javascript/vue/protocol/step_attachments/file_modal.vue b/app/javascript/vue/protocol/step_attachments/file_modal.vue
index 47882a283..0cd3390d4 100644
--- a/app/javascript/vue/protocol/step_attachments/file_modal.vue
+++ b/app/javascript/vue/protocol/step_attachments/file_modal.vue
@@ -21,7 +21,7 @@
                @dragover.prevent
           >
             <input type="file" class="hidden" ref=fileSelector @change="uploadFiles" multiple />
-            <div class="title" @click="$refs.fileSelector.click()">
+            <div class="title" @click="$refs.fileSelector.click()" tabindex="0" @keyup.enter="$refs.fileSelector.click()">
               <i class="fas fa-upload"></i>
               {{ i18n.t("protocols.steps.attachments.file_modal.drag_zone_title") }}
             </div>
@@ -45,6 +45,8 @@
                 :data-marvin-url="step.attributes.marvinjs_context.marvin_js_asset_url"
                 data-object-type="Step"
                 @click="openMarvinJsModal"
+                tabindex="0"
+                @keyup.enter="openMarvinJsModal"
               >
                 <span class="new-marvinjs-upload-icon">
                   <img :src="step.attributes.marvinjs_context.icon"/>
@@ -53,7 +55,7 @@
               </a>
             </div>
             <div class="integration-block wopi" v-if="step.attributes.wopi_enabled">
-              <a @click="openWopiFileModal" class="create-wopi-file-btn btn btn-light">
+              <a @click="openWopiFileModal" class="create-wopi-file-btn btn btn-light" tabindex="0" @keyup.enter="openWopiFileModal">
                 <img :src="step.attributes.wopi_context.icon"/>
                 {{ i18n.t('assets.create_wopi_file.button_text') }}
               </a>
diff --git a/app/javascript/vue/protocol/step_elements/checklist.vue b/app/javascript/vue/protocol/step_elements/checklist.vue
index 7c6b136d0..1ef8b14c1 100644
--- a/app/javascript/vue/protocol/step_elements/checklist.vue
+++ b/app/javascript/vue/protocol/step_elements/checklist.vue
@@ -22,10 +22,10 @@
         </span>
       </div>
       <div class="step-element-controls">
-        <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" @click="editingName = true">
+        <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" @click="editingName = true" tabindex="-1">
           <i class="fas fa-pen"></i>
         </button>
-        <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal">
+        <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="-1">
           <i class="fas fa-trash"></i>
         </button>
       </div>
@@ -56,7 +56,11 @@
           @multilinePaste="handleMultilinePaste"
         />
       </Draggable>
-      <div v-if="element.attributes.orderable.urls.create_item_url" class="btn btn-light step-checklist-add-item" @click="addItem">
+      <div v-if="element.attributes.orderable.urls.create_item_url"
+           class="btn btn-light step-checklist-add-item"
+           tabindex="0"
+           @keyup.enter="addItem"
+           @click="addItem">
         <i class="fas fa-plus"></i>
         {{ i18n.t('protocols.steps.insert.checklist_item') }}
       </div>
diff --git a/app/javascript/vue/protocol/step_elements/checklistItem.vue b/app/javascript/vue/protocol/step_elements/checklistItem.vue
index cff1b419f..be04ebb43 100644
--- a/app/javascript/vue/protocol/step_elements/checklistItem.vue
+++ b/app/javascript/vue/protocol/step_elements/checklistItem.vue
@@ -35,10 +35,10 @@
         </div>
       </div>
       <div class="step-element-controls">
-        <button v-if="!checklistItem.attributes.urls || updateUrl" class="btn icon-btn btn-light" @click="enableTextEdit">
+        <button v-if="!checklistItem.attributes.urls || updateUrl" class="btn icon-btn btn-light" @click="enableTextEdit" tabindex="-1">
           <i class="fas fa-pen"></i>
         </button>
-        <button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light" @click="showDeleteModal">
+        <button v-if="!checklistItem.attributes.urls || deleteUrl" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="-1">
           <i class="fas fa-trash"></i>
         </button>
       </div>
diff --git a/app/javascript/vue/protocol/step_elements/table.vue b/app/javascript/vue/protocol/step_elements/table.vue
index f3038d0d3..26b77ae51 100644
--- a/app/javascript/vue/protocol/step_elements/table.vue
+++ b/app/javascript/vue/protocol/step_elements/table.vue
@@ -22,15 +22,15 @@
         </span>
       </div>
       <div class="step-element-controls">
-        <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" @click="enableNameEdit">
+        <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" @click="enableNameEdit" tabindex="-1">
           <i class="fas fa-pen"></i>
         </button>
-        <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal">
+        <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="-1">
           <i class="fas fa-trash"></i>
         </button>
       </div>
     </div>
-    <div :class="'step-table ' + (editingTable ? 'edit' : 'view')">
+    <div :class="'step-table ' + (editingTable ? 'edit' : 'view')" tabindex="0" @keyup.enter="enableTableEdit">
       <div  class="enable-edit-mode" v-if="!editingTable && element.attributes.orderable.urls.update_url" @click="enableTableEdit">
         <i class="fas fa-pen"></i>
       </div>
diff --git a/app/javascript/vue/protocol/step_elements/text.vue b/app/javascript/vue/protocol/step_elements/text.vue
index a7671181f..afaf60d9f 100644
--- a/app/javascript/vue/protocol/step_elements/text.vue
+++ b/app/javascript/vue/protocol/step_elements/text.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="step-text-container" :class="{ 'edit': inEditMode }">
+  <div class="step-text-container" :class="{ 'edit': inEditMode }" @keyup.enter="enableEditMode($event)" tabindex="0">
     <div class="action-container" @click="enableEditMode($event)">
       <div v-if="reorderElementUrl" class="element-grip" @click="$emit('reorder')">
         <i class="fas fa-grip-vertical"></i>
       </div>
       <div class="buttons-container">
-        <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light">
+        <button v-if="element.attributes.orderable.urls.update_url" class="btn icon-btn btn-light" tabindex="-1">
           <i class="fas fa-pen"></i>
         </button>
-        <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal">
+        <button v-if="element.attributes.orderable.urls.delete_url" class="btn icon-btn btn-light" @click="showDeleteModal" tabindex="-1">
           <i class="fas fa-trash"></i>
         </button>
       </div>
@@ -63,6 +63,7 @@
       enableEditMode(e) {
         if ($(e.target).hasClass('fas fa-grip-vertical') || $(e.target).hasClass('element-grip')) return
         if (!this.element.attributes.orderable.urls.update_url) return
+        if (this.inEditMode == true) return
         this.inEditMode = true
       },
       disableEditMode() {
diff --git a/app/javascript/vue/shared/inline_edit.vue b/app/javascript/vue/shared/inline_edit.vue
index 81cec626d..911c887f6 100644
--- a/app/javascript/vue/shared/inline_edit.vue
+++ b/app/javascript/vue/shared/inline_edit.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sci-inline-edit" :class="{ 'editing': editing }">
+  <div class="sci-inline-edit" :class="{ 'editing': editing }" tabindex="0" @keyup.enter="enableEdit">
     <div class="sci-inline-edit__content">
       <textarea
         ref="input"