A11y | keyboard navigation | tabindex | focus | Dropdown control

We have a blazor app that uses RazdenDropdown controls in blazor(.razor file) views. For keyboard accessiblity testing I see that navigation through keyboard is not working with focus not getting set for this control. I inspected in browser to see tabindex=-1 is set to the child element of the main div element(parent) for this control. Due to this, not able to get the focus to this dropdown.

Any suggestions on how to set the focus first and then showing the items in the dropdown on enter key. Tried using TabIndex = 0, but this is not helping as the child element still has the tabindex set to -1. Here is the code that i use:

<RadzenDropDown TabIndex="0" Name="ddlTest" AllowClear="true" TValue="string" 
FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowFiltering="true"
Placeholder="Select an item" Data="@allItems" TextProperty="Name" ValueProperty="Id"
@bind-Value="myObj.itemId" Style="margin-bottom: 10px; width: 300px"   Disabled="myObj.IsComplete" 
Change="@(args => Next(args))" />
1 Like

Got the same problem here. Tabbind stops at dropdowns.

Thomas

We will do our best to include fix in one of our next releases.