From dbf8c55b86f1b77136dfbc1e00bdc1be550668cb Mon Sep 17 00:00:00 2001
From: Alessandro Venturini <ales.ventus21@gmail.com>
Date: Fri, 29 Aug 2025 16:44:25 +0200
Subject: [PATCH 1/5] chore: improved accessibility for ValueIOControl

---
 src/components/devices/ValueIOControl.vue | 119 +++++++++++++---------
 src/views/devices/DeviceView.vue          |   2 +
 2 files changed, 71 insertions(+), 50 deletions(-)

diff --git a/src/components/devices/ValueIOControl.vue b/src/components/devices/ValueIOControl.vue
index ce8cd6c..5f5ec63 100644
--- a/src/components/devices/ValueIOControl.vue
+++ b/src/components/devices/ValueIOControl.vue
@@ -22,6 +22,7 @@ const { typeConstraints, isInput } = defineProps<{
    * Tells the control if it should also register user input
    */
   isInput: boolean
+  accessibilityLabel: string
 }>()
 const emit = defineEmits<{
   /**
@@ -114,74 +115,92 @@ const rangeControlValue = computed({
 
 <template>
   <div v-if="type === Type.BooleanType">
-    <input
-      type="checkbox"
-      class="toggle toggle-primary"
-      :disabled="!isInput"
-      :checked="(value as boolean) == true"
-      @change="processInput(($event.target as HTMLInputElement).checked)"
-    />
+    <label>
+      <span class="hidden">{{ accessibilityLabel }}</span>
+      <input
+        type="checkbox"
+        class="toggle toggle-primary"
+        :disabled="!isInput"
+        :checked="(value as boolean) == true"
+        @change="processInput(($event.target as HTMLInputElement).checked)"
+    /></label>
   </div>
   <div v-if="type === Type.StringType">
     <div v-if="isInput">
       <div v-if="isEnumTypeConstraints(typeConstraints)">
-        <select
-          class="select select-primary"
-          @change="processInput(($event.target as HTMLSelectElement).selectedOptions[0].value)"
-        >
-          <option v-for="v in typeConstraints.values" :key="v" :selected="v === value">
-            {{ v }}
-          </option>
-        </select>
+        <label>
+          <span class="hidden">{{ accessibilityLabel }}</span>
+          <select
+            class="select select-primary"
+            @change="processInput(($event.target as HTMLSelectElement).selectedOptions[0].value)"
+          >
+            <option v-for="v in typeConstraints.values" :key="v" :selected="v === value">
+              {{ v }}
+            </option>
+          </select>
+        </label>
+      </div>
+      <div v-else>
+        <label>
+          <span class="hidden">{{ accessibilityLabel }}</span>
+          <input
+            type="text"
+            v-model="value"
+            @change="processInput(htmlInputValue($event.target))"
+          />
+        </label>
       </div>
-      <input
-        v-else
-        type="text"
-        v-model="value"
-        @change="processInput(htmlInputValue($event.target))"
-      />
     </div>
     <span v-else> {{ value }} </span>
   </div>
   <div v-if="type === Type.IntType || type === Type.DoubleType">
     <div v-if="isRangeTypeConstraints(typeConstraints)" class="flex flex-col max-w-xs">
       <span class="self-center">{{ rangeControlValue }}</span>
-      <input
-        type="range"
-        class="range range-primary"
-        :min="typeConstraints.min"
-        :max="typeConstraints.max"
-        :step="type == Type.IntType ? 1 : '0.01'"
-        :disabled="!isInput"
-        v-model.number="rangeControlValue"
-        @mousedown="isRangeControlDetached = true"
-        @touchstart="isRangeControlDetached = true"
-        @change="
-          (processInput(Number.parseFloat(htmlInputValue($event.target))),
-          (isRangeControlDetached = false))
-        "
-      />
+      <label>
+        <span class="hidden">{{ accessibilityLabel }}</span>
+        <input
+          type="range"
+          class="range range-primary"
+          :min="typeConstraints.min"
+          :max="typeConstraints.max"
+          :step="type == Type.IntType ? 1 : '0.01'"
+          :disabled="!isInput"
+          v-model.number="rangeControlValue"
+          @mousedown="isRangeControlDetached = true"
+          @touchstart="isRangeControlDetached = true"
+          @change="
+            (processInput(Number.parseFloat(htmlInputValue($event.target))),
+            (isRangeControlDetached = false))
+          "
+      /></label>
       <div class="flex flex-row justify-between">
         <span class="opacity-30">{{ typeConstraints.min }}</span>
         <span class="opacity-30">{{ typeConstraints.max }}</span>
       </div>
     </div>
-    <input
-      v-else-if="isInput"
-      class="input input-primary validator field-sizing-content min-w-[8rem]"
-      type="number"
-      :step="type == Type.IntType ? 1 : '0.01'"
-      v-model.number="value"
-      @change="processInput(Number.parseFloat(htmlInputValue($event.target)))"
-    />
+    <div v-else-if="isInput">
+      <label>
+        <span class="hidden">{{ accessibilityLabel }}</span>
+        <input
+          class="input input-primary validator field-sizing-content min-w-[8rem]"
+          type="number"
+          :step="type == Type.IntType ? 1 : '0.01'"
+          v-model.number="value"
+          @change="processInput(Number.parseFloat(htmlInputValue($event.target)))"
+        />
+      </label>
+    </div>
     <span v-else> {{ value }} </span>
   </div>
   <div v-if="type === Type.ColorType">
-    <input
-      type="color"
-      :disabled="!isInput"
-      :value="'#' + rgbHex((value as Color).r, (value as Color).g, (value as Color).b)"
-      @change="processInput(hexToColor(htmlInputValue($event.target)))"
-    />
+    <label>
+      <span class="hidden">{{ accessibilityLabel }}</span>
+      <input
+        type="color"
+        :disabled="!isInput"
+        :value="'#' + rgbHex((value as Color).r, (value as Color).g, (value as Color).b)"
+        @change="processInput(hexToColor(htmlInputValue($event.target)))"
+      />
+    </label>
   </div>
 </template>
diff --git a/src/views/devices/DeviceView.vue b/src/views/devices/DeviceView.vue
index ddbd6f3..2df0e1e 100644
--- a/src/views/devices/DeviceView.vue
+++ b/src/views/devices/DeviceView.vue
@@ -162,6 +162,7 @@ onUnmounted(() => {
         <ValueIOControl
           :typeConstraints="p.typeConstraints"
           :isInput="p.setter !== undefined"
+          :accessibility-label="p.name"
           v-model="p.value"
           @input="(input) => onPropertyInput(p, input)"
         />
@@ -218,6 +219,7 @@ onUnmounted(() => {
         v-if="executingAction"
         :typeConstraints="executingAction!.inputTypeConstraints"
         :isInput="true"
+        :accessibility-label="executingAction!.name"
         v-model="executingActionInput"
         v-model:isInputValid="isExecutingActionInputValid"
       />

From 2f018c2d57b763a8b4f1ab6e96a2347992018a6f Mon Sep 17 00:00:00 2001
From: Alessandro Venturini <ales.ventus21@gmail.com>
Date: Fri, 29 Aug 2025 16:51:06 +0200
Subject: [PATCH 2/5] chore: use span instead of i html element

---
 src/components/AddButton.vue |  4 ++--
 src/views/LoginView.vue      |  6 +++---
 src/views/SettingsView.vue   | 14 +++++++-------
 src/views/SigninView.vue     | 12 ++++++------
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/components/AddButton.vue b/src/components/AddButton.vue
index 8a85686..4b303df 100644
--- a/src/components/AddButton.vue
+++ b/src/components/AddButton.vue
@@ -19,7 +19,7 @@ function onclick() {
         class="btn btn-primary shadow !flex items-center gap-2 w-12 h-12 sm:w-auto sm:h-auto sm:gap-2 rounded-full sm:rounded-lg py-2 pointer-events-auto"
       >
         <span class="hidden sm:inline text-lg font-semibold">Add</span>
-        <i class="fa-solid fa-plus fa-lg"></i>
+        <span class="fa-solid fa-plus fa-lg"></span>
       </RouterLink>
 
       <template v-else>
@@ -29,7 +29,7 @@ function onclick() {
           class="btn btn-primary shadow !flex items-center gap-2 w-12 h-12 sm:w-auto sm:h-auto sm:gap-2 rounded-full sm:rounded-lg py-2 pointer-events-auto"
         >
           <span class="hidden sm:inline text-lg font-semibold">Add</span>
-          <i class="fa-solid fa-plus fa-lg"></i>
+          <span class="fa-solid fa-plus fa-lg"></span>
         </button>
       </template>
     </div>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 3e2a46c..f35f7f7 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -9,7 +9,7 @@
         <div class="form-control">
           <span class="label-text">Email</span><br />
           <label class="input validator w-full">
-            <i class="fa-regular fa-envelope opacity-50"></i>
+            <span class="fa-regular fa-envelope opacity-50"></span>
             <input
               v-model="form.email"
               type="email"
@@ -32,7 +32,7 @@
           <span class="label-text">Password</span>
           <div class="relative">
             <label class="input validator w-full">
-              <i class="fa-solid fa-key opacity-50"></i>
+              <span class="fa-solid fa-key opacity-50"></span>
               <input
                 v-model="form.password"
                 :type="showPassword ? 'text' : 'password'"
@@ -46,7 +46,7 @@
                 class="absolute inset-y-0 right-0 flex items-center justify-center w-10 text-gray-500 hover:text-gray-700"
                 @click="showPassword = !showPassword"
               >
-                <i :class="showPassword ? 'fa-eye-slash' : 'fa-eye'" class="fas"></i>
+                <span :class="showPassword ? 'fa-eye-slash' : 'fa-eye'" class="fas"></span>
               </button>
             </label>
           </div>
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index 2ed6b9a..0053806 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -2,7 +2,7 @@
   <NavbarLayout title="Settings">
     <template #actions>
       <button @click="logout" class="btn btn-ghost btn-sm text-error mr-1" title="Logout">
-        <i class="fa-solid fa-sign-out-alt fa-lg"></i>
+        <span class="fa-solid fa-sign-out-alt fa-lg"></span>
       </button>
     </template>
 
@@ -10,7 +10,7 @@
       <div class="form-control">
         <span class="label-text">Nickname</span>
         <label class="input validator w-full">
-          <i class="fa-regular fa-user opacity-50"></i>
+          <span class="fa-regular fa-user opacity-50"></span>
           <input
             v-model="form.nickname"
             type="text"
@@ -31,7 +31,7 @@
       <div class="form-control">
         <span class="label-text">Email</span><br />
         <label class="input validator w-full opacity-50">
-          <i class="fa-regular fa-envelope"></i>
+          <span class="fa-regular fa-envelope"></span>
           <input
             v-model="form.email"
             type="email"
@@ -54,7 +54,7 @@
         <span class="label-text">New password</span>
         <div class="relative">
           <label class="input validator w-full">
-            <i class="fa-solid fa-key opacity-50"></i>
+            <span class="fa-solid fa-key opacity-50"></span>
             <input
               v-model="form.password"
               :type="showPassword ? 'text' : 'password'"
@@ -67,7 +67,7 @@
               class="absolute inset-y-0 right-0 flex items-center justify-center w-10 text-gray-500 hover:text-gray-700"
               @click="showPassword = !showPassword"
             >
-              <i :class="showPassword ? 'fa-eye-slash' : 'fa-eye'" class="fas"></i>
+              <span :class="showPassword ? 'fa-eye-slash' : 'fa-eye'" class="fas"></span>
             </button>
           </label>
         </div>
@@ -84,7 +84,7 @@
         <span class="label-text">Confirm new password</span>
         <div class="relative">
           <label class="input validator w-full">
-            <i class="fa-solid fa-key opacity-50"></i>
+            <span class="fa-solid fa-key opacity-50"></span>
             <input
               v-model="form.confirmPassword"
               :type="showConfirmPassword ? 'text' : 'password'"
@@ -97,7 +97,7 @@
               class="absolute inset-y-0 right-0 flex items-center justify-center w-10 text-gray-500 hover:text-gray-700"
               @click="showConfirmPassword = !showConfirmPassword"
             >
-              <i :class="showConfirmPassword ? 'fa-eye-slash' : 'fa-eye'" class="fas"></i>
+              <span :class="showConfirmPassword ? 'fa-eye-slash' : 'fa-eye'" class="fas"></span>
             </button>
           </label>
         </div>
diff --git a/src/views/SigninView.vue b/src/views/SigninView.vue
index 3980325..ffbdd43 100644
--- a/src/views/SigninView.vue
+++ b/src/views/SigninView.vue
@@ -9,7 +9,7 @@
         <div class="form-control">
           <span class="label-text">Nickname</span>
           <label class="input validator w-full">
-            <i class="fa-regular fa-user opacity-50"></i>
+            <span class="fa-regular fa-user opacity-50"></span>
             <input
               v-model="form.nickname"
               type="text"
@@ -30,7 +30,7 @@
         <div class="form-control">
           <span class="label-text">Email</span><br />
           <label class="input validator w-full">
-            <i class="fa-regular fa-envelope opacity-50"></i>
+            <span class="fa-regular fa-envelope opacity-50"></span>
             <input
               v-model="form.email"
               type="email"
@@ -52,7 +52,7 @@
           <span class="label-text">Password</span>
           <div class="relative">
             <label class="input validator w-full">
-              <i class="fa-solid fa-key opacity-50"></i>
+              <span class="fa-solid fa-key opacity-50"></span>
               <input
                 v-model="form.password"
                 :type="showPassword ? 'text' : 'password'"
@@ -65,7 +65,7 @@
                 class="absolute inset-y-0 right-0 flex items-center justify-center w-10 text-gray-500 hover:text-gray-700"
                 @click="showPassword = !showPassword"
               >
-                <i :class="showPassword ? 'fa-eye-slash' : 'fa-eye'" class="fas"></i>
+                <span :class="showPassword ? 'fa-eye-slash' : 'fa-eye'" class="fas"></span>
               </button>
             </label>
           </div>
@@ -82,7 +82,7 @@
           <span class="label-text">Confirm password</span>
           <div class="relative">
             <label class="input validator w-full">
-              <i class="fa-solid fa-key opacity-50"></i>
+              <span class="fa-solid fa-key opacity-50"></span>
               <input
                 v-model="form.confirmPassword"
                 :type="showConfirmPassword ? 'text' : 'password'"
@@ -95,7 +95,7 @@
                 class="absolute inset-y-0 right-0 flex items-center justify-center w-10 text-gray-500 hover:text-gray-700"
                 @click="showConfirmPassword = !showConfirmPassword"
               >
-                <i :class="showConfirmPassword ? 'fa-eye-slash' : 'fa-eye'" class="fas"></i>
+                <span :class="showConfirmPassword ? 'fa-eye-slash' : 'fa-eye'" class="fas"></span>
               </button>
             </label>
           </div>

From 07481346828d797a87fc4c977949cdf69b08e6a8 Mon Sep 17 00:00:00 2001
From: Alessandro Venturini <ales.ventus21@gmail.com>
Date: Fri, 29 Aug 2025 16:52:24 +0200
Subject: [PATCH 3/5] chore: better accessibility for ManageDevicesView

---
 .../admin/manage-devices/ManageDevicesView.vue    | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/views/admin/manage-devices/ManageDevicesView.vue b/src/views/admin/manage-devices/ManageDevicesView.vue
index 7a245fe..a016146 100644
--- a/src/views/admin/manage-devices/ManageDevicesView.vue
+++ b/src/views/admin/manage-devices/ManageDevicesView.vue
@@ -104,12 +104,15 @@ onMounted(async () => {
     <dialog ref="edit-device-name-modal" class="modal modal-middle">
       <div class="modal-box max-w-sm">
         <h3 class="card-title mb-2 mx-auto justify-center">Change the device name</h3>
-        <input
-          type="text"
-          placeholder="Device name"
-          class="input w-full"
-          v-model="deviceEditingName"
-        />
+        <label>
+          <span class="hidden">Device name</span>
+          <input
+            type="text"
+            placeholder="Device name"
+            class="input w-full"
+            v-model="deviceEditingName"
+          />
+        </label>
         <div class="modal-action">
           <button class="btn btn-primary" v-on:click="saveEditingDevice()">Save</button>
         </div>

From 1208355a1842b4616d9970ef9a99d66d3cd21025 Mon Sep 17 00:00:00 2001
From: Alessandro Venturini <ales.ventus21@gmail.com>
Date: Fri, 29 Aug 2025 16:55:31 +0200
Subject: [PATCH 4/5] chore: better accessibility for DeviceGroupsView

---
 .../admin/device-groups/DeviceGroupsView.vue  | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/views/admin/device-groups/DeviceGroupsView.vue b/src/views/admin/device-groups/DeviceGroupsView.vue
index eeeea4a..4bafb4c 100644
--- a/src/views/admin/device-groups/DeviceGroupsView.vue
+++ b/src/views/admin/device-groups/DeviceGroupsView.vue
@@ -117,12 +117,14 @@ onMounted(async () => {
   <dialog ref="create-group-modal" class="modal modal-middle">
     <div class="modal-box max-w-sm">
       <h3 class="card-title mb-2 mx-auto justify-center">Create a new group</h3>
-      <input
-        type="text"
-        placeholder="Group name"
-        class="input w-full"
-        v-model="groupCreatingName"
-      />
+      <label>
+        <span class="hidden">Group name</span>
+        <input
+          type="text"
+          placeholder="Group name"
+          class="input w-full"
+          v-model="groupCreatingName"
+      /></label>
       <div class="modal-action">
         <button
           class="btn btn-primary"
@@ -142,7 +144,15 @@ onMounted(async () => {
   <dialog ref="edit-group-name-modal" class="modal modal-middle">
     <div class="modal-box max-w-sm">
       <h3 class="card-title mb-2 mx-auto justify-center">Change the group name</h3>
-      <input type="text" placeholder="Group name" class="input w-full" v-model="groupEditingName" />
+      <label>
+        <span class="hidden">Group name</span>
+        <input
+          type="text"
+          placeholder="Group name"
+          class="input w-full"
+          v-model="groupEditingName"
+        />
+      </label>
       <div class="modal-action">
         <button
           class="btn btn-primary"

From e2df632fd5b2891043f83081f8d002d1eac8c667 Mon Sep 17 00:00:00 2001
From: Alessandro Venturini <ales.ventus21@gmail.com>
Date: Mon, 1 Sep 2025 17:57:25 +0200
Subject: [PATCH 5/5] chore: use p instead of h in dialog titles

---
 src/components/DeviceGroupsDialog.vue                     | 2 +-
 src/components/ErrorPresenter.vue                         | 8 ++++----
 .../tasks-automations/ConstantInstructionItem.vue         | 2 +-
 .../CreateDevicePropertyConstantInstructionItem.vue       | 4 ++--
 .../tasks-automations/DeviceActionInstructionItem.vue     | 2 +-
 .../tasks-automations/DeviceActionPropertyDialog.vue      | 2 +-
 src/components/tasks-automations/InfoDialogs.vue          | 6 +++---
 src/components/tasks-automations/InstructionItems.vue     | 4 ++--
 .../AutomationsAndTasksPermissionsView.vue                | 2 +-
 src/views/admin/device-groups/DeviceGroupsView.vue        | 4 ++--
 src/views/admin/manage-devices/ManageDevicesView.vue      | 2 +-
 .../admin/users-permissions/UsersPermissionsView.vue      | 2 +-
 src/views/automations/AutomationsView.vue                 | 2 +-
 src/views/devices/DeviceView.vue                          | 6 +++---
 src/views/tasks/TasksView.vue                             | 2 +-
 15 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/DeviceGroupsDialog.vue b/src/components/DeviceGroupsDialog.vue
index 804c2ac..cda0c79 100644
--- a/src/components/DeviceGroupsDialog.vue
+++ b/src/components/DeviceGroupsDialog.vue
@@ -23,7 +23,7 @@ groupDialogStore.$subscribe(() => {
 <template>
   <dialog ref="groups_info" class="modal modal-sm">
     <div class="modal-box max-w-sm" v-if="device">
-      <h3 class="card-title mb-2">{{ device.name }} groups</h3>
+      <p class="card-title mb-2">{{ device.name }} groups</p>
       <p>The {{ device.name }} is in these groups right now:</p>
       <p class="font-bold" v-for="group in deviceGroups" :key="group.id">- {{ group.name }}</p>
     </div>
diff --git a/src/components/ErrorPresenter.vue b/src/components/ErrorPresenter.vue
index b786723..8662914 100644
--- a/src/components/ErrorPresenter.vue
+++ b/src/components/ErrorPresenter.vue
@@ -58,13 +58,13 @@ state.$subscribe(async () => {
 
 <template>
   <slot></slot>
-  <dialog ref="error-presenter-dialog" class="modal modal-bottom sm:modal-middle">
-    <div class="modal-box">
-      <h3 class="text-lg font-bold">{{ errorTitle }}</h3>
+  <dialog ref="error-presenter-dialog" class="modal modal-middle">
+    <div class="modal-box max-w-sm">
+      <p class="card-title mb-2 mx-auto justify-center">{{ errorTitle }}</p>
       <p class="whitespace-pre-line">{{ errorMessage }}</p>
       <p v-if="errorCause" class="text-sm opacity-60 whitespace-pre-line">{{ errorCause }}</p>
       <div class="modal-action">
-        <button class="btn btn-primary btn-soft" @click="okPressed">Ok</button>
+        <button class="btn btn-primary" @click="okPressed">Ok</button>
       </div>
     </div>
   </dialog>
diff --git a/src/components/tasks-automations/ConstantInstructionItem.vue b/src/components/tasks-automations/ConstantInstructionItem.vue
index 7acd5eb..fb5ffb1 100644
--- a/src/components/tasks-automations/ConstantInstructionItem.vue
+++ b/src/components/tasks-automations/ConstantInstructionItem.vue
@@ -26,7 +26,7 @@
 
   <dialog :id="id" class="modal">
     <div class="modal-box max-w-sm">
-      <h3 class="card-title mx-2 mb-2">Set constant</h3>
+      <p class="card-title mx-2 mb-2">Set constant</p>
       <form @submit.prevent="handleConfirm">
         <label for="name" class="fieldset-legend text-sm mx-3 mt-2">Name</label>
         <input
diff --git a/src/components/tasks-automations/CreateDevicePropertyConstantInstructionItem.vue b/src/components/tasks-automations/CreateDevicePropertyConstantInstructionItem.vue
index eefbfb4..6e09334 100644
--- a/src/components/tasks-automations/CreateDevicePropertyConstantInstructionItem.vue
+++ b/src/components/tasks-automations/CreateDevicePropertyConstantInstructionItem.vue
@@ -24,7 +24,7 @@
 
   <dialog :id="id + '_info'" class="modal modal-sm">
     <div class="modal-box max-w-sm" v-if="property">
-      <h3 class="card-title mb-2">{{ property.name }} type constraints info</h3>
+      <p class="card-title mb-2">{{ property.name }} type constraints info</p>
       <div v-if="property.typeConstraints.__brand === 'Enum'">
         <p>Possible values for {{ property.name }} property:</p>
         <ul class="list-inside list-disc">
@@ -61,7 +61,7 @@
 
   <dialog :id="id" class="modal" v-if="device && property">
     <div class="modal-box max-w-sm">
-      <h3 class="card-title mx-2 mb-2">Device property</h3>
+      <p class="card-title mx-2 mb-2">Device property</p>
       <form @submit.prevent="handleConfirm">
         <!-- Selection of a property -->
         <label for="properties" class="fieldset-legend text-sm mx-3"
diff --git a/src/components/tasks-automations/DeviceActionInstructionItem.vue b/src/components/tasks-automations/DeviceActionInstructionItem.vue
index 946666d..da48a63 100644
--- a/src/components/tasks-automations/DeviceActionInstructionItem.vue
+++ b/src/components/tasks-automations/DeviceActionInstructionItem.vue
@@ -27,7 +27,7 @@
 
   <dialog :id="id" class="modal" v-if="device && action">
     <div class="modal-box max-w-sm">
-      <h3 class="card-title mx-2 mb-2">Device action</h3>
+      <p class="card-title mx-2 mb-2">Device action</p>
       <form @submit.prevent="handleConfirm">
         <!-- Selection of an action -->
         <label for="actions" class="fieldset-legend text-sm mx-3">{{ device.name }} actions</label>
diff --git a/src/components/tasks-automations/DeviceActionPropertyDialog.vue b/src/components/tasks-automations/DeviceActionPropertyDialog.vue
index c6f44e1..a154674 100644
--- a/src/components/tasks-automations/DeviceActionPropertyDialog.vue
+++ b/src/components/tasks-automations/DeviceActionPropertyDialog.vue
@@ -45,7 +45,7 @@ function handleConfirm() {
 <template>
   <dialog id="device_action_property" class="modal modal-middle">
     <div class="modal-box max-w-sm" v-if="selectedDevice">
-      <h3 class="card-title mb-2 mx-auto justify-center">{{ selectedDevice.name }}</h3>
+      <p class="card-title mb-2 mx-auto justify-center">{{ selectedDevice.name }}</p>
       <p>{{ selectedDevice.name }} has been selected.</p>
       <p v-if="selectedDevice.actions.length != 0 && selectedDevice.properties.length != 0">
         Do you want to create a <span class="font-bold">constant</span> linked to a property or an
diff --git a/src/components/tasks-automations/InfoDialogs.vue b/src/components/tasks-automations/InfoDialogs.vue
index d5d741f..6629081 100644
--- a/src/components/tasks-automations/InfoDialogs.vue
+++ b/src/components/tasks-automations/InfoDialogs.vue
@@ -1,7 +1,7 @@
 <template>
   <dialog id="devices_info" class="modal modal-md">
     <div class="modal-box max-w-md">
-      <h3 class="card-title mb-2">Info about devices instructions</h3>
+      <p class="card-title mb-2">Info about devices instructions</p>
       <ul class="list-disc list-inside">
         <li>
           <span class="font-bold">Properties</span>
@@ -23,7 +23,7 @@
 
   <dialog id="operations_info" class="modal modal-md">
     <div class="modal-box max-w-md">
-      <h3 class="card-title mb-2">Info about operation instructions</h3>
+      <p class="card-title mb-2">Info about operation instructions</p>
       <ul class="list-disc list-inside">
         <li>
           <span class="font-bold">Create constant</span>
@@ -53,7 +53,7 @@
 
   <dialog id="flow_info" class="modal modal-md">
     <div class="modal-box max-w-md">
-      <h3 class="card-title mb-2">Info about control flow instructions</h3>
+      <p class="card-title mb-2">Info about control flow instructions</p>
       <ul class="list-inside list-disc">
         <li>
           <span class="font-bold">If</span>
diff --git a/src/components/tasks-automations/InstructionItems.vue b/src/components/tasks-automations/InstructionItems.vue
index fa0f6bc..d547f79 100644
--- a/src/components/tasks-automations/InstructionItems.vue
+++ b/src/components/tasks-automations/InstructionItems.vue
@@ -81,13 +81,13 @@ function addSendNotification() {
   <dialog ref="add-instruction-modal" class="modal modal-end">
     <div class="modal-box sm:w-4/12 w-7/12 max-w-screen">
       <div class="grid grid-cols-3">
-        <h3 class="text-xl col-span-3 mb-2 mt-1">
+        <p class="text-xl col-span-3 mb-2 mt-1">
           Control flow instructions
           <button
             class="fa-circle-info fa-solid fa-sm btn btn-ghost btn-xs btn-circle"
             onclick="flow_info.showModal()"
           ></button>
-        </h3>
+        </p>
         <button
           type="button"
           class="btn justify-start my-1 sm:col-span-2 col-span-3"
diff --git a/src/views/admin/automations-task-permissions/AutomationsAndTasksPermissionsView.vue b/src/views/admin/automations-task-permissions/AutomationsAndTasksPermissionsView.vue
index 9dc90c5..c787e5c 100644
--- a/src/views/admin/automations-task-permissions/AutomationsAndTasksPermissionsView.vue
+++ b/src/views/admin/automations-task-permissions/AutomationsAndTasksPermissionsView.vue
@@ -86,7 +86,7 @@ onMounted(async () => {
     </template>
     <dialog id="permissions_info" class="modal modal-sm">
       <div class="modal-box max-w-sm">
-        <h2 class="card-title mb-2">Scripts permissions info</h2>
+        <p class="card-title mb-2">Scripts permissions info</p>
         <p>
           In this page, you can modify the editlist (task/automation), whitelist and blacklist (only
           for tasks).
diff --git a/src/views/admin/device-groups/DeviceGroupsView.vue b/src/views/admin/device-groups/DeviceGroupsView.vue
index 4bafb4c..63a49aa 100644
--- a/src/views/admin/device-groups/DeviceGroupsView.vue
+++ b/src/views/admin/device-groups/DeviceGroupsView.vue
@@ -116,7 +116,7 @@ onMounted(async () => {
   <!-- Dialog for creating a new group -->
   <dialog ref="create-group-modal" class="modal modal-middle">
     <div class="modal-box max-w-sm">
-      <h3 class="card-title mb-2 mx-auto justify-center">Create a new group</h3>
+      <p class="card-title mb-2 mx-auto justify-center">Create a new group</p>
       <label>
         <span class="hidden">Group name</span>
         <input
@@ -143,7 +143,7 @@ onMounted(async () => {
   <!-- Dialog for changing a group name -->
   <dialog ref="edit-group-name-modal" class="modal modal-middle">
     <div class="modal-box max-w-sm">
-      <h3 class="card-title mb-2 mx-auto justify-center">Change the group name</h3>
+      <p class="card-title mb-2 mx-auto justify-center">Change the group name</p>
       <label>
         <span class="hidden">Group name</span>
         <input
diff --git a/src/views/admin/manage-devices/ManageDevicesView.vue b/src/views/admin/manage-devices/ManageDevicesView.vue
index a016146..8388539 100644
--- a/src/views/admin/manage-devices/ManageDevicesView.vue
+++ b/src/views/admin/manage-devices/ManageDevicesView.vue
@@ -103,7 +103,7 @@ onMounted(async () => {
     <!-- Dialog for changing a device name -->
     <dialog ref="edit-device-name-modal" class="modal modal-middle">
       <div class="modal-box max-w-sm">
-        <h3 class="card-title mb-2 mx-auto justify-center">Change the device name</h3>
+        <p class="card-title mb-2 mx-auto justify-center">Change the device name</p>
         <label>
           <span class="hidden">Device name</span>
           <input
diff --git a/src/views/admin/users-permissions/UsersPermissionsView.vue b/src/views/admin/users-permissions/UsersPermissionsView.vue
index ec09a7c..48a57da 100644
--- a/src/views/admin/users-permissions/UsersPermissionsView.vue
+++ b/src/views/admin/users-permissions/UsersPermissionsView.vue
@@ -33,7 +33,7 @@
     </template>
     <dialog id="permissions_info" class="modal modal-sm">
       <div class="modal-box max-w-sm">
-        <h2 class="card-title mb-2">Users permissions info</h2>
+        <p class="card-title mb-2">Users permissions info</p>
         <p>On this page, the list of registered users is shown.</p>
         <p>
           By clicking on a user, you are shown a list of device permissions that you can add or
diff --git a/src/views/automations/AutomationsView.vue b/src/views/automations/AutomationsView.vue
index 34e55e1..47f813e 100644
--- a/src/views/automations/AutomationsView.vue
+++ b/src/views/automations/AutomationsView.vue
@@ -87,7 +87,7 @@ async function toggle(automation: Automation) {
 
     <dialog id="automations_info" class="modal modal-sm">
       <div class="modal-box max-w-sm">
-        <h2 class="card-title mb-2">Automations info</h2>
+        <p class="card-title mb-2">Automations info</p>
         <p>
           Automations are a sequence of instruction that, when executed, can execute actions on
           devices and read properties from them.
diff --git a/src/views/devices/DeviceView.vue b/src/views/devices/DeviceView.vue
index 2df0e1e..4a44d8b 100644
--- a/src/views/devices/DeviceView.vue
+++ b/src/views/devices/DeviceView.vue
@@ -193,7 +193,7 @@ onUnmounted(() => {
   <!-- Dialog for offline notifications subscription -->
   <dialog ref="offline-notifications-modal" class="modal modal-middle">
     <div class="modal-box max-w-sm">
-      <h3 class="card-title mb-2 mx-auto justify-center">Device offline notifications</h3>
+      <p class="card-title mb-2 mx-auto justify-center">Device offline notifications</p>
       <p>Do you want to receive a notification when this device goes offline?</p>
       <form method="dialog">
         <div class="modal-action">
@@ -214,7 +214,7 @@ onUnmounted(() => {
   <!-- Dialog for action input -->
   <dialog ref="action-input-modal" class="modal modal-middle">
     <div class="modal-box max-w-sm">
-      <h3 class="card-title mb-2 mx-auto justify-center">Action input</h3>
+      <p class="card-title mb-2 mx-auto justify-center">Action input</p>
       <ValueIOControl
         v-if="executingAction"
         :typeConstraints="executingAction!.inputTypeConstraints"
@@ -241,7 +241,7 @@ onUnmounted(() => {
   <!-- Dialog for device action descriptions -->
   <dialog ref="device_action_description" class="modal modal-md">
     <div class="modal-box max-w-md">
-      <h3 class="card-title mb-2">{{ actionDescriptionToShow?.name }}</h3>
+      <p class="card-title mb-2">{{ actionDescriptionToShow?.name }}</p>
       {{ actionDescriptionToShow?.description }}
     </div>
     <form method="dialog" class="modal-backdrop">
diff --git a/src/views/tasks/TasksView.vue b/src/views/tasks/TasksView.vue
index 7aff134..231419a 100644
--- a/src/views/tasks/TasksView.vue
+++ b/src/views/tasks/TasksView.vue
@@ -72,7 +72,7 @@ async function startTask(taskId: TaskId) {
 
     <dialog id="tasks_info" class="modal modal-sm">
       <div class="modal-box max-w-sm">
-        <h2 class="card-title mb-2">Tasks info</h2>
+        <p class="card-title mb-2">Tasks info</p>
         <p>
           Tasks are a sequence of instructions that, when executed, can execute actions on devices
           and read properties from them.