Model selector options are not accessible using the keyboard: A11y_Aspire Dashboard_Copilot_Keyboard

[AnKushSingh05]

GitHubTags

#A11ySev1; #A11yTCS;#DesktopWeb; #Win32;#.NET Project system for CSharp and VB;#BM_AspireDashboard_Web_June25;#Win32;#WCAG2.1.1;#Keyboard;#A11yMAS;

Environment Details:

Application Name: Aspire Dashboard
Edition Windows 11 Enterprise
Version 24H2
OS build 26100.4351
Microsoft Visual Studio Enterprise 18 (64-bit) - Int Preview
Version 18.0.0 Preview 1.0 [10807.200.main]

Repro Steps:

1. Open Visual studio.
2. Open a aspire project and run it.
3. A new window will open in the chromium edge, TAB to "Copilot" tab item and hit ENTER key.
4. Verify that Model selector options are not accessible using the keyboard.

Actual Result:

Model selector options are not accessible using the keyboard.

Expected Result:

Model selector options should be accessible using the keyboard keys and user can select them.

User Impact:

Model selector options are not accessible using the keyboard, making it difficult for keyboard and screen reader users to select the different options available.

Attachment:

10297_Keyboard.mp4

[adamint]

This will likely have to slip to the next version, as multiple changes are required across fluentui-blazor and here.

1. I filed [MenuButton] Accessibility fixes and allow custom button content fluentui-blazor#4093, which allows us to replace our AspireMenuButton components with a more accessible FluentMenuButton one. We cannot currently do this because of the inflexibility in button content. So we will need to consume a new fluentui-blazor version.
2. We have to replace AspireMenuButton in this repo.

[adamint]

Moving to backlog, as we will not consume a new fluentui release before 9.5 dev ends. We need to make sure to include this in planning for next sprint

cc @maddymontaquila