Added row and column aria labels, and roles for EventTable

microsoft · Aug 29, 2024 · bf97bff · bf97bff
1 parent 039110a
commit bf97bff
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 9 deletions.
diff --git a/src/EventLogExpert/Components/EventTable.razor b/src/EventLogExpert/Components/EventTable.razor
@@ -4,12 +4,12 @@
 <SplitLogTabPane />
 
 <div class="table-container">
-    <table id="eventTable" @onkeydown="HandleKeyDown">
+    <table id="eventTable" @onkeydown="HandleKeyDown" role="grid">
         <thead @oncontextmenu="InvokeTableColumnMenu">
-        <tr>
-            @foreach ((ColumnName column, bool _) in _eventTableState.Columns.Where(column => column.Value))
+        <tr role="row">
+            @foreach (ColumnName column in _enabledColumns)
             {
-                <th class="@column.ToString().ToLower()">
+                <th class="@column.ToString().ToLower()" role="columnheader">
                     @if (column == ColumnName.DateAndTime)
                     {
                         <text>@GetDateColumnHeader()</text>
@@ -34,11 +34,12 @@
         @if (_currentTable is not null)
         {
             <Virtualize Context="evt" Items="_currentTable.DisplayedEvents">
-                <tr class="@GetCss(evt)" @key="@($"{evt.OwningLog}_{evt.RecordId}")" @onmousedown="args => SelectEvent(args, evt)" tabindex="0">
-                    @foreach ((ColumnName column, bool _) in _eventTableState.Columns.Where(column => column.Value))
+                @{ _rowIndex = _currentTable.DisplayedEvents.IndexOf(evt); }
+                <tr class="@GetCss(evt)" @key="@($"{evt.OwningLog}_{evt.RecordId}")" @onmousedown="args => SelectEvent(args, evt)" role="row" tabindex="0">
+                    @for (int i = 0; i < _enabledColumns.Length; i++)
                     {
-                        <td>
-                            @switch (column)
+                        <td aria-label="Row @(_rowIndex), Column @(i + 1)" role="gridcell">
+                            @switch (_enabledColumns[i])
                             {
                                 case ColumnName.Level:
                                     <text><span class="@GetLevelClass(evt.Level)"></span> @evt.Level</text>
@@ -80,7 +81,7 @@
                         </td>
                     }
 
-                    <td>@evt.Description</td>
+                    <td aria-label="Row @(_rowIndex), Column @(_enabledColumns.Length + 1)" role="gridcell">@evt.Description</td>
                 </tr>
             </Virtualize>
         }

diff --git a/src/EventLogExpert/Components/EventTable.razor.cs b/src/EventLogExpert/Components/EventTable.razor.cs
@@ -22,7 +22,9 @@ namespace EventLogExpert.Components;
 public sealed partial class EventTable
 {
     private EventTableModel? _currentTable;
+    private ColumnName[] _enabledColumns = null!;
     private EventTableState _eventTableState = null!;
+    private int _rowIndex = 0;
     private ImmutableList<DisplayEventModel> _selectedEventState = [];
     private TimeZoneInfo _timeZoneSettings = null!;
 
@@ -51,7 +53,9 @@ protected override async Task OnInitializedAsync()
         SubscribeToAction<EventTableAction.UpdateDisplayedEvents>(action => ScrollToSelectedEvent().AndForget());
 
         _eventTableState = EventTableState.Value;
+
         _currentTable = _eventTableState.EventTables.FirstOrDefault(x => x.Id == _eventTableState.ActiveEventLogId);
+        _enabledColumns = _eventTableState.Columns.Where(column => column.Value).Select(column => column.Key).ToArray();
         _selectedEventState = SelectedEventState.Value;
         _timeZoneSettings = TimeZoneSettings.Value;
 
@@ -65,7 +69,9 @@ protected override bool ShouldRender()
             TimeZoneSettings.Value.Equals(_timeZoneSettings)) { return false; }
 
         _eventTableState = EventTableState.Value;
+
         _currentTable = _eventTableState.EventTables.FirstOrDefault(x => x.Id == _eventTableState.ActiveEventLogId);
+        _enabledColumns = _eventTableState.Columns.Where(column => column.Value).Select(column => column.Key).ToArray();
         _selectedEventState = SelectedEventState.Value;
         _timeZoneSettings = TimeZoneSettings.Value;