Support for buttons in TabList

[ritz078]

It will be great to have support for buttons in Tabs. The custom implementation is way complicated. I am trying to build this:

The solution seems hacky but I have been able to build this. The only restriction is that I am forced to set keyboardActivation to manual as with my workaround, automatic tab changes won't work. Also, this leads to nested interactive elements since I have to use a button inside a tab item.

[LFDanLu]

I think the delete button won't be that problematic so long as you make those buttons non-keyboard focusable and instead include Delete/Backspace as a way for keyboard users to trigger deletion, similar to https://react-spectrum.adobe.com/react-spectrum/TagGroup.html#onremove or a SearchField. Mobile screenreader users should still be able to target the delete button via swiping

What exactly forced the keyboardActivation="manual" change? As for adding support for this pattern in React Spectrum, we'd need to discuss this with design and see if teams have a use case for the pattern. Supporting it in React Aria could be done earlier, but would like to run it by the team and our accessibility members first before picking this up ourselves or opening it up for contribution.

[ritz078]

I think the delete button won't be that problematic so long as you make those buttons non-keyboard focusable and instead include Delete/Backspace as a way for keyboard users to trigger deletion

Yes. That isn't a problem. The problem is the "+" button.

What exactly forced the keyboardActivation="manual" change?

If I do not do that, the moment I shift focus to the "+" button, the component throws an error because it expects that the tab item also has corresponding content that is expected with every other item. Is there a way I can override this behaviour for selected tab item ?

[LFDanLu]

I see, quite frankly I'm not sure if the "+" button should even be included within the tablist as a tab since it doesn't behave quite like a tab. Maybe it should be accessed via Tab instead of being navigated to via the arrow keys? Accessibility wise it would be odd for the button to be labeled as a tab but not actually control what is portrayed in the tabpanel.

[devongovett]

Yeah, see this example for how to add buttons as siblings to the tab list: https://react-spectrum.adobe.com/react-aria/Tabs.html#dynamic-items

[devongovett]

The ARIA spec does not allow interactive elements inside tabs. They won't be reachable by a screen reader.

[ritz078]

Yes. I don't think that's a great idea either. I can avoid using a button inside the tab item but it will be great if there's a way to call onAction when a tab item is pressed. I would also like an API to prevent the default behaviour where a click changes the content. If this can be enabled using tabProps, I don't need to use a button inside the tab.

The API can look like useTab({ onAction: (e) => e.preventDefault() }) so that I can override the behaviour.