fast icon indicating copy to clipboard operation
fast copied to clipboard

fix: focus accessibility in data grid cell

Open benmcmorran opened this issue 2 years ago • 1 comments

🐛 Bug Report

When using keyboard navigation to navigate a data grid on a small screen, cells are focused but may not be brought fully into view. This is particularly an issue for the last column in the table, which may be impossible to see fully using keyboard navigation (scrollbar use is required).

💻 Repro or Code Sample

Create a data grid large enough to trigger a horizontal scrollbar (or make your viewport very small). Use keyboard navigation to bring focus to the last column.

🤔 Expected Behavior

The entire focused cell in the last column is visible.

😯 Current Behavior

Only the left edge of the focused cell is visible.

💁 Possible Solution

This is happening because FAST brings the targeted cell into focus with keyboard navigation, but it does not call scrollIntoView() on this element to ensure the entire cell is visible. We are currently hooking the cell-focused event to manually trigger scrollIntoView() as a workaround.

🔦 Context

This issue came up during an accessibility test pass of our RTOS view in a VS Code extension. We display RTOS information in a data grid via the VS Code Webview UI Toolkit, which internally uses FAST.

🌍 Your Environment

  • OS & Device: Windows on MacBook Pro
  • Browser: Electron (VS Code) and Edge WebView2

benmcmorran avatar Jun 15 '22 22:06 benmcmorran

@scomea do you want to pick this up? Seems reasonable enough to ensure that we bring the element into view when focusing in this scenario.

chrisdholt avatar Jun 15 '22 22:06 chrisdholt