feat(usability): label booking actions and enlarge row targets (U09)

src/Duempelkas.App/Components/Accounts/EntryRow.razor

@@ -1,7 +1,7 @@
 <tr class="@GetRowClass()">
-    <td>@Entry.DisplayId</td>
-    <td>@Entry.Date.ToString("dd.MM.yyyy")</td>
-    <td>
+    <td data-label="Nummer">@Entry.DisplayId</td>
+    <td data-label="Datum">@Entry.Date.ToString("dd.MM.yyyy")</td>
+    <td data-label="Beschreibung" class="entry-description">
         @Entry.Title
         @if (Entry.IsTransfer && !string.IsNullOrEmpty(Entry.LinkedAccountName))
         {
@@ -10,26 +10,27 @@
             </small>
         }
     </td>
-    <td class="text-end @(Entry.Type == EntryType.Income ? "amount-positive" : "amount-negative")">
+    <td data-label="Betrag" class="text-end @(Entry.Type == EntryType.Income ? "amount-positive" : "amount-negative")">
         @(Entry.Type == EntryType.Income ? "+" : "\u2212")@($"{Entry.Amount:N2} €")
     </td>
-    <td>
+    <td data-label="Aktionen" class="entry-actions">
         @if (Entry.IsDeleted)
         {
-            <button class="btn btn-outline-success btn-sm" @onclick="() => OnRestore.InvokeAsync(Entry.Id)" title="Wiederherstellen">
-                <i class="bi bi-arrow-counterclockwise"></i>
+            <button type="button" class="btn btn-outline-success" @onclick="() => OnRestore.InvokeAsync(Entry.Id)" aria-label="@($"{Entry.DisplayId} {Entry.Title} wiederherstellen")">
+                <i class="bi bi-arrow-counterclockwise" aria-hidden="true"></i> Wiederherstellen
             </button>
         }
         else
         {
-            <div class="d-flex gap-1">
-                <button class="btn btn-outline-secondary btn-sm" @onclick="() => OnEdit.InvokeAsync(Entry.Id)" title="Bearbeiten">
-                    <i class="bi bi-pencil"></i>
+            <details class="entry-action-menu">
+                <summary aria-label="@($"Aktionen für {Entry.DisplayId} {Entry.Title}")">Aktionen</summary>
+                <button type="button" class="btn btn-outline-secondary" @onclick="() => OnEdit.InvokeAsync(Entry.Id)" aria-label="@($"{Entry.DisplayId} {Entry.Title} bearbeiten")">
+                    <i class="bi bi-pencil" aria-hidden="true"></i> Bearbeiten
                 </button>
-                <button class="btn btn-outline-danger btn-sm" @onclick="() => OnDelete.InvokeAsync(Entry.Id)" title="Löschen">
-                    <i class="bi bi-trash"></i>
+                <button type="button" class="btn btn-outline-danger" @onclick="() => OnDelete.InvokeAsync(Entry.Id)" aria-label="@($"{Entry.DisplayId} {Entry.Title} löschen")">
+                    <i class="bi bi-trash" aria-hidden="true"></i> Löschen
                 </button>
-            </div>
+            </details>
         }
     </td>
 </tr>

src/Duempelkas.App/Components/Accounts/EntryTable.razor

@@ -1,4 +1,4 @@
-<div class="table-responsive">
+<div class="table-responsive entry-list">
     <table class="table table-hover table-sm align-middle">
         <thead class="table-light">
             <tr>
@@ -6,7 +6,7 @@
                 <th style="width: 120px;">Datum</th>
                 <th>Bezeichnung</th>
                 <th style="width: 140px;" class="text-end">Betrag</th>
-                <th style="width: 80px;"></th>
+                <th style="width: 11rem;">Aktionen</th>
             </tr>
         </thead>
         <tbody>