Feature/accessibility

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>

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>

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>

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>

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

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"

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>

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

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>

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"

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>

src/views/SettingsView.vue

@@ -2,15 +2,15 @@
   <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>
 
     <form @submit.prevent="handleSave" class="w-full px-6">
       <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>