From ef9368d2cb5910214e6335e42f4579ad70e3a25e Mon Sep 17 00:00:00 2001
From: sboursen-scinote <soufiane@scinote.net>
Date: Tue, 8 Aug 2023 18:39:32 +0200
Subject: [PATCH] Fix micro-interactions for shareable links modals [SCI-8987]

---
 .../stylesheets/shared_styles/elements/toggles.scss       | 6 ++++++
 .../shareable_links/components/delete_shareable_link.vue  | 6 +++---
 .../shareable_links/components/shareable_link_modal.vue   | 8 ++++++--
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/shared_styles/elements/toggles.scss b/app/assets/stylesheets/shared_styles/elements/toggles.scss
index 69dbbe300..360afcc2f 100644
--- a/app/assets/stylesheets/shared_styles/elements/toggles.scss
+++ b/app/assets/stylesheets/shared_styles/elements/toggles.scss
@@ -52,6 +52,12 @@ input[type="checkbox"].sci-toggle-checkbox {
     }
   }
 
+  &:focus + .sci-toggle-checkbox-label {
+    box-shadow: 0 0 0 4px var(--sn-science-blue-hover);
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
   &.hidden + .sci-toggle-checkbox-label {
     display: none;
   }
diff --git a/app/javascript/vue/shareable_links/components/delete_shareable_link.vue b/app/javascript/vue/shareable_links/components/delete_shareable_link.vue
index 8a9e37142..1831121eb 100644
--- a/app/javascript/vue/shareable_links/components/delete_shareable_link.vue
+++ b/app/javascript/vue/shareable_links/components/delete_shareable_link.vue
@@ -3,7 +3,7 @@
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          <button type="button" class="close" data-dismiss="modal" tabindex="0" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="modal-destroy-shareable-link">
             {{ i18n.t('shareable_links.destroy_modal.title')}}
           </h4>
@@ -12,8 +12,8 @@
           <p>{{ i18n.t('shareable_links.destroy_modal.description')}}</p>
         </div>
         <div class="modal-footer">
-          <button class="btn btn-secondary" @click="cancel">{{ i18n.t('general.cancel') }}</button>
-          <button class="btn btn-danger" @click="confirm">{{ i18n.t('shareable_links.destroy_modal.deactivate')}}</button>
+          <button class="btn btn-secondary" tabindex="0" @click="cancel">{{ i18n.t('general.cancel') }}</button>
+          <button class="btn btn-danger" tabindex="0" @click="confirm">{{ i18n.t('shareable_links.destroy_modal.deactivate')}}</button>
         </div>
       </div>
     </div>
diff --git a/app/javascript/vue/shareable_links/components/shareable_link_modal.vue b/app/javascript/vue/shareable_links/components/shareable_link_modal.vue
index 578cab1c3..aba633139 100644
--- a/app/javascript/vue/shareable_links/components/shareable_link_modal.vue
+++ b/app/javascript/vue/shareable_links/components/shareable_link_modal.vue
@@ -18,6 +18,7 @@
               type="button"
               class="close float-right !ml-auto"
               data-dismiss="modal"
+              tabindex="0"
               aria-label="Close"
             >
               <span aria-hidden="true">&times;</span>
@@ -31,6 +32,7 @@
                       v-model="sharedEnabled"
                       id="checkbox"
                       class="sci-toggle-checkbox"
+                      tabindex="0"
                       @change="checkboxChange"
                       @keyup.enter="handleCheckboxEnter"/>
                 <span class="sci-toggle-checkbox-label"></span>
@@ -39,6 +41,7 @@
             <div>
               <div class="sci-input-container-v2 textarea-lg mb-2">
                 <textarea ref="textarea"
+                          tabindex="0"
                           class="sci-input-field"
                           :class="{ 'error': error }"
                           v-model="description"
@@ -54,8 +57,8 @@
 
               <div class="mb-2" v-if="editing">
                 <div class="sci-btn-group flex justify-end">
-                  <button class="btn btn-secondary btn-sm" tabindex="-1" @mousedown="cancelDescriptionEdit">{{ i18n.t('general.cancel') }}</button>
-                  <button class="btn btn-secondary btn-sm" tabindex="-1" @mousedown="saveDescription" :disabled="error">{{ i18n.t('general.save') }}</button>
+                  <button class="btn btn-secondary btn-sm" tabindex="0" @mousedown="cancelDescriptionEdit">{{ i18n.t('general.cancel') }}</button>
+                  <button class="btn btn-secondary btn-sm" tabindex="0" @mousedown="saveDescription" :disabled="error">{{ i18n.t('general.save') }}</button>
                 </div>
               </div>
             </div>
@@ -71,6 +74,7 @@
                         :disabled="true"
                   />
                   <button class="btn btn-primary share-link-copy"
+                          tabindex="0"
                           @click="copy($refs.clone.value)"
                           :disabled="!sharedEnabled">{{ i18n.t('shareable_links.modal.copy_button') }}
                   </button>