[Bug] Children with aria role="tab" cause parent tabs to reset

[hailwood]

Simple Reproduction here https://codesandbox.io/s/crimson-sun-wrp0w

I was trying to use rc-collapse which is an accessible collapse component, when you have the accordion mode enabled then it correctly sets the components to have the aria-roles to tablist/tab/tabpanel unfortunately this causes the react-tabs component to think that clicks to open the accordion are a trigger for the tabs.

[lauriejones]

We were having the exact same issue. Our accordion component when used within tabs would break as this package assumed all role="tab*" attributes were for it.

A surprisingly small fix we were able to make was to add a data-tabs attribute to our Accordion component to make use of this functionality:

react-tabs/src/components/UncontrolledTabs.js

Lines 318 to 339 in a37ca85

	/**
	* Determine if a node from event.target is a Tab element for the current Tabs container.
	* If the clicked element is not a Tab, it returns false.
	* If it finds another Tabs container between the Tab and `this`, it returns false.
	*/
	isTabFromContainer(node) {
	// return immediately if the clicked element is not a Tab.
	if (!isTabNode(node)) {
	return false;
	}
	// Check if the first occurrence of a Tabs container is `this` one.
	let nodeAncestor = node.parentElement;
	do {
	if (nodeAncestor === this.node) return true;
	if (nodeAncestor.getAttribute('data-tabs')) break;
	nodeAncestor = nodeAncestor.parentElement;
	} while (nodeAncestor);
	return false;
	}

[SaayanBiswas98]

[SaayanBiswas98]

this will not reset the tabs