RAC & RA side navigation suggestions

[BMCwebdev]

Hi everyone. I am starting a task to build a side navigation, much like the one on the React Spectrum website. I am wondering if anyone can suggest any ideas or share experience building one using React Aria. I am looking at what is in the utilities and other options. Thought maybe I could use Section, but that seems to only want to live inside of specific components. FocusScope might be useful. There is no ul component, and I don’t think I can or want to use the Collections pattern on a ul based Link navigation component. I don’t think I want to use any of the overlay components, because they unmount, and the navigation should probably stay in the DOM.

Well, if anyone has any thoughts I’d love and appreciate hearing them. Thanks!

[BMCwebdev]

I'm pretty much going with the idea that I should just roll with my own <nav> <ul> and <li>. ListBox of course was interesting to look at. The whole useListBox documentation page. I could use that to render the semantic markup I am looking for. But not sure if it is all overkill anyways. I don't need selection, I don't need arrow key support (not even sure if I would want that at all).

Yea, think I'm going to just go the traditional route, but again, if anyone has any ideas lemme know!

[BMCwebdev]

A follow up question: Would it be possible to allow FocusScope to shift-tab focus back out of its container to the triggering element? I’m not sure why it seems the trigger is removed from being able to tab back to, though once you’ve tabbed back to the root and tab forward again you can focus on it.

[snowystinger]

I don't follow. Maybe an example would help?
I can tab in and out of the FocusScope:
https://codesandbox.io/p/sandbox/boring-wave-4663w2?file=%2Fsrc%2FApp.js%3A12%2C23

[BMCwebdev]

Hey @snowystinger , you bet, and thanks. I'll just use the RAC demo for FocusScope, but I'll add in a couple of buttons so that we can watch where focus moves to.

I assume there is a reason to do this to avoid a focus trap of some sort, but I was wondering if it still makes sense to take the triggering button out of the tab flow if you are not using contain on FocusScope.

In the example, if you click the open button, and then try to shift-tab back to the open button, it will skip over it and go to the "next in reverse shift-tab focus order" item. If you start forward tabbing again, the open button is focusable.

Use case would be if this open button was a toggle, and became the close button after clicking it to open.

https://codesandbox.io/p/sandbox/elated-cache-cnl8lz?file=%2Fsrc%2FApp.js%3A12%2C29

[snowystinger]

ah, i see, you're running into #2459

[BMCwebdev]

Ah, ye ol' 2459! 😄
Thanks @snowystinger