fixed the focussiong of top action buttons on the details page

TUM-Dev · Jan 7, 2024 · 535af57 · 535af57
1 parent 8ac92f6
commit 535af57
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/webclient/src/components/DetailsFeedbackButton.vue b/webclient/src/components/DetailsFeedbackButton.vue
@@ -12,7 +12,7 @@ const { t } = useI18n({ useScope: "local" });
 <template>
   <button
     type="button"
-    class="btn btn-action btn-link btn-sm"
+    class="focusable rounded-sm"
     :title="t('feedback')"
     data-cy="open-feedback-details"
     @click="global.openFeedback('entry', `[${route.params.id}]: `)"

diff --git a/webclient/src/components/ShareButton.vue b/webclient/src/components/ShareButton.vue
@@ -28,7 +28,9 @@ const shareOptions = computed<UseShareOptions>(() => ({
 </script>
 
 <template>
-  <a type="button" :title="t('external_link')" @click="modalOpen = true"><ShareIcon class="h-4 w-4" /></a>
+  <button type="button" :title="t('external_link')" class="focusable rounded-sm" @click="modalOpen = true">
+    <ShareIcon class="h-4 w-4" />
+  </button>
   <Modal v-model="modalOpen" :title="t('share')">
     <div class="flex flex-col gap-5">
       <div class="flex flex-col gap-2">

diff --git a/webclient/src/pages/view/[id].vue b/webclient/src/pages/view/[id].vue
@@ -150,11 +150,15 @@ onMounted(() => {
         <div class="flex grow place-items-center justify-between">
           <span class="text-neutral-400">{{ state.data?.type_common_name }}</span>
           <div class="flex flex-row place-items-center gap-3">
-            <template v-if="state.data?.props?.calendar_url">
-              <a :href="state.data.props.calendar_url" target="_blank" :title="t('header.calendar')">
-                <CalendarDaysIcon class="mt-0.5 h-4 w-4" />
-              </a>
-            </template>
+            <a
+              v-if="state.data?.props?.calendar_url"
+              :href="state.data.props.calendar_url"
+              target="_blank"
+              class="focusable rounded-sm"
+              :title="t('header.calendar')"
+            >
+              <CalendarDaysIcon class="mt-0.5 h-4 w-4" />
+            </a>
             <ShareButton :coords="state.data.coords" :name="state.data.name" />
             <DetailsFeedbackButton ref="feedbackButton" />
             <!-- <button class="btn btn-link btn-action btn-sm"