Blazor-Wasm应用Tabindex顺序异常问题求助

问题原因 #

未点击页面时，浏览器焦点默认不在文档内容区域，首次按Tab键会优先聚焦浏览器自带控件（如地址栏、书签栏），导致跳过页面内的NavMenu组件；点击页面后焦点进入文档区域，Tab键恢复正常顺序。

解决方法 #

1. 页面加载后自动定位焦点到NavMenu的首个可聚焦元素

在MainLayout.razor中添加生命周期方法，通过JS互调获取NavMenu内的首个可聚焦元素并设置焦点：

@inherits LayoutComponentBase
@using Blazored.Toast.Configuration
@inject IJSRuntime JS

<div class="d-flex flex-column vh-100">
  <NavMenu/>
  <main class="content d-flex flex-column justify-content-between container-md" id="wrapper">
    @Body
  </main>
  <Footer/>
</div>

<BlazoredToasts Position="Blazored.Toast.Configuration.ToastPosition.BottomRight"
                Timeout="10"
                ShowProgressBar="true" />
<Toaster />

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 选择NavMenu内首个可聚焦元素（可根据实际调整选择器）
            var firstFocusableElement = await JS.InvokeAsync<ElementReference>("document.querySelector", "nav button, nav a[href]");
            if (!firstFocusableElement.Equals(default))
            {
                await firstFocusableElement.FocusAsync();
            }
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

2. 优化Tabindex使用规范

• 默认可聚焦元素（如<button>、带href的<a>、<input>等）无需手动设置tabindex="0"，浏览器会自动维护自然焦点流；
• 仅对非标准可聚焦元素（如自定义组件）设置tabindex="0"，避免打乱默认顺序；
• 禁止设置tabindex>0，这会强制改变焦点优先级，破坏自然流逻辑。

3. 检查NavMenu组件状态

确保NavMenu在页面加载时处于可见状态（无display: none、visibility: hidden等隐藏属性），隐藏元素无法被Tab键聚焦；若为折叠式菜单，需确保折叠状态下触发展开的按钮是可聚焦的。

内容的提问来源于stack exchange，提问作者Marcus A.