feat(tabs): verify click tabNode using *[role=tab] (#220)

Rendez · danez · commit 5bd6bfe0e409 · 2018-01-09T13:59:54.000+01:00
Implementing `react-tabs` with a custom `TabList` &amp; `Tab` components can be currently done by using the corresponding `tabRole` static in custom components. This is neat. However, the check within `isTabNode()` relies on the tagName being an `LI` element, and this has some limitations for cases where the `tabList` markup isn't done using a `ul &gt; li` structure.
diff --git a/src/components/UncontrolledTabs.js b/src/components/UncontrolledTabs.js
@@ -9,7 +9,7 @@ import { isTabList, isTabPanel, isTab } from '../helpers/elementTypes';
 
 // Determine if a node from event.target is a Tab element
 function isTabNode(node) {
-  return node.nodeName === 'LI' && node.getAttribute('role') === 'tab';
+  return node.getAttribute('role') === 'tab';
 }
 
 // Determine if a tab node is disabled

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ import { isTabList, isTabPanel, isTab } from '../helpers/elementTypes';`
`9`	`9`
`10`	`10`	`// Determine if a node from event.target is a Tab element`
`11`	`11`	`function isTabNode(node) {`
`12`		`- return node.nodeName === 'LI' && node.getAttribute('role') === 'tab';`
	`12`	`+ return node.getAttribute('role') === 'tab';`
`13`	`13`	`}`
`14`	`14`
`15`	`15`	`// Determine if a tab node is disabled`