Hello,
I wanted to see if you had any advice for making the keyboard controls function properly for the multiselect dropdown menu when Windows Narrator is turned on. I'm able to select one item from the dropdown, but I'm unable to continue with any more navigation for the control afterwards.
The expected behavior should be that I can continue to interact with the dropdown after choosing one item. However I don't appear to be able to do anything else after the first selection.
The code I am working with is below, and I am using windows narrator as the accessibility tool. To reproduce,
- Turn on windows narrator.
- Grab focus on the dropdown.
- Use alt+down arrow to expand the dropdown. You should be able to press the down arrow to go through the options. Press enter on an option and the field should be updated.
- Use alt+down arrow again to select another option.
Expected behavior: The dropdown menu expands, and you can cycle through the options again.
Actual: The dropdown menu expands, but the narrator attempts to move onto the next focusable item, and the dropdown menu is closed.
Thank you for any advice:
@page "/"
@using Syncfusion.Blazor.DropDowns
<SfMultiSelect TValue="string[]" TItem="Countries" Placeholder="e.g. Australia" DataSource="@Country">
<MultiSelectFieldSettings Text="Name" Value="Code"></MultiSelectFieldSettings>
</SfMultiSelect>
@code{
public class Countries
{
public string Name { get; set; }
public string Code { get; set; }
}
List<Countries>Country = new List<Countries>
{
new Countries() { Name = "Australia", Code = "AU" },
new Countries() { Name = "Bermuda", Code = "BM" },
new Countries() { Name = "Canada", Code = "CA" },
new Countries() { Name = "Cameroon", Code = "CM" },
new Countries() { Name = "Denmark", Code = "DK" },
new Countries() { Name = "France", Code = "FR" },
new Countries() { Name = "Finland", Code = "FI" },
new Countries() { Name = "Germany", Code = "DE" },
new Countries() { Name = "Greenland", Code = "GL" },
new Countries() { Name = "Hong Kong", Code = "HK" },
new Countries() { Name = "India", Code = "IN" },
new Countries() { Name = "Italy", Code = "IT" },
new Countries() { Name = "Japan", Code = "JP" },
new Countries() { Name = "Mexico", Code = "MX" },
new Countries() { Name = "Norway", Code = "NO" },
new Countries() { Name = "Poland", Code = "PL" },
new Countries() { Name = "Switzerland", Code = "CH" },
new Countries() { Name = "United Kingdom", Code = "GB" },
new Countries() { Name = "United States", Code = "US" },
};
}
