TabList disabled not working

[mjsawyers]

Current behavior

When I set disabled on TabList, the aria-disabled is not being applied.

I assume that this is a bug because I'm not seeing the same behavior as mentioned on the prop description:

disabled Determines if the element is disabled. This sets the aria-disabled attribute accordingly, enabling support for all elements, including those that don't support the native disabled attribute.

Steps to reproduce the bug

1. Open https://stackblitz.com/edit/pqfqvs?file=tab-panel-animated%2Findex.tsx
2. Set TabList disabled on either animated-tabs.tsx or in the Example component.
3. See Tabs are not disabled, and I can still navigate between them

Expected behavior

When I set disabled on TabList, I expect the TabList to disable the Tab elements.

Workaround

Set aria-disabled manually and add pointer-event: none to Tabs manually

#3532 (comment)

Possible solutions

No response

[diegohaz]

Thanks!

I guess we need to update the docs to clearly mention that the disabled prop works only if the focusable prop is set to true. Currently, the docs incorrectly states that it's true by default. (Edit: updated)

Here's how to disable the TabList component:

<TabList focusable disabled>

However, this doesn't automatically disable each individual Tab. They can still be interacted with using the keyboard. We might introduce this feature in the future, but for now, you need to pass the disabled prop to each Tab element:

<Tab disabled>