From bbab8e5e81b2de94aef2473490e1884192438896 Mon Sep 17 00:00:00 2001
From: Linrador <68631622+Linrador@users.noreply.github.com>
Date: Wed, 29 Apr 2026 13:36:06 +0200
Subject: [PATCH] fixed non transparent box

---
 frontend/src/components/ui/TrainingTab.tsx | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ui/TrainingTab.tsx b/frontend/src/components/ui/TrainingTab.tsx
index 547e284..97c867d 100644
--- a/frontend/src/components/ui/TrainingTab.tsx
+++ b/frontend/src/components/ui/TrainingTab.tsx
@@ -744,20 +744,23 @@ export default function TrainingTab() {
                     const isDraft = drawingBox && index === visibleBoxes.length - 1
 
                     return (
-                      <button
+                      <div
                         key={`${box.label}-${index}-${isDraft ? 'draft' : 'box'}`}
-                        type="button"
+                        role={isDraft ? undefined : 'button'}
+                        tabIndex={isDraft ? undefined : 0}
                         className={[
-                          'absolute rounded border-2 bg-transparent hover:bg-transparent active:bg-transparent focus:bg-transparent shadow-[0_0_0_1px_rgba(0,0,0,0.75)]',
+                          'absolute rounded border-2 shadow-[0_0_0_1px_rgba(0,0,0,0.75)]',
                           isDraft
                             ? 'pointer-events-none border-amber-400'
-                            : 'border-emerald-400 hover:border-red-400',
+                            : 'cursor-pointer border-emerald-400 hover:border-red-400',
                         ].join(' ')}
                         style={{
                           left: `${left}%`,
                           top: `${top}%`,
                           width: `${width}%`,
                           height: `${height}%`,
+                          backgroundColor: 'transparent',
+                          appearance: 'none',
                         }}
                         title={isDraft ? box.label : `${box.label} löschen`}
                         onPointerDown={(e) => {
@@ -769,6 +772,14 @@ export default function TrainingTab() {
                           e.stopPropagation()
                           if (!isDraft) removeBox(index)
                         }}
+                        onKeyDown={(e) => {
+                          if (isDraft) return
+                          if (e.key !== 'Enter' && e.key !== ' ') return
+
+                          e.preventDefault()
+                          e.stopPropagation()
+                          removeBox(index)
+                        }}
                       >
                         <span
                           className={[
@@ -778,7 +789,7 @@ export default function TrainingTab() {
                         >
                           {box.label} {typeof box.score === 'number' ? percent(box.score) : ''}
                         </span>
-                      </button>
+                      </div>
                     )
                   })}
                 </div>