Support for reordering Tabs by dragging

[ttsirkia]

Provide a general summary of the feature here

Currently reordering of tabs in Tab component is not possible although many drag&drop features already exist for other components (such as GridList). Could it be possible to add an option to allow dragging for tabs?

🤔 Expected Behavior?

If the reordering of tabs is allowed, you could start dragging the tab header and select its new position. Just like the browser tabs in Chrome, for example.

😯 Current Behavior

This behavior is not supported.

💁 Possible Solution

No response

🔦 Context

There are several use cases in which there are some documents opened by user etc. which are shown as tabs. User might like to reorganize the order of the tabs by dragging the tab headers as you can do for browser tabs, for example.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I'm not sure how we'd do that. Tabs Aria does not allow for interactive elements inside tabs, so we couldn't place a drag button in them, so we'd need some other way to make it keyboard and VoiceOver accessible.

We can ask our accessibility team and see if anyone has ideas there. Or if you have any, feel free to add them here.

For now it might be easiest to use a dialog, then represent the order of the tabs in there with a GridList that allows dragging. When the dialog is closed, the tabs reorder.

[ttsirkia]

This is an example of the behavior https://ctxhou.github.io/react-tabtab/#draggable but by looking the HTML I guess it contains aria info only for the typical tab details, not about the dragging.

Using a specific dialog to reorder is of course one workaround for this but not that simple to use.

[ttsirkia]

BTW, would that restrict also adding a close button to a tab header if all interactive elements are against aria specifications?

[snowystinger]

I understand the concept. However, I cannot keyboard navigate to the tab lists in any of those examples. I don't think we should use those as examples to base our own implementation on. If there isn't prior work out there which supports all the input modes, then we'll need to see if we can come up with anything.

Correct, you cannot place a close button inside a Tab. See https://w3c.github.io/aria/#tab

Children Presentational: True