[✨ Triage] dotnet/aspire#10118 by AnKushSingh05 - Sort and Resize buttons are not accessible using the keyboard keys ...

[MihuBot]

Triage for microsoft/aspire#10118.
Repo filter: area-dashboard issues.
MihuBot version: 4431de.
Ping MihaZupan for any issues.

This is a test triage report generated by AI, aimed at helping the triage team quickly identify past issues/PRs that may be related.
Take any conclusions with a large grain of salt.

dotnet/aspire#10118: Sort and Resize buttons are not accessible using the keyboard keys: A11y_Aspire Dashboard_Resources_Keyboard. by AnKushSingh05
[Tool] Searching for keyboard accessibility, Sort and Resize buttons, A11y, Resources tab accessibility, menu items keyboard, WCAG 2.1.1, keyboard navigation dashboard (IncludeOpen=True, IncludeClosed=True, IncludeIssues=True, IncludePullRequests=True, Repository=dotnet/aspire)
[Tool] Found 131 issues, 251 comments, 131 returned results (22737 ms)

Here are related issues and discussions regarding keyboard accessibility, specifically for the "Sort" and "Resize" buttons and general menu/button accessibility in the Aspire Dashboard:

---

1. Issue #3173 (March 2024) - "List options under 'Type filter' button are not accessible by keyboard: A11y_.NetAspireDashboard_Resource_Filter_Keyboard."

• Summary: This issue reported that options under the "Type filter" button in the Resources tab were not accessible by keyboard. The discussion revealed that the problem was due to the use of FluentPopover inside a FluentToolbar, which interfered with keyboard navigation. Several workarounds and package updates were discussed, including moving the popover outside the toolbar and updating to newer versions of fluentui-blazor.
• Resolution: The issue was ultimately fixed by moving the popover out of the toolbar (see PR #4243), and confirmed resolved by testers. However, there was discussion that the navigation with arrow keys was still not ideal, and a bug was filed upstream in the FluentUI web components.
• Relevant PRs:
  • #3568 / #3572 (backport)
  • #4243 (final fix)
• Key Comments:
  • The root cause was the toolbar component interfering with keyboard navigation.
  • The fix was to move the popover out of the toolbar and update the relevant packages.
  • Testers confirmed the fix in version 8.1.0-dev.

---

2. Issue #3364 (April 2024, closed March 2025) - "There is no functionality provided to adjust columns width which is achievable using single pointer.:A11y_.NetAspireDashboard_Resources_Grid_DraggingMovement"

• Summary: This issue focused on the lack of keyboard accessibility for resizing columns in data grids. The discussion clarified that "single pointer" means the ability to resize using keyboard or alternative input devices.
• Resolution: The maintainers referenced updates in fluentui-blazor (v4.7.1) that added keyboard support for resizing columns. There was also discussion about providing plus/minus buttons in a column options menu as an alternative to direct keyboard resizing.
• Key Comments:
  • The fix is available in the referenced package, and the team is considering further improvements for accessibility.

---

3. Issue #10139 (June 2025) - "After applying resize, menu items are not accessible using keyboard: A11y_Aspire Dashboard_Keyboard."

• Summary: This recent issue reports that after resizing (zooming to 200%), menu items become inaccessible via keyboard. This is similar to the current issue, especially regarding the impact of resizing on keyboard accessibility.
• Status: No comments yet, but it is a direct recent report of keyboard inaccessibility after resizing, which may be related to the same underlying UI components.

---

4. Issue #1126 (November 2023, closed February 2024) - "Keyboard accessibility for Summary/Details View"

• Summary: This issue discussed adding keyboard shortcuts for actions like resizing panels, toggling orientation, and closing the details panel. The discussion included how to expose keyboard shortcuts to users and ensure discoverability.
• Resolution: Keyboard shortcuts were added (see PR #2387), and a help dialog was implemented to list them. The team discussed best practices for discoverability and consistency with other Microsoft products.
• Key Comments:
  • The help dialog (opened with Shift+?) lists all keyboard shortcuts.
  • There was a focus on making resizing and panel actions accessible via keyboard.

---

5. Issue #3192 (March 2024, PR) - "Make sure copy button is tab-accessible and visible on tab"

• Summary: This PR made copy buttons in data grids keyboard accessible by adding tabindex and focus styling.
• Resolution: Merged and confirmed to fix the accessibility issue for copy buttons, which are similar in function to sort/resize buttons in terms of keyboard navigation.

---

6. Issue #10141 (June 2025) - "After applying resize, .net aspire, help , copilot chat and settings buttons are not accessible: A11y_Aspire Dashboard_Resize."

• Summary: Reports that after resizing (zooming to 200%), several key buttons become inaccessible, which is a broader manifestation of the same accessibility problem.

---

7. Issue #10118 (June 2025) - "Sort and Resize buttons are not accessible using the keyboard keys"

• Summary: The current issue, which notes that sort and resize buttons are not accessible via keyboard, and that this problem is observed throughout the application for menu items and options buttons.

---

8. Issue #5200 (August 2024, PR) - "Make all pages accessible to low vision on reflow"

• Summary: This PR and its discussion address making the dashboard accessible at high zoom and low viewport sizes, which is directly related to the problems reported in #10118 and #10139. There is extensive discussion about ensuring all controls remain accessible and visible at 200% zoom and small viewport sizes.
• Key Comments:
  • The team worked on hiding nonessential columns and making detail views accessible.
  • There was a focus on ensuring that all interactive elements remain accessible via keyboard and screen reader at all resolutions.

---

9. Issue #3175 (March 2024, closed April 2024) - "'Copy to clipboard' button under 'Source' column on the table is not accessible by keyboard keys"

• Summary: Similar accessibility issue for another button in the grid, resolved and confirmed fixed.

---

10. Issue #10129 (June 2025) - "Unexpected backward focus navigation triggered by Shift + Tab"

• Summary: Reports focus order issues when navigating with keyboard, which may be related to the overall accessibility of interactive controls.

---

Summary of Conclusions and Fixes

• Root Causes: Many keyboard accessibility issues in the Aspire Dashboard have been traced to the use of certain UI components (notably FluentToolbar and FluentPopover) and their interaction with keyboard navigation. Problems are exacerbated at high zoom or after resizing.
• Fixes Implemented:
  • Moving popovers and menus out of toolbars to restore correct keyboard navigation.
  • Updating to newer versions of fluentui-blazor that improve keyboard accessibility for menus, popovers, and column resizing.
  • Adding tabindex and focus styling to buttons.
  • Implementing keyboard shortcuts and a help dialog for discoverability.
• Outstanding Issues:
  • Some recent issues (e.g., #10118, #10139, #10141) suggest that after resizing or at high zoom, some controls may still not be accessible. These may require further investigation or may be regressions.
  • There is ongoing work to ensure all controls remain accessible at all viewport sizes and zoom levels.

---

Actionable Recommendations

• Verify that the application is using the latest fluentui-blazor components, as many accessibility fixes have been delivered in recent versions.
• Test the "Sort" and "Resize" buttons specifically after resizing/zooming, and ensure they are not inside a FluentToolbar or other container that interferes with keyboard navigation.
• Review the implementation of menu and popover components to ensure they follow the patterns established in the resolved issues and PRs above.
• Monitor for regressions, especially after major UI refactors or package updates.

---

If you need more detail on any specific issue or PR, let me know!