feat(a11y): update to-do checkbox and delete button titles

Author: mateusfg7

src/components/TodoItem.vue

@@ -6,14 +6,15 @@ defineProps<{ todo: TodoData; removeFn: (id: string) => void; toggleFn: (id: str
 
 <template>
   <div class="group flex items-center justify-between gap-5 rounded-lg p-2 text-xl animate-fade-up"
-    :class="!todo.complete && 'bg-neutral-200/30'" :title="todo.name">
+    :class="!todo.complete && 'bg-neutral-200/30'">
     <div class="flex w-full items-center gap-5 overflow-hidden">
-      <input type="checkbox" :checked="todo.complete" @click="toggleFn(todo.id)"
+      <input type="checkbox" title="Mark to-do as completed" :checked="todo.complete" @click="toggleFn(todo.id)"
         class="cursor-pointer rounded border border-neutral-700 bg-transparent p-3 text-vue-light focus:outline-none focus:ring-0" />
       <span :class="todo.complete && 'text-neutral-500 line-through'"
-        class="overflow-hidden text-ellipsis whitespace-nowrap">{{ todo.name }}</span>
+        class="overflow-hidden text-ellipsis whitespace-nowrap" :title="todo.name">{{ todo.name }}</span>
     </div>
-    <button @click="removeFn(todo.id)" class="text-neutral-500/20 transition-colors hover:text-red-700">
+    <button @click="removeFn(todo.id)" title="Delete to-do"
+      class="text-neutral-500/20 transition-colors hover:text-red-700">
       <PhTrash weight="regular" />
     </button>
   </div>