Blazor Server中如何在span元素上捕获@onkeydown事件？

问题根源 #

你将tabindex="0"设置在了<th>元素上，但@onkeydown事件绑定在了内部的<span>上。当通过Tab选中表头时，焦点落在<th>而非<span>，导致<span>无法接收键盘事件，所以KeyPressSort方法不会触发。

解决方案 #

方案1：将焦点移至绑定事件的<span>

把tabindex="0"从<th>移到<span>上，确保焦点落在绑定了@onkeydown的元素上：

<th>
    <span tabindex="0" role="button" aria-label="Sort by event name" 
          @onkeydown="@((args) => KeyPressSort("EventDesc", args))" 
          @onclick="@(() => Sort("EventDesc"))">Event Name</span>
    <i class="@(SortIndicator("EventDesc"))"></i>
</th>

方案2：将事件绑定到<th>上

如果希望焦点保持在<th>上，直接把@onkeydown绑定到<th>，并传递对应的排序字段：

<th tabindex="0" @onkeydown="@((args) => KeyPressSort("EventDesc", args))">
    <span role="button" aria-label="Sort by event name" 
          @onclick="@(() => Sort("EventDesc"))">Event Name</span>
    <i class="@(SortIndicator("EventDesc"))"></i>
</th>

优化键盘交互（符合无障碍规范） #

对于role="button"的元素，除了Enter键，还应该支持空格键触发操作（这是WAI-ARIA的标准交互要求），同时阻止空格键的默认滚动行为：

protected async Task KeyPressSort(string sortField, KeyboardEventArgs e)
{
    if (e.Code == "Enter" || e.Code == "NumpadEnter" || e.Code == "Space")
    {
        if (e.Code == "Space")
        {
            e.PreventDefault(); // 避免页面滚动
        }
        await Sort(sortField);
    }
}

内容的提问来源于stack exchange，提问作者Mark