Cannot access each cell of detailsList using tab or arrow keys

[liweitian]

Describe the feature that you would like added

I found a similar issue #7634, but no follow up actions any more. By using the detailsList, our project implements a grid(table). Just like the sample you provide here https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/basic. The problem is: we cannot access each cell of this grid using tab or arrow keys. We can only navigate the table row by row. If you already have a solution on this, can you update it on the sample showed in the document?

What component or utility would this be added to

DetailsList

[joschect]

@liweitian Thanks for the submission! There is a solution to this but it does seem like the basic behavior is not keyboard friendly. @KevinTCoughlin might be able to speak to a reason for this.

Here is a codepen with fairly simple fix that will allow those inner items to be keyboarded to.

[liweitian]

@joschect I got what you mean in that sample. I was given the link https://www.w3.org/TR/wai-aria-practices/examples/grid/dataGrids.html for accessibility requirement. The behavior of grid in that link is: we can navigate each cell one by one. But in the sample, we first will go to each row then go inside to each cell. I am not sure this is acceptable. I will double check this with the a11y team member. And do we have a simple grid like component? I searched but no luck. If we do not have one, is there any chance to provide such component? Thx!

[joschect]

@liweitian We don't currently have another grid for a behavior like this. We intentionally have each row selected and you can then enter the row.

Another option for you might be to use the basic list found and implement your own grid behavior. It would give you more flexibility in terms of how each item is accessed. Here's an example of list of items giving you some gridlike behavior with only list and a focus zone. This might be your best option.

[rachitpuri95]

The shared codepen doesn't seem to render, could you please share another example for a workaround. Is the workaround simply to add div wrapper with data-is-focusable={true}. I tried that for the column renderer but this didn't work for me.

[taras-strypko]

Hey, any updates on this?
@joschect Just wondering, if I understood correctly, that workaround from first codepen - is just by wrapping the cell contents into some kind of interactive element like button? As without that button wrapper - it's not working

[msft-fluent-ui-bot]

Because this issue has not had activity for over 180 days, we're automatically closing it for house-keeping purposes.

Still require assistance? Please, create a new issue with up-to date details.