Simplify Tabs, Carousel, Accordion state

[bestguy]

All three components do similar things (show one at a time out of many), but each have different approaches to controlling this:

Carousel uses activeIndex Accordion uses active on AccordionItem TabContent requires tabId on TabPane

Accordion & TabContent also don't let you control externally..

[nikolas]

Yeah, I'm having trouble setting the active tab dynamically. I have something like this set up:

<script>
let activeTab = 'polls';

const onClickBroadcastPoll = function() {
    activeTab = 'responses';
};
</script>

<TabPane tabId="polls" tab="Polls" active={activeTab === 'polls'}>
</TabPane>
<TabPane tabId="responses" tab="Responses" active={activeTab === 'responses'}>
</TabPane>

And the active tab doesn't update when the activeTab variable updates via user input. Looking at the source code, I can see why - the active variable is only used onMount:

  onMount(() => {
    if (active) setActiveTab(tabId);
  });