From 47bbc0d7665859427f82794ced5aa8ff3c47db58 Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Mon, 14 Sep 2026 07:36:41 +0200
Subject: [PATCH] feat(match-report): replace player selection divs with
 buttons for improved accessibility and interaction

---
 .../src/components/MatchReportApiDialog.vue   | 30 ++++++++++++-------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/MatchReportApiDialog.vue b/frontend/src/components/MatchReportApiDialog.vue
index 519930d4..c8e47261 100755
--- a/frontend/src/components/MatchReportApiDialog.vue
+++ b/frontend/src/components/MatchReportApiDialog.vue
@@ -294,7 +294,7 @@
                             <div class="players-grid">
                                 <div v-for="player in meetingDetails.teamLineupHomePlayers.filter(p => p.isSelected && p.nuLigaPersonId > 0 && isSingleLineupPlayer(p))"
                                     :key="player.nuLigaPersonId" class="player-card selected">
-                                    <div class="player-main" @click="togglePlayerSelection(player, 'home')">
+                                    <button type="button" class="player-main" @click="togglePlayerSelection(player, 'home')">
                                         <div class="player-name">{{ player.firstname }} {{ player.lastname }}</div>
                                         <div class="player-details">
                                             <span class="player-rank">{{ $t('matchReportApi.rank') }}: {{ player.rank }}</span>
@@ -305,7 +305,7 @@
                                             </span>
                                         </div>
                                         <div class="player-action">👆 {{ $t('matchReportApi.clickToRemove') }}</div>
-                                    </div>
+                                    </button>
                                     <div class="double-selection">
                                         <button class="double-btn d1-btn"
                                             :class="{ active: player.positionDouble === 1 }"
@@ -346,14 +346,14 @@
                             <div class="players-grid">
                                 <div v-for="player in meetingDetails.teamLineupHomePlayers.filter(p => !p.isSelected && p.nuLigaPersonId > 0)"
                                     :key="player.nuLigaPersonId" class="player-card available clickable">
-                                    <div @click="togglePlayerSelection(player, 'home')">
+                                    <button type="button" class="player-main" @click="togglePlayerSelection(player, 'home')">
                                         <div class="player-name">{{ player.firstname }} {{ player.lastname }}</div>
                                         <div class="player-details">
                                             <span class="player-rank">{{ $t('matchReportApi.rank') }}: {{ player.rank }}</span>
                                             <span class="player-position">Verfügbar</span>
                                         </div>
                                         <div class="player-action">👆 Klicken zum Hinzufügen</div>
-                                    </div>
+                                    </button>
                                     <div class="double-selection">
                                         <button class="double-btn d1-btn"
                                             :class="{ active: player.positionDouble === 1 }"
@@ -413,7 +413,7 @@
                             <div class="players-grid">
                                 <div v-for="player in meetingDetails.teamLineupGuestPlayers.filter(p => p.isSelected && p.nuLigaPersonId > 0 && isSingleLineupPlayer(p))"
                                     :key="player.nuLigaPersonId" class="player-card selected">
-                                    <div class="player-main" @click="togglePlayerSelection(player, 'guest')">
+                                    <button type="button" class="player-main" @click="togglePlayerSelection(player, 'guest')">
                                         <div class="player-name">{{ player.firstname }} {{ player.lastname }}</div>
                                         <div class="player-details">
                                             <span class="player-rank">{{ $t('matchReportApi.rank') }}: {{ player.rank }}</span>
@@ -424,7 +424,7 @@
                                             </span>
                                         </div>
                                         <div class="player-action">👆 {{ $t('matchReportApi.clickToRemove') }}</div>
-                                    </div>
+                                    </button>
                                     <div class="double-selection">
                                         <button class="double-btn d1-btn"
                                             :class="{ active: player.positionDouble === 1 }"
@@ -465,14 +465,14 @@
                             <div class="players-grid">
                                 <div v-for="player in meetingDetails.teamLineupGuestPlayers.filter(p => !p.isSelected && p.nuLigaPersonId > 0)"
                                     :key="player.nuLigaPersonId" class="player-card available clickable">
-                                    <div @click="togglePlayerSelection(player, 'guest')">
+                                    <button type="button" class="player-main" @click="togglePlayerSelection(player, 'guest')">
                                         <div class="player-name">{{ player.firstname }} {{ player.lastname }}</div>
                                         <div class="player-details">
                                             <span class="player-rank">{{ $t('matchReportApi.rank') }}: {{ player.rank }}</span>
                                             <span class="player-position">Verfügbar</span>
                                         </div>
                                         <div class="player-action">👆 Klicken zum Hinzufügen</div>
-                                    </div>
+                                    </button>
                                     <div class="double-selection">
                                         <button class="double-btn d1-btn"
                                             :class="{ active: player.positionDouble === 1 }"
@@ -6496,19 +6496,19 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
     background-color: white;
 }
 
-.player-card.available>div:first-child {
+.player-card.available>.player-main {
     flex: 1;
     cursor: pointer;
     transition: all 0.2s ease;
     padding: 12px;
 }
 
-.player-card.available>div:first-child:hover {
+.player-card.available>.player-main:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }
 
-.player-card.available>div:first-child:active {
+.player-card.available>.player-main:active {
     transform: translateY(0);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
 }
@@ -6544,9 +6544,17 @@ Wir wünschen den Spielen einen schönen, spannenden und fairen Verlauf und begr
 
 .player-main {
     flex: 1;
+    width: 100%;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
     cursor: pointer;
     transition: all 0.2s ease;
     padding: 12px;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
 }
 
 .player-main:hover {