Harden tables selection interactions

src/RolemasterDb.App/Components/Pages/Tables.razor

@@ -677,18 +677,21 @@
     private Task UpdateReferenceModeAsync(string mode)
     {
         referenceMode = NormalizeMode(mode);
+        NormalizeSelectedCellForCurrentView();
         return Task.CompletedTask;
     }
 
     private Task UpdateSelectedGroupAsync(string groupKey)
     {
         selectedGroupKey = NormalizeOptionalFilter(groupKey);
+        NormalizeSelectedCellForCurrentView();
         return Task.CompletedTask;
     }
 
     private Task UpdateSelectedColumnAsync(string columnKey)
     {
         selectedColumnKey = NormalizeOptionalFilter(columnKey);
+        NormalizeSelectedCellForCurrentView();
         return Task.CompletedTask;
     }
 
@@ -768,6 +771,8 @@
         {
             selectedCell = null;
         }
+
+        NormalizeSelectedCellForCurrentView();
     }
 
     private static string NormalizeMode(string? mode) =>
@@ -796,4 +801,40 @@
         var digitsOnly = new string(value.Where(char.IsDigit).ToArray());
         return digitsOnly.Length == 0 ? string.Empty : digitsOnly;
     }
+
+    private void NormalizeSelectedCellForCurrentView()
+    {
+        if (selectedCell is null || tableDetail is null)
+        {
+            return;
+        }
+
+        var cell = tableDetail.Cells.FirstOrDefault(item => item.ResultId == selectedCell.ResultId);
+        if (cell is null || !MatchesCurrentView(cell))
+        {
+            selectedCell = null;
+        }
+    }
+
+    private bool MatchesCurrentView(CriticalTableCellDetail cell)
+    {
+        if (!string.IsNullOrWhiteSpace(selectedGroupKey) &&
+            !string.Equals(cell.GroupKey, selectedGroupKey, StringComparison.OrdinalIgnoreCase))
+        {
+            return false;
+        }
+
+        if (!string.IsNullOrWhiteSpace(selectedColumnKey) &&
+            !string.Equals(cell.ColumnKey, selectedColumnKey, StringComparison.OrdinalIgnoreCase))
+        {
+            return false;
+        }
+
+        return referenceMode switch
+        {
+            TablesReferenceMode.NeedsCuration => !cell.IsCurated,
+            TablesReferenceMode.Curated => cell.IsCurated,
+            _ => true
+        };
+    }
 }

src/RolemasterDb.App/Components/Tables/TablesCanvas.razor

@@ -33,7 +33,13 @@
 
                     @if (MatchesModeFilter(cell))
                     {
-                        <div class="@GetCellCssClass(cell, displayColumn.GroupKey)" @onclick="() => SelectCell(cell)">
+                        <div
+                            class="@GetCellCssClass(cell, displayColumn.GroupKey)"
+                            role="button"
+                            tabindex="0"
+                            aria-pressed="@isSelectedCell"
+                            @onclick="() => SelectCell(cell)"
+                            @onkeydown="args => HandleCellKeyDown(args, cell)">
                             <div class="critical-table-cell-shell">
                                 <div class="critical-table-cell-actions">
                                     @if (string.Equals(CurrentMode, TablesReferenceMode.Reference, StringComparison.Ordinal))
@@ -306,5 +312,17 @@
     private bool IsSelectedCell(CriticalTableCellDetail cell) =>
         SelectedCell is not null && cell.ResultId == SelectedCell.ResultId;
 
+    private Task HandleCellKeyDown(KeyboardEventArgs args, CriticalTableCellDetail cell)
+    {
+        if (string.Equals(args.Key, "Enter", StringComparison.Ordinal) ||
+            string.Equals(args.Key, " ", StringComparison.Ordinal) ||
+            string.Equals(args.Key, "Spacebar", StringComparison.Ordinal))
+        {
+            return SelectCell(cell);
+        }
+
+        return Task.CompletedTask;
+    }
+
     private static string BuildColumnSpanStyle(int span) => $"grid-column: span {span};";
 }

src/RolemasterDb.App/wwwroot/app.css

@@ -1643,6 +1643,11 @@ pre,
     transition: box-shadow 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
 }
 
+.critical-table-cell:focus-visible {
+    outline: 2px solid rgba(13, 148, 136, 0.45);
+    outline-offset: -2px;
+}
+
 .critical-table-cell.is-curated {
     background:
         linear-gradient(135deg, rgba(102, 138, 83, 0.16), transparent 34%),