How to customize useGridListItem's internal left/right navigation

[AlexGalays]

It doesn't seem possible as this hook uses getFocusableTreeWalker internally, which has a hardcoded list of focusable elements to cycle.

My use case: In my grid row cell, there is an iframe for read only but important purposes, so it can not be hidden. I want to skip it entirely and just go to the next item. Also currently, once the iframe has focus, it then eats all subsequent left/right arrow keyboard events, ending the navigation.

Being able to pass some accept(node: Element) => boolean function like in FocusManager might be nice?

[LFDanLu]

When you say your iframe is read only, does that mean it doesn't have any interactive elements within it? If that is the case, perhaps its reasonable for the grid list item's treewalker to skip the iframe if it had tabIndex=-1 (and thus be controllable by the person providing content to the GridList rather than via the hooks directly). Maybe we could pass the tabbable: true option to getFocusableTreeWalker in this case, will have to double check that breaks anything. Accessibility wise, I don't think this would be a problem since the user can always access the frame using control+option+arrow keys in VoiceOver and via browse mode in NVDA. @majornista any thoughts?

As for the ability to pass an arbitrary element acceptance filter to the treewalker, I've thought about adding this on several occasions when working on Edit Mode for the TableView, but it would probably be more of an advanced use case and thus wouldn't be readily recommended.

[AlexGalays]

tabIndex=-1 making the iframe ignored would certainly work for my use case!

Yes, the iframe is only here for visual simulation purposes, it cannot be interacted with.

[LFDanLu]

I'll make an issue from this discussion and see what the rest of the team thinks. For now you could try using https://www.npmjs.com/package/patch-package to modify this line to let walker = getFocusableTreeWalker(ref.current, {tabbable: true}); which should then allow you add tabIndex=-1 to the iframe and make it skipped.