[Feature]: Enable focus on active elements in Table and DataGrid with cell and row navigation

[adamsamec]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

If the Table or DataGrid component supports cell or row navigation using the arrow keys, it must be ensured that individual active elements like buttons inside the Table or DataGrid component can be focused.

Consider implementing the following keyboard navigation behavior.

Table with cell navigation

• Pressing Down or Up arrow key focuses the cell in next or previous row, and Right or Left arrow key focuses the cell in the next or previous column, respectively.
• If a cell contains multiple active elements, like buttons, pressing Enter when on such a cell drills into the cell, and then pressing Left or Right arrow keys moves focus to the next or previous active element within that cell. Pressing Escape then reverts back to the cell navigation mode.

Table with row navigation

• Pressing Down or Up arrow key focuses the entire next or previous row, respectively.
• Pressing Right or Left arrow key moves focus to the next or previous active element within the current row, respectively.

Have you discussed this feature with our team

No response

Additional context

No response

Validations

• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.