fix: Change strategy to detect tabs for compatibility with other libr…

…aries Fixes #424
reactjs · Oct 28, 2021 · 517a056 · 517a056
1 parent 7ff979f
commit 517a056
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 24 deletions.
diff --git a/src/components/Tab.js b/src/components/Tab.js
@@ -85,6 +85,7 @@ export default class Tab extends Component {
         aria-disabled={disabled ? 'true' : 'false'}
         aria-controls={panelId}
         tabIndex={tabIndex || (selected ? '0' : null)}
+        data-rttab
       >
         {children}
       </li>

diff --git a/src/components/UncontrolledTabs.js b/src/components/UncontrolledTabs.js
@@ -13,7 +13,7 @@ function isNode(node) {
 
 // Determine if a node from event.target is a Tab element
 function isTabNode(node) {
-  return isNode(node) && node.getAttribute('role') === 'tab';
+  return isNode(node) && node.getAttribute('data-rttab');
 }
 
 // Determine if a tab node is disabled
@@ -347,7 +347,7 @@ export default class UncontrolledTabs extends Component {
     let nodeAncestor = node.parentElement;
     do {
       if (nodeAncestor === this.node) return true;
-      if (nodeAncestor.getAttribute('data-tabs')) break;
+      if (nodeAncestor.getAttribute('data-rttabs')) break;
 
       nodeAncestor = nodeAncestor.parentElement;
     } while (nodeAncestor);
@@ -383,7 +383,7 @@ export default class UncontrolledTabs extends Component {
           this.node = node;
           if (domRef) domRef(node);
         }}
-        data-tabs
+        data-rttabs
       >
         {this.getChildren()}
       </div>

diff --git a/src/components/__tests__/__snapshots__/Tab-test.js.snap b/src/components/__tests__/__snapshots__/Tab-test.js.snap
@@ -6,6 +6,7 @@ exports[`<Tab /> override the tabIndex if it was provided 1`] = `
   aria-disabled="false"
   aria-selected="false"
   className="react-tabs__tab"
+  data-rttab={true}
   id={null}
   role="tab"
   tabIndex="0"
@@ -20,6 +21,7 @@ exports[`<Tab /> should accept className 1`] = `
   aria-disabled="false"
   aria-selected="false"
   className="foobar"
+  data-rttab={true}
   id={null}
   role="tab"
   tabIndex={null}
@@ -32,6 +34,7 @@ exports[`<Tab /> should allow to be wrapped in higher-order-component 1`] = `
   aria-disabled="false"
   aria-selected="false"
   className="react-tabs__tab"
+  data-rttab={true}
   id={null}
   role="tab"
   tabIndex={null}
@@ -44,6 +47,7 @@ exports[`<Tab /> should have sane defaults 1`] = `
   aria-disabled="false"
   aria-selected="false"
   className="react-tabs__tab"
+  data-rttab={true}
   id={null}
   role="tab"
   tabIndex={null}
@@ -56,6 +60,7 @@ exports[`<Tab /> should not allow overriding all default properties 1`] = `
   aria-disabled="false"
   aria-selected="false"
   className="react-tabs__tab"
+  data-rttab={true}
   id={null}
   role="tab"
   tabIndex={null}
@@ -68,6 +73,7 @@ exports[`<Tab /> should pass through custom properties 1`] = `
   aria-disabled="false"
   aria-selected="false"
   className="react-tabs__tab"
+  data-rttab={true}
   data-tooltip="Tooltip contents"
   id={null}
   role="tab"
@@ -81,6 +87,7 @@ exports[`<Tab /> should support being disabled 1`] = `
   aria-disabled="true"
   aria-selected="false"
   className="react-tabs__tab react-tabs__tab--disabled"
+  data-rttab={true}
   id={null}
   role="tab"
   tabIndex={null}
@@ -93,6 +100,7 @@ exports[`<Tab /> should support being disabled with custom class name 1`] = `
   aria-disabled="true"
   aria-selected="false"
   className="react-tabs__tab coolDisabled"
+  data-rttab={true}
   id={null}
   role="tab"
   tabIndex={null}
@@ -105,6 +113,7 @@ exports[`<Tab /> should support being selected 1`] = `
   aria-disabled="false"
   aria-selected="true"
   className="react-tabs__tab react-tabs__tab--selected"
+  data-rttab={true}
   id="abcd"
   role="tab"
   tabIndex="0"
@@ -119,6 +128,7 @@ exports[`<Tab /> should support being selected with custom class 1`] = `
   aria-disabled="false"
   aria-selected="true"
   className="react-tabs__tab cool"
+  data-rttab={true}
   id={null}
   role="tab"
   tabIndex="0"

diff --git a/src/components/__tests__/__snapshots__/TabList-test.js.snap b/src/components/__tests__/__snapshots__/TabList-test.js.snap
@@ -10,7 +10,7 @@ exports[`<TabList /> should accept className 1`] = `
 exports[`<TabList /> should allow for higher order components 1`] = `
 <div
   className="react-tabs"
-  data-tabs={true}
+  data-rttabs={true}
   onClick={[Function]}
   onKeyDown={[Function]}
 >
@@ -23,6 +23,7 @@ exports[`<TabList /> should allow for higher order components 1`] = `
       aria-disabled="false"
       aria-selected="true"
       className="react-tabs__tab react-tabs__tab--selected"
+      data-rttab={true}
       id="react-tabs-12"
       role="tab"
       tabIndex="0"
@@ -34,6 +35,7 @@ exports[`<TabList /> should allow for higher order components 1`] = `
       aria-disabled="false"
       aria-selected="false"
       className="react-tabs__tab"
+      data-rttab={true}
       id="react-tabs-14"
       role="tab"
       tabIndex={null}
@@ -61,7 +63,7 @@ exports[`<TabList /> should allow for higher order components 1`] = `
 exports[`<TabList /> should display the custom classnames for selected and disabled tab 1`] = `
 <div
   className="react-tabs"
-  data-tabs={true}
+  data-rttabs={true}
   onClick={[Function]}
   onKeyDown={[Function]}
 >
@@ -74,6 +76,7 @@ exports[`<TabList /> should display the custom classnames for selected and disab
       aria-disabled="false"
       aria-selected="true"
       className="react-tabs__tab active"
+      data-rttab={true}
       id="react-tabs-8"
       role="tab"
       tabIndex="0"
@@ -85,6 +88,7 @@ exports[`<TabList /> should display the custom classnames for selected and disab
       aria-disabled="true"
       aria-selected="false"
       className="react-tabs__tab disabled"
+      data-rttab={true}
       id="react-tabs-10"
       role="tab"
       tabIndex={null}
@@ -112,7 +116,7 @@ exports[`<TabList /> should display the custom classnames for selected and disab
 exports[`<TabList /> should display the custom classnames for selected and disabled tab specified on tabs 1`] = `
 <div
   className="react-tabs"
-  data-tabs={true}
+  data-rttabs={true}
   onClick={[Function]}
   onKeyDown={[Function]}
 >
@@ -125,6 +129,7 @@ exports[`<TabList /> should display the custom classnames for selected and disab
       aria-disabled="false"
       aria-selected="true"
       className="react-tabs__tab active"
+      data-rttab={true}
       id="react-tabs-4"
       role="tab"
       tabIndex="0"
@@ -136,6 +141,7 @@ exports[`<TabList /> should display the custom classnames for selected and disab
       aria-disabled="true"
       aria-selected="false"
       className="react-tabs__tab disabled"
+      data-rttab={true}
       id="react-tabs-6"
       role="tab"
       tabIndex={null}
@@ -185,7 +191,7 @@ exports[`<TabList /> should pass through custom properties 1`] = `
 exports[`<TabList /> should retain the default classnames for active and disabled tab 1`] = `
 <div
   className="react-tabs"
-  data-tabs={true}
+  data-rttabs={true}
   onClick={[Function]}
   onKeyDown={[Function]}
 >
@@ -198,6 +204,7 @@ exports[`<TabList /> should retain the default classnames for active and disable
       aria-disabled="false"
       aria-selected="true"
       className="react-tabs__tab react-tabs__tab--selected"
+      data-rttab={true}
       id="react-tabs-0"
       role="tab"
       tabIndex="0"
@@ -209,6 +216,7 @@ exports[`<TabList /> should retain the default classnames for active and disable
       aria-disabled="true"
       aria-selected="false"
       className="react-tabs__tab react-tabs__tab--disabled"
+      data-rttab={true}
       id="react-tabs-2"
       role="tab"
       tabIndex={null}