Previously, TabList was unable to support interactive tabs, such as tabs with a dismiss/close button to remove them, or tabs that included a dropdown or search box.
The primary slot for a Tab was a button designated with role=tab. Per ARIA guidelines, elements with role=tab are expected to only contain presentational children.
New Behavior
This PR introduces the InteractiveTab component, which is an extension of Tab, utilizing a div as its base. It features three additional slots: button (where role=tab is applied), beforeContent, and afterContent. This structure, reminiscent of the Input component, permits the insertion of interactive elements both before and after the tab button.
The InteractiveTab applies indicator styles to the root div and button styles to the button slot.
Context
Previously, TabList was unable to support interactive tabs, such as tabs with a dismiss/close button to remove them, or tabs that included a dropdown or search box.
The primary slot for a Tab was a button designated with role=tab. Per ARIA guidelines, elements with role=tab are expected to only contain presentational children.
New Behavior
This PR introduces the InteractiveTab component, which is an extension of
Tab, utilizing a div as its base. It features three additional slots: button (whererole=tabis applied),beforeContent, andafterContent. This structure, reminiscent of theInputcomponent, permits the insertion of interactive elements both before and after the tab button.The
InteractiveTabapplies indicator styles to the root div and button styles to thebuttonslot.Related Issue(s)
Blocked by https://github.com/microsoft/fluentui/pull/32125 Addresses issue #32078