search

carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://carbon-for-ibm-products.netlify.app/
Apache License 2.0
90 stars 131 forks source link

“Clickable row” should retain focus after side panel closes #3165

Open elycheea opened 1 year ago

elycheea commented 1 year ago

After side panel closes, focus state should return to originally activated item (row). I think we do something similar in editable cells since we can return to the active cell in those stories so we should just need to expand on this mechanism for this case.

--

Accessibility review: keyboard navigation issues found in Clickable row with side panel:

  1. After opening and dismissing the side panel from row 3, pressing tab key again will move the focus to the first row of the table. The desired behavior should be moving the focus down to row 4.

    image

  2. While the focus ring appears on the Close button in side panel, pressing the tab key again doesn't do anything. The desired behavior should be moving the focus in the side panel then go back to row 2 in the table.

    image

Originally posted by @thefirstartist in https://github.com/carbon-design-system/ibm-products/issues/2608#issuecomment-1593737376

matthewgallo commented 8 months ago

I think we could look into supporting an initially selected row via the initialState prop, similar to how other pieces of the Datagrid can set an initial state value from this object. See here for example