accessibility - Blazor FocusOnNavigate 设置 tabindex=-1

Question

我创建了一个 Blazor 项目，在 App.razor 中我有这一行:

<FocusOnNavigate RouteData="@routeData" Selector="input" />

FocusOnNavigate将焦点设置在导航后的第一个输入上。这工作正常，但我注意到使用选项卡您可以将焦点集中到下一个元素，但不可能将焦点重新集中在该元素上。这是因为输入现在有 tabindex="-1"。

为什么要添加tabindex？有办法避免这种情况吗？

更新:我在不使用 FocusOnNavigate 的情况下尝试了输入的自动对焦属性，但这不起作用

Answer 1

在 mozilla他们说:

A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with JavaScript or visually by clicking with the mouse. It's mostly useful to create accessible widgets with JavaScript.

Note: A negative value is useful when you have off-screen content that appears on a specific event. The user won't be able to focus any element with a negative tabindex using the keyboard, but a script can do so by calling the focus() method.

并辩称，我们可以通过在最后一个输入中使用onblure来解决这个问题，并再次将焦点集中在您的第一个输入上:

<EditFrom Model=model>

 //Input 1
 <InputText @ref="inputText1"
            class="form-control"
            bind-Value="model.val1"/>

 //Input 2
 <InputText
    class="form-control"
    bind-Value="model.val2"
    @onblure= OnblureHandler/>
</EditForm>

@code{
 puplic class Model
 {
    public string val1 {get; set;}
    public string val2 {get; set;}
 }
 Model model {get; set;}
 InputText inputText1;
 
 private void OnblureHandler()
 {
  if(inputText1.Element.HasValue) 
  {
    inputText1.Element.Value.FocusAsync();
  }
 }
}