Use button elements for remove actions

Author: iammajid

frontend/src/components/authority/GroupAddMemberDialog.vue

@@ -31,7 +31,7 @@
                             {{ member.name }}
                           </p>
                         </div>
-                        <a tabindex="0" class="cursor-pointer text-red-600 hover:text-red-900" :title="t('common.remove')" @click="removeTempMember(member.id)">{{ t('common.remove') }}</a>
+                        <button type="button" class="cursor-pointer text-red-600 hover:text-red-900" :title="t('common.remove')" @click="removeTempMember(member.id)">{{ t('common.remove') }}</button>
                       </div>
                     </li>
                   </TransitionGroup>

frontend/src/components/authority/UserAddGroupDialog.vue

@@ -31,7 +31,7 @@
                             {{ group.name }}
                           </p>
                         </div>
-                        <a tabindex="0" class="cursor-pointer text-red-600 hover:text-red-900" :title="t('common.remove')" @click="removeTempGroup(group.id)">{{ t('common.remove') }}</a>
+                        <button type="button" class="cursor-pointer text-red-600 hover:text-red-900" :title="t('common.remove')" @click="removeTempGroup(group.id)">{{ t('common.remove') }}</button>
                       </div>
                     </li>
                   </TransitionGroup>

frontend/src/components/authority/UserGroupsList.vue

@@ -37,7 +37,7 @@
             </td>
 
             <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-              <a tabindex="0" class="cursor-pointer text-red-600 hover:text-red-900" :title="t('common.remove')" @click="showDeleteDialog(group)">{{ t('common.remove') }}</a>
+              <button type="button" class="cursor-pointer text-red-600 hover:text-red-900" :title="t('common.remove')" @click="showDeleteDialog(group)">{{ t('common.remove') }}</button>
             </td>
           </tr>
           <tr v-if="!filteredGroups.length">