Add drag and drop to react-aria-components TabList

[vovsemenv]

Provide a general summary of the feature here

I see dragAndDropHooks in List but don't see it in TabList

🤔 Expected Behavior?

add dragAndDropHooks={dragAndDropHooks} to TabList

😯 Current Behavior

💁 Possible Solution

No response

🔦 Context

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Unfortunately Tab lists only allow tabs as children and tabs don't allow interactive children
https://w3c.github.io/aria/#tablist

As a result, it's difficult to add an affordance for keyboard users or assistive technology users.

I'm not saying this won't happen eventually, but it won't be as simple as just adding dragAndDropHooks to TabList.

[LFDanLu]

@majornista we briefly discussed the possibility of using Enter as the keyboard affordance to start a drag session since https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/ has Enter and/or Space to change which tab to display but just wanted to check if you had any opinions on the keyboard experience here.

[ttsirkia]

Related #5366. It would be very good addition if it was possible to reorder and close tabs by using the tab headers.

I think the keyboard actions could be very similar to GridList.

[devongovett]

Drag and drop would have to be more like ListBox, not GridList. Like ListBox, Tabs do not allow interactive children within them according to the aria spec. That means we couldn't have a drag button affordance inside them like GridList does. You could potentially trigger drag and drop by pressing Enter on an already selected tab. For the same reason, close buttons can't be supported within Tabs unfortunately.

Another possibility would be to just use GridList styled to look like Tabs instead of the actual Tabs component if they have interactive elements inside them. Not sure that's ideal, but it could be the only valid option until something like the aria-actions proposal is standardized. w3c/aria#1440

[ttsirkia]

That's actually true that ListBox is a better example here as it doesn't have any visible handle.

It is unfortunate that Aria specs limits the functionality. I didn't try this earlier but noticed that Edge has implemented quite nice keyboard actions:

You can swap the position of the tabs by using Ctrl+left/right arrow. I couldn't get this working with Chrome.