From 487326c02f5316887dc4b27ac39e6ef69cdd2c03 Mon Sep 17 00:00:00 2001
From: Daniel Tschinder <231804+danez@users.noreply.github.com>
Date: Sat, 2 Apr 2022 22:34:54 +0000
Subject: [PATCH] feat: Use new `useId` hook from react 18

BREAKING CHANGE: React version 18 or newer is now required.
BREAKING CHANGE: `resetIdCounter` was removed as it is not necessary anymore. Ensure you remove any calls to it from your code.
---
 package.json                                  |   2 +-
 src/components/Tab.js                         |  11 +-
 src/components/TabPanel.js                    |   6 +-
 src/components/UncontrolledTabs.js            |  13 +-
 src/components/__tests__/Tab-test.js          |   2 +-
 src/components/__tests__/TabList-test.js      |   9 +
 src/components/__tests__/TabPanel-test.js     |   4 +-
 src/components/__tests__/Tabs-errors-test.js  |  11 +-
 src/components/__tests__/Tabs-node-test.js    |  19 +-
 src/components/__tests__/Tabs-test.js         |  22 +-
 .../__tests__/__snapshots__/Tab-test.js.snap  |  40 +-
 .../__snapshots__/TabList-test.js.snap        |  64 +--
 .../__snapshots__/TabPanel-test.js.snap       |  22 +-
 .../__tests__/__snapshots__/Tabs-test.js.snap | 432 +++++-------------
 src/helpers/uuid.js                           |   9 -
 src/index.js                                  |   1 -
 16 files changed, 240 insertions(+), 427 deletions(-)
 delete mode 100644 src/helpers/uuid.js

diff --git a/package.json b/package.json
index b90465f79..89d954d08 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "react-component"
   ],
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0"
+    "react": "^18.0.0"
   },
   "devDependencies": {
     "@babel/cli": "7.17.6",
diff --git a/src/components/Tab.js b/src/components/Tab.js
index 5f8ad0c44..265ec5f55 100644
--- a/src/components/Tab.js
+++ b/src/components/Tab.js
@@ -3,12 +3,11 @@ import React, { useEffect, useRef } from 'react';
 import cx from 'clsx';
 
 const DEFAULT_CLASS = 'react-tabs__tab';
-const DEFAULT_PROPS = {
+const defaultProps = {
   className: DEFAULT_CLASS,
   disabledClassName: `${DEFAULT_CLASS}--disabled`,
   focus: false,
   id: null,
-  panelId: null,
   selected: false,
   selectedClassName: `${DEFAULT_CLASS}--selected`,
 };
@@ -29,7 +28,6 @@ const propTypes = {
   disabledClassName: PropTypes.string,
   focus: PropTypes.bool, // private
   id: PropTypes.string, // private
-  panelId: PropTypes.string, // private
   selected: PropTypes.bool, // private
   selectedClassName: PropTypes.string,
   tabRef: PropTypes.func,
@@ -44,7 +42,6 @@ const Tab = (props) => {
     disabledClassName,
     focus,
     id,
-    panelId,
     selected,
     selectedClassName,
     tabIndex,
@@ -70,10 +67,10 @@ const Tab = (props) => {
         if (tabRef) tabRef(node);
       }}
       role="tab"
-      id={id}
+      id={`tab${id}`}
       aria-selected={selected ? 'true' : 'false'}
       aria-disabled={disabled ? 'true' : 'false'}
-      aria-controls={panelId}
+      aria-controls={`panel${id}`}
       tabIndex={tabIndex || (selected ? '0' : null)}
       data-rttab
     >
@@ -84,5 +81,5 @@ const Tab = (props) => {
 Tab.propTypes = propTypes;
 
 Tab.tabsRole = 'Tab';
-Tab.defaultProps = DEFAULT_PROPS;
+Tab.defaultProps = defaultProps;
 export default Tab;
diff --git a/src/components/TabPanel.js b/src/components/TabPanel.js
index b0c325d2c..db6e49cff 100644
--- a/src/components/TabPanel.js
+++ b/src/components/TabPanel.js
@@ -19,7 +19,6 @@ const propTypes = {
   id: PropTypes.string, // private
   selected: PropTypes.bool, // private
   selectedClassName: PropTypes.string,
-  tabId: PropTypes.string, // private
 };
 const TabPanel = (props) => {
   const {
@@ -29,7 +28,6 @@ const TabPanel = (props) => {
     id,
     selected,
     selectedClassName,
-    tabId,
     ...attributes
   } = props;
 
@@ -40,8 +38,8 @@ const TabPanel = (props) => {
         [selectedClassName]: selected,
       })}
       role="tabpanel"
-      id={id}
-      aria-labelledby={tabId}
+      id={`panel${id}`}
+      aria-labelledby={`tab${id}`}
     >
       {forceRender || selected ? children : null}
     </div>
diff --git a/src/components/UncontrolledTabs.js b/src/components/UncontrolledTabs.js
index 44ef38ccd..c90e3e6bd 100644
--- a/src/components/UncontrolledTabs.js
+++ b/src/components/UncontrolledTabs.js
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
-import React, { cloneElement, useRef } from 'react';
+import React, { cloneElement, useRef, useId } from 'react';
 import cx from 'clsx';
-import uuid from '../helpers/uuid';
 import { childrenPropType } from '../helpers/propTypes';
 import { getTabsCount as getTabsCountHelper } from '../helpers/count';
 import { deepMap } from '../helpers/childrenDeepMap';
@@ -71,7 +70,6 @@ const propTypes = {
 const UncontrolledTabs = (props) => {
   let tabNodes = useRef([]);
   let tabIds = useRef([]);
-  let panelIds = useRef([]);
   const ref = useRef();
 
   function setSelected(index, event) {
@@ -180,15 +178,14 @@ const UncontrolledTabs = (props) => {
     } = props;
 
     tabIds.current = tabIds.current || [];
-    panelIds.current = panelIds.current || [];
     let diff = tabIds.current.length - getTabsCount();
 
     // Add ids if new tabs have been added
     // Don't bother removing ids, just keep them in case they are added again
     // This is more efficient, and keeps the uuid counter under control
+    const id = useId();
     while (diff++ < 0) {
-      tabIds.current.push(uuid());
-      panelIds.current.push(uuid());
+      tabIds.current.push(`${id}${tabIds.current.length}`);
     }
 
     // Map children to dynamically setup refs
@@ -225,7 +222,6 @@ const UncontrolledTabs = (props) => {
                 tabNodes.current[key] = node;
               },
               id: tabIds.current[listIndex],
-              panelId: panelIds.current[listIndex],
               selected,
               focus: selected && (focus || wasTabFocused),
             };
@@ -242,8 +238,7 @@ const UncontrolledTabs = (props) => {
         });
       } else if (isTabPanel(child)) {
         const props = {
-          id: panelIds.current[index],
-          tabId: tabIds.current[index],
+          id: tabIds.current[index],
           selected: selectedIndex === index,
         };
 
diff --git a/src/components/__tests__/Tab-test.js b/src/components/__tests__/Tab-test.js
index e159e1d62..6b3d00e6a 100644
--- a/src/components/__tests__/Tab-test.js
+++ b/src/components/__tests__/Tab-test.js
@@ -25,7 +25,7 @@ describe('<Tab />', () => {
 
   it('should support being selected', () => {
     expectToMatchSnapshot(
-      <Tab selected id="abcd" panelId="1234">
+      <Tab selected id="abcd">
         Hello
       </Tab>,
     );
diff --git a/src/components/__tests__/TabList-test.js b/src/components/__tests__/TabList-test.js
index 9e9b4d3a4..ed9552c14 100644
--- a/src/components/__tests__/TabList-test.js
+++ b/src/components/__tests__/TabList-test.js
@@ -6,6 +6,15 @@ import TabPanel from '../TabPanel';
 import Tabs from '../Tabs';
 import { TabListWrapper, TabWrapper } from './helpers/higherOrder';
 
+jest.mock('react', () => {
+  const originalModule = jest.requireActual('react');
+
+  return {
+    ...originalModule,
+    useId: () => ':r0:',
+  };
+});
+
 function expectToMatchSnapshot(component) {
   expect(renderer.create(component).toJSON()).toMatchSnapshot();
 }
diff --git a/src/components/__tests__/TabPanel-test.js b/src/components/__tests__/TabPanel-test.js
index 9a21e9146..b8a7a8099 100644
--- a/src/components/__tests__/TabPanel-test.js
+++ b/src/components/__tests__/TabPanel-test.js
@@ -33,7 +33,7 @@ describe('<TabPanel />', () => {
 
   it('should support being selected', () => {
     expectToMatchSnapshot(
-      <TabPanel selected id="abcd" tabId="1234">
+      <TabPanel selected id="abcd">
         Hola
       </TabPanel>,
     );
@@ -41,7 +41,7 @@ describe('<TabPanel />', () => {
 
   it('should support being selected with custom class name', () => {
     expectToMatchSnapshot(
-      <TabPanel selected id="abcd" tabId="1234" selectedClassName="selected">
+      <TabPanel selected id="abcd" selectedClassName="selected">
         Hola
       </TabPanel>,
     );
diff --git a/src/components/__tests__/Tabs-errors-test.js b/src/components/__tests__/Tabs-errors-test.js
index ddc0f3703..2f6a75acf 100644
--- a/src/components/__tests__/Tabs-errors-test.js
+++ b/src/components/__tests__/Tabs-errors-test.js
@@ -5,7 +5,15 @@ import Tab from '../Tab';
 import TabList from '../TabList';
 import TabPanel from '../TabPanel';
 import Tabs from '../Tabs';
-import { reset as resetIdCounter } from '../../helpers/uuid';
+
+jest.mock('react', () => {
+  const originalModule = jest.requireActual('react');
+
+  return {
+    ...originalModule,
+    useId: () => ':r0:',
+  };
+});
 
 describe('<Tabs />', () => {
   let consoleErrorMock;
@@ -21,7 +29,6 @@ describe('<Tabs />', () => {
   }
 
   beforeEach(() => {
-    resetIdCounter();
     consoleErrorMock = jest.spyOn(console, 'error').mockImplementation();
   });
 
diff --git a/src/components/__tests__/Tabs-node-test.js b/src/components/__tests__/Tabs-node-test.js
index cf94e77fc..7e608936d 100644
--- a/src/components/__tests__/Tabs-node-test.js
+++ b/src/components/__tests__/Tabs-node-test.js
@@ -6,7 +6,15 @@ import Tab from '../Tab';
 import TabList from '../TabList';
 import TabPanel from '../TabPanel';
 import Tabs from '../Tabs';
-import { reset as resetIdCounter } from '../../helpers/uuid';
+
+jest.mock('react', () => {
+  const originalModule = jest.requireActual('react');
+
+  return {
+    ...originalModule,
+    useId: () => ':r0:',
+  };
+});
 
 function createTabs(props = {}) {
   return (
@@ -28,15 +36,6 @@ function createTabs(props = {}) {
 }
 
 describe('ServerSide <Tabs />', () => {
-  beforeEach(() => resetIdCounter());
-
-  beforeAll(() => {
-    // eslint-disable-next-line no-console
-    console.error = (error) => {
-      throw new Error(error);
-    };
-  });
-
   test('does not crash in node environments', () => {
     expect(() => createTabs()).not.toThrow();
   });
diff --git a/src/components/__tests__/Tabs-test.js b/src/components/__tests__/Tabs-test.js
index eed73ee00..a993e82c6 100644
--- a/src/components/__tests__/Tabs-test.js
+++ b/src/components/__tests__/Tabs-test.js
@@ -6,13 +6,21 @@ import Tab from '../Tab';
 import TabList from '../TabList';
 import TabPanel from '../TabPanel';
 import Tabs from '../Tabs';
-import { reset as resetIdCounter } from '../../helpers/uuid';
 import {
   TabListWrapper,
   TabWrapper,
   TabPanelWrapper,
 } from './helpers/higherOrder';
 
+jest.mock('react', () => {
+  const originalModule = jest.requireActual('react');
+
+  return {
+    ...originalModule,
+    useId: () => ':r0:',
+  };
+});
+
 function expectToMatchSnapshot(component) {
   expect(render(component).container.firstChild).toMatchSnapshot();
 }
@@ -47,8 +55,6 @@ function assertTabSelected(tabNo, node = screen) {
 }
 
 describe('<Tabs />', () => {
-  beforeEach(() => resetIdCounter());
-
   describe('props', () => {
     test('should have sane defaults', () => {
       expectToMatchSnapshot(createTabs());
@@ -98,16 +104,6 @@ describe('<Tabs />', () => {
     });
   });
 
-  describe('child props', () => {
-    test('should reset ids correctly', () => {
-      expectToMatchSnapshot(createTabs());
-
-      resetIdCounter();
-
-      expectToMatchSnapshot(createTabs());
-    });
-  });
-
   describe('interaction', () => {
     describe('mouse', () => {
       test('should update selectedIndex when clicked', async () => {
diff --git a/src/components/__tests__/__snapshots__/Tab-test.js.snap b/src/components/__tests__/__snapshots__/Tab-test.js.snap
index f297ca0e3..ebf635d1b 100644
--- a/src/components/__tests__/__snapshots__/Tab-test.js.snap
+++ b/src/components/__tests__/__snapshots__/Tab-test.js.snap
@@ -2,12 +2,12 @@
 
 exports[`<Tab /> override the tabIndex if it was provided 1`] = `
 <li
-  aria-controls={null}
+  aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
   className="react-tabs__tab"
   data-rttab={true}
-  id={null}
+  id="tabnull"
   role="tab"
   tabIndex="0"
 >
@@ -17,12 +17,12 @@ exports[`<Tab /> override the tabIndex if it was provided 1`] = `
 
 exports[`<Tab /> should accept className 1`] = `
 <li
-  aria-controls={null}
+  aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
   className="foobar"
   data-rttab={true}
-  id={null}
+  id="tabnull"
   role="tab"
   tabIndex={null}
 />
@@ -30,12 +30,12 @@ exports[`<Tab /> should accept className 1`] = `
 
 exports[`<Tab /> should allow to be wrapped in higher-order-component 1`] = `
 <li
-  aria-controls={null}
+  aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
   className="react-tabs__tab"
   data-rttab={true}
-  id={null}
+  id="tabnull"
   role="tab"
   tabIndex={null}
 />
@@ -43,12 +43,12 @@ exports[`<Tab /> should allow to be wrapped in higher-order-component 1`] = `
 
 exports[`<Tab /> should have sane defaults 1`] = `
 <li
-  aria-controls={null}
+  aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
   className="react-tabs__tab"
   data-rttab={true}
-  id={null}
+  id="tabnull"
   role="tab"
   tabIndex={null}
 />
@@ -56,12 +56,12 @@ exports[`<Tab /> should have sane defaults 1`] = `
 
 exports[`<Tab /> should not allow overriding all default properties 1`] = `
 <li
-  aria-controls={null}
+  aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
   className="react-tabs__tab"
   data-rttab={true}
-  id={null}
+  id="tabnull"
   role="tab"
   tabIndex={null}
 />
@@ -69,13 +69,13 @@ exports[`<Tab /> should not allow overriding all default properties 1`] = `
 
 exports[`<Tab /> should pass through custom properties 1`] = `
 <li
-  aria-controls={null}
+  aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="false"
   className="react-tabs__tab"
   data-rttab={true}
   data-tooltip="Tooltip contents"
-  id={null}
+  id="tabnull"
   role="tab"
   tabIndex={null}
 />
@@ -83,12 +83,12 @@ exports[`<Tab /> should pass through custom properties 1`] = `
 
 exports[`<Tab /> should support being disabled 1`] = `
 <li
-  aria-controls={null}
+  aria-controls="panelnull"
   aria-disabled="true"
   aria-selected="false"
   className="react-tabs__tab react-tabs__tab--disabled"
   data-rttab={true}
-  id={null}
+  id="tabnull"
   role="tab"
   tabIndex={null}
 />
@@ -96,12 +96,12 @@ exports[`<Tab /> should support being disabled 1`] = `
 
 exports[`<Tab /> should support being disabled with custom class name 1`] = `
 <li
-  aria-controls={null}
+  aria-controls="panelnull"
   aria-disabled="true"
   aria-selected="false"
   className="react-tabs__tab coolDisabled"
   data-rttab={true}
-  id={null}
+  id="tabnull"
   role="tab"
   tabIndex={null}
 />
@@ -109,12 +109,12 @@ exports[`<Tab /> should support being disabled with custom class name 1`] = `
 
 exports[`<Tab /> should support being selected 1`] = `
 <li
-  aria-controls="1234"
+  aria-controls="panelabcd"
   aria-disabled="false"
   aria-selected="true"
   className="react-tabs__tab react-tabs__tab--selected"
   data-rttab={true}
-  id="abcd"
+  id="tababcd"
   role="tab"
   tabIndex="0"
 >
@@ -124,12 +124,12 @@ exports[`<Tab /> should support being selected 1`] = `
 
 exports[`<Tab /> should support being selected with custom class 1`] = `
 <li
-  aria-controls={null}
+  aria-controls="panelnull"
   aria-disabled="false"
   aria-selected="true"
   className="react-tabs__tab cool"
   data-rttab={true}
-  id={null}
+  id="tabnull"
   role="tab"
   tabIndex="0"
 />
diff --git a/src/components/__tests__/__snapshots__/TabList-test.js.snap b/src/components/__tests__/__snapshots__/TabList-test.js.snap
index a103c88f7..1234211d0 100644
--- a/src/components/__tests__/__snapshots__/TabList-test.js.snap
+++ b/src/components/__tests__/__snapshots__/TabList-test.js.snap
@@ -19,24 +19,24 @@ exports[`<TabList /> should allow for higher order components 1`] = `
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-13"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       className="react-tabs__tab react-tabs__tab--selected"
       data-rttab={true}
-      id="react-tabs-12"
+      id="tab:r0:0"
       role="tab"
       tabIndex="0"
     >
       Foo
     </li>
     <li
-      aria-controls="react-tabs-15"
+      aria-controls="panel:r0:1"
       aria-disabled="false"
       aria-selected="false"
       className="react-tabs__tab"
       data-rttab={true}
-      id="react-tabs-14"
+      id="tab:r0:1"
       role="tab"
       tabIndex={null}
     >
@@ -44,17 +44,17 @@ exports[`<TabList /> should allow for higher order components 1`] = `
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-12"
+    aria-labelledby="tab:r0:0"
     className="react-tabs__tab-panel react-tabs__tab-panel--selected"
-    id="react-tabs-13"
+    id="panel:r0:0"
     role="tabpanel"
   >
     Foo
   </div>
   <div
-    aria-labelledby="react-tabs-14"
+    aria-labelledby="tab:r0:1"
     className="react-tabs__tab-panel"
-    id="react-tabs-15"
+    id="panel:r0:1"
     role="tabpanel"
   />
 </div>
@@ -72,24 +72,24 @@ exports[`<TabList /> should display the custom classnames for selected and disab
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-9"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       className="react-tabs__tab active"
       data-rttab={true}
-      id="react-tabs-8"
+      id="tab:r0:0"
       role="tab"
       tabIndex="0"
     >
       Foo
     </li>
     <li
-      aria-controls="react-tabs-11"
+      aria-controls="panel:r0:1"
       aria-disabled="true"
       aria-selected="false"
       className="react-tabs__tab disabled"
       data-rttab={true}
-      id="react-tabs-10"
+      id="tab:r0:1"
       role="tab"
       tabIndex={null}
     >
@@ -97,17 +97,17 @@ exports[`<TabList /> should display the custom classnames for selected and disab
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-8"
+    aria-labelledby="tab:r0:0"
     className="react-tabs__tab-panel react-tabs__tab-panel--selected"
-    id="react-tabs-9"
+    id="panel:r0:0"
     role="tabpanel"
   >
     Foo
   </div>
   <div
-    aria-labelledby="react-tabs-10"
+    aria-labelledby="tab:r0:1"
     className="react-tabs__tab-panel"
-    id="react-tabs-11"
+    id="panel:r0:1"
     role="tabpanel"
   />
 </div>
@@ -125,24 +125,24 @@ exports[`<TabList /> should display the custom classnames for selected and disab
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-5"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       className="react-tabs__tab active"
       data-rttab={true}
-      id="react-tabs-4"
+      id="tab:r0:0"
       role="tab"
       tabIndex="0"
     >
       Foo
     </li>
     <li
-      aria-controls="react-tabs-7"
+      aria-controls="panel:r0:1"
       aria-disabled="true"
       aria-selected="false"
       className="react-tabs__tab disabled"
       data-rttab={true}
-      id="react-tabs-6"
+      id="tab:r0:1"
       role="tab"
       tabIndex={null}
     >
@@ -150,17 +150,17 @@ exports[`<TabList /> should display the custom classnames for selected and disab
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-4"
+    aria-labelledby="tab:r0:0"
     className="react-tabs__tab-panel react-tabs__tab-panel--selected"
-    id="react-tabs-5"
+    id="panel:r0:0"
     role="tabpanel"
   >
     Foo
   </div>
   <div
-    aria-labelledby="react-tabs-6"
+    aria-labelledby="tab:r0:1"
     className="react-tabs__tab-panel"
-    id="react-tabs-7"
+    id="panel:r0:1"
     role="tabpanel"
   />
 </div>
@@ -200,24 +200,24 @@ exports[`<TabList /> should retain the default classnames for active and disable
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-1"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       className="react-tabs__tab react-tabs__tab--selected"
       data-rttab={true}
-      id="react-tabs-0"
+      id="tab:r0:0"
       role="tab"
       tabIndex="0"
     >
       Foo
     </li>
     <li
-      aria-controls="react-tabs-3"
+      aria-controls="panel:r0:1"
       aria-disabled="true"
       aria-selected="false"
       className="react-tabs__tab react-tabs__tab--disabled"
       data-rttab={true}
-      id="react-tabs-2"
+      id="tab:r0:1"
       role="tab"
       tabIndex={null}
     >
@@ -225,17 +225,17 @@ exports[`<TabList /> should retain the default classnames for active and disable
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-0"
+    aria-labelledby="tab:r0:0"
     className="react-tabs__tab-panel react-tabs__tab-panel--selected"
-    id="react-tabs-1"
+    id="panel:r0:0"
     role="tabpanel"
   >
     Foo
   </div>
   <div
-    aria-labelledby="react-tabs-2"
+    aria-labelledby="tab:r0:1"
     className="react-tabs__tab-panel"
-    id="react-tabs-3"
+    id="panel:r0:1"
     role="tabpanel"
   />
 </div>
diff --git a/src/components/__tests__/__snapshots__/TabPanel-test.js.snap b/src/components/__tests__/__snapshots__/TabPanel-test.js.snap
index 303a902f2..4c4f1d126 100644
--- a/src/components/__tests__/__snapshots__/TabPanel-test.js.snap
+++ b/src/components/__tests__/__snapshots__/TabPanel-test.js.snap
@@ -2,43 +2,55 @@
 
 exports[`<TabPanel /> should accept className 1`] = `
 <div
+  aria-labelledby="tabundefined"
   className="foobar"
+  id="panelundefined"
   role="tabpanel"
 />
 `;
 
 exports[`<TabPanel /> should allow for higher-order components 1`] = `
 <div
+  aria-labelledby="tabundefined"
   className="react-tabs__tab-panel"
+  id="panelundefined"
   role="tabpanel"
 />
 `;
 
 exports[`<TabPanel /> should have sane defaults 1`] = `
 <div
+  aria-labelledby="tabundefined"
   className="react-tabs__tab-panel"
+  id="panelundefined"
   role="tabpanel"
 />
 `;
 
 exports[`<TabPanel /> should not allow overriding all default properties 1`] = `
 <div
+  aria-labelledby="tabundefined"
   className="react-tabs__tab-panel"
+  id="panelundefined"
   role="tabpanel"
 />
 `;
 
 exports[`<TabPanel /> should pass through custom properties 1`] = `
 <div
+  aria-labelledby="tabundefined"
   className="react-tabs__tab-panel"
   data-tooltip="Tooltip contents"
+  id="panelundefined"
   role="tabpanel"
 />
 `;
 
 exports[`<TabPanel /> should render when forced 1`] = `
 <div
+  aria-labelledby="tabundefined"
   className="react-tabs__tab-panel"
+  id="panelundefined"
   role="tabpanel"
 >
   Hola
@@ -47,7 +59,9 @@ exports[`<TabPanel /> should render when forced 1`] = `
 
 exports[`<TabPanel /> should render when selected 1`] = `
 <div
+  aria-labelledby="tabundefined"
   className="react-tabs__tab-panel react-tabs__tab-panel--selected"
+  id="panelundefined"
   role="tabpanel"
 >
   Hola
@@ -56,9 +70,9 @@ exports[`<TabPanel /> should render when selected 1`] = `
 
 exports[`<TabPanel /> should support being selected 1`] = `
 <div
-  aria-labelledby="1234"
+  aria-labelledby="tababcd"
   className="react-tabs__tab-panel react-tabs__tab-panel--selected"
-  id="abcd"
+  id="panelabcd"
   role="tabpanel"
 >
   Hola
@@ -67,9 +81,9 @@ exports[`<TabPanel /> should support being selected 1`] = `
 
 exports[`<TabPanel /> should support being selected with custom class name 1`] = `
 <div
-  aria-labelledby="1234"
+  aria-labelledby="tababcd"
   className="react-tabs__tab-panel selected"
-  id="abcd"
+  id="panelabcd"
   role="tabpanel"
 >
   Hola
diff --git a/src/components/__tests__/__snapshots__/Tabs-test.js.snap b/src/components/__tests__/__snapshots__/Tabs-test.js.snap
index e573a03b7..1dc196fd6 100644
--- a/src/components/__tests__/__snapshots__/Tabs-test.js.snap
+++ b/src/components/__tests__/__snapshots__/Tabs-test.js.snap
@@ -1,197 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Tabs /> child props should reset ids correctly 1`] = `
-<div
-  class="react-tabs"
-  data-rttabs="true"
->
-  <ul
-    class="react-tabs__tab-list"
-    role="tablist"
-  >
-    <li
-      aria-controls="react-tabs-1"
-      aria-disabled="false"
-      aria-selected="true"
-      class="react-tabs__tab react-tabs__tab--selected"
-      data-rttab="true"
-      data-testid="tab1"
-      id="react-tabs-0"
-      role="tab"
-      tabindex="0"
-    >
-      Tab1
-    </li>
-    <li
-      aria-controls="react-tabs-3"
-      aria-disabled="false"
-      aria-selected="false"
-      class="react-tabs__tab"
-      data-rttab="true"
-      data-testid="tab2"
-      id="react-tabs-2"
-      role="tab"
-    >
-      Tab2
-    </li>
-    <li
-      aria-controls="react-tabs-5"
-      aria-disabled="false"
-      aria-selected="false"
-      class="react-tabs__tab"
-      data-rttab="true"
-      data-testid="tab3"
-      id="react-tabs-4"
-      role="tab"
-    >
-      <a
-        href="a"
-      >
-        Tab3
-      </a>
-    </li>
-    <li
-      aria-controls="react-tabs-7"
-      aria-disabled="true"
-      aria-selected="false"
-      class="react-tabs__tab react-tabs__tab--disabled"
-      data-rttab="true"
-      data-testid="tab4"
-      id="react-tabs-6"
-      role="tab"
-    >
-      Tab4
-    </li>
-  </ul>
-  <div
-    aria-labelledby="react-tabs-0"
-    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
-    data-testid="panel1"
-    id="react-tabs-1"
-    role="tabpanel"
-  >
-    Hello Tab1
-  </div>
-  <div
-    aria-labelledby="react-tabs-2"
-    class="react-tabs__tab-panel"
-    data-testid="panel2"
-    id="react-tabs-3"
-    role="tabpanel"
-  />
-  <div
-    aria-labelledby="react-tabs-4"
-    class="react-tabs__tab-panel"
-    data-testid="panel3"
-    id="react-tabs-5"
-    role="tabpanel"
-  />
-  <div
-    aria-labelledby="react-tabs-6"
-    class="react-tabs__tab-panel"
-    data-testid="panel4"
-    id="react-tabs-7"
-    role="tabpanel"
-  />
-</div>
-`;
-
-exports[`<Tabs /> child props should reset ids correctly 2`] = `
-<div
-  class="react-tabs"
-  data-rttabs="true"
->
-  <ul
-    class="react-tabs__tab-list"
-    role="tablist"
-  >
-    <li
-      aria-controls="react-tabs-1"
-      aria-disabled="false"
-      aria-selected="true"
-      class="react-tabs__tab react-tabs__tab--selected"
-      data-rttab="true"
-      data-testid="tab1"
-      id="react-tabs-0"
-      role="tab"
-      tabindex="0"
-    >
-      Tab1
-    </li>
-    <li
-      aria-controls="react-tabs-3"
-      aria-disabled="false"
-      aria-selected="false"
-      class="react-tabs__tab"
-      data-rttab="true"
-      data-testid="tab2"
-      id="react-tabs-2"
-      role="tab"
-    >
-      Tab2
-    </li>
-    <li
-      aria-controls="react-tabs-5"
-      aria-disabled="false"
-      aria-selected="false"
-      class="react-tabs__tab"
-      data-rttab="true"
-      data-testid="tab3"
-      id="react-tabs-4"
-      role="tab"
-    >
-      <a
-        href="a"
-      >
-        Tab3
-      </a>
-    </li>
-    <li
-      aria-controls="react-tabs-7"
-      aria-disabled="true"
-      aria-selected="false"
-      class="react-tabs__tab react-tabs__tab--disabled"
-      data-rttab="true"
-      data-testid="tab4"
-      id="react-tabs-6"
-      role="tab"
-    >
-      Tab4
-    </li>
-  </ul>
-  <div
-    aria-labelledby="react-tabs-0"
-    class="react-tabs__tab-panel react-tabs__tab-panel--selected"
-    data-testid="panel1"
-    id="react-tabs-1"
-    role="tabpanel"
-  >
-    Hello Tab1
-  </div>
-  <div
-    aria-labelledby="react-tabs-2"
-    class="react-tabs__tab-panel"
-    data-testid="panel2"
-    id="react-tabs-3"
-    role="tabpanel"
-  />
-  <div
-    aria-labelledby="react-tabs-4"
-    class="react-tabs__tab-panel"
-    data-testid="panel3"
-    id="react-tabs-5"
-    role="tabpanel"
-  />
-  <div
-    aria-labelledby="react-tabs-6"
-    class="react-tabs__tab-panel"
-    data-testid="panel4"
-    id="react-tabs-7"
-    role="tabpanel"
-  />
-</div>
-`;
-
 exports[`<Tabs /> performance should render all tabs if forceRenderTabPanel is true 1`] = `
 <div
   class="react-tabs"
@@ -202,38 +10,38 @@ exports[`<Tabs /> performance should render all tabs if forceRenderTabPanel is t
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-1"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       class="react-tabs__tab react-tabs__tab--selected"
       data-rttab="true"
       data-testid="tab1"
-      id="react-tabs-0"
+      id="tab:r0:0"
       role="tab"
       tabindex="0"
     >
       Tab1
     </li>
     <li
-      aria-controls="react-tabs-3"
+      aria-controls="panel:r0:1"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
       data-testid="tab2"
-      id="react-tabs-2"
+      id="tab:r0:1"
       role="tab"
     >
       Tab2
     </li>
     <li
-      aria-controls="react-tabs-5"
+      aria-controls="panel:r0:2"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
       data-testid="tab3"
-      id="react-tabs-4"
+      id="tab:r0:2"
       role="tab"
     >
       <a
@@ -243,50 +51,50 @@ exports[`<Tabs /> performance should render all tabs if forceRenderTabPanel is t
       </a>
     </li>
     <li
-      aria-controls="react-tabs-7"
+      aria-controls="panel:r0:3"
       aria-disabled="true"
       aria-selected="false"
       class="react-tabs__tab react-tabs__tab--disabled"
       data-rttab="true"
       data-testid="tab4"
-      id="react-tabs-6"
+      id="tab:r0:3"
       role="tab"
     >
       Tab4
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-0"
+    aria-labelledby="tab:r0:0"
     class="react-tabs__tab-panel react-tabs__tab-panel--selected"
     data-testid="panel1"
-    id="react-tabs-1"
+    id="panel:r0:0"
     role="tabpanel"
   >
     Hello Tab1
   </div>
   <div
-    aria-labelledby="react-tabs-2"
+    aria-labelledby="tab:r0:1"
     class="react-tabs__tab-panel"
     data-testid="panel2"
-    id="react-tabs-3"
+    id="panel:r0:1"
     role="tabpanel"
   >
     Hello Tab2
   </div>
   <div
-    aria-labelledby="react-tabs-4"
+    aria-labelledby="tab:r0:2"
     class="react-tabs__tab-panel"
     data-testid="panel3"
-    id="react-tabs-5"
+    id="panel:r0:2"
     role="tabpanel"
   >
     Hello Tab3
   </div>
   <div
-    aria-labelledby="react-tabs-6"
+    aria-labelledby="tab:r0:3"
     class="react-tabs__tab-panel"
     data-testid="panel4"
-    id="react-tabs-7"
+    id="panel:r0:3"
     role="tabpanel"
   >
     Hello Tab4
@@ -304,38 +112,38 @@ exports[`<Tabs /> props should accept className 1`] = `
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-1"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       class="react-tabs__tab react-tabs__tab--selected"
       data-rttab="true"
       data-testid="tab1"
-      id="react-tabs-0"
+      id="tab:r0:0"
       role="tab"
       tabindex="0"
     >
       Tab1
     </li>
     <li
-      aria-controls="react-tabs-3"
+      aria-controls="panel:r0:1"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
       data-testid="tab2"
-      id="react-tabs-2"
+      id="tab:r0:1"
       role="tab"
     >
       Tab2
     </li>
     <li
-      aria-controls="react-tabs-5"
+      aria-controls="panel:r0:2"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
       data-testid="tab3"
-      id="react-tabs-4"
+      id="tab:r0:2"
       role="tab"
     >
       <a
@@ -345,46 +153,46 @@ exports[`<Tabs /> props should accept className 1`] = `
       </a>
     </li>
     <li
-      aria-controls="react-tabs-7"
+      aria-controls="panel:r0:3"
       aria-disabled="true"
       aria-selected="false"
       class="react-tabs__tab react-tabs__tab--disabled"
       data-rttab="true"
       data-testid="tab4"
-      id="react-tabs-6"
+      id="tab:r0:3"
       role="tab"
     >
       Tab4
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-0"
+    aria-labelledby="tab:r0:0"
     class="react-tabs__tab-panel react-tabs__tab-panel--selected"
     data-testid="panel1"
-    id="react-tabs-1"
+    id="panel:r0:0"
     role="tabpanel"
   >
     Hello Tab1
   </div>
   <div
-    aria-labelledby="react-tabs-2"
+    aria-labelledby="tab:r0:1"
     class="react-tabs__tab-panel"
     data-testid="panel2"
-    id="react-tabs-3"
+    id="panel:r0:1"
     role="tabpanel"
   />
   <div
-    aria-labelledby="react-tabs-4"
+    aria-labelledby="tab:r0:2"
     class="react-tabs__tab-panel"
     data-testid="panel3"
-    id="react-tabs-5"
+    id="panel:r0:2"
     role="tabpanel"
   />
   <div
-    aria-labelledby="react-tabs-6"
+    aria-labelledby="tab:r0:3"
     class="react-tabs__tab-panel"
     data-testid="panel4"
-    id="react-tabs-7"
+    id="panel:r0:3"
     role="tabpanel"
   />
 </div>
@@ -400,38 +208,38 @@ exports[`<Tabs /> props should have sane defaults 1`] = `
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-1"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       class="react-tabs__tab react-tabs__tab--selected"
       data-rttab="true"
       data-testid="tab1"
-      id="react-tabs-0"
+      id="tab:r0:0"
       role="tab"
       tabindex="0"
     >
       Tab1
     </li>
     <li
-      aria-controls="react-tabs-3"
+      aria-controls="panel:r0:1"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
       data-testid="tab2"
-      id="react-tabs-2"
+      id="tab:r0:1"
       role="tab"
     >
       Tab2
     </li>
     <li
-      aria-controls="react-tabs-5"
+      aria-controls="panel:r0:2"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
       data-testid="tab3"
-      id="react-tabs-4"
+      id="tab:r0:2"
       role="tab"
     >
       <a
@@ -441,46 +249,46 @@ exports[`<Tabs /> props should have sane defaults 1`] = `
       </a>
     </li>
     <li
-      aria-controls="react-tabs-7"
+      aria-controls="panel:r0:3"
       aria-disabled="true"
       aria-selected="false"
       class="react-tabs__tab react-tabs__tab--disabled"
       data-rttab="true"
       data-testid="tab4"
-      id="react-tabs-6"
+      id="tab:r0:3"
       role="tab"
     >
       Tab4
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-0"
+    aria-labelledby="tab:r0:0"
     class="react-tabs__tab-panel react-tabs__tab-panel--selected"
     data-testid="panel1"
-    id="react-tabs-1"
+    id="panel:r0:0"
     role="tabpanel"
   >
     Hello Tab1
   </div>
   <div
-    aria-labelledby="react-tabs-2"
+    aria-labelledby="tab:r0:1"
     class="react-tabs__tab-panel"
     data-testid="panel2"
-    id="react-tabs-3"
+    id="panel:r0:1"
     role="tabpanel"
   />
   <div
-    aria-labelledby="react-tabs-4"
+    aria-labelledby="tab:r0:2"
     class="react-tabs__tab-panel"
     data-testid="panel3"
-    id="react-tabs-5"
+    id="panel:r0:2"
     role="tabpanel"
   />
   <div
-    aria-labelledby="react-tabs-6"
+    aria-labelledby="tab:r0:3"
     class="react-tabs__tab-panel"
     data-testid="panel4"
-    id="react-tabs-7"
+    id="panel:r0:3"
     role="tabpanel"
   />
 </div>
@@ -496,37 +304,37 @@ exports[`<Tabs /> props should honor negative defaultIndex prop 1`] = `
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-1"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
       data-testid="tab1"
-      id="react-tabs-0"
+      id="tab:r0:0"
       role="tab"
     >
       Tab1
     </li>
     <li
-      aria-controls="react-tabs-3"
+      aria-controls="panel:r0:1"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
       data-testid="tab2"
-      id="react-tabs-2"
+      id="tab:r0:1"
       role="tab"
     >
       Tab2
     </li>
     <li
-      aria-controls="react-tabs-5"
+      aria-controls="panel:r0:2"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
       data-testid="tab3"
-      id="react-tabs-4"
+      id="tab:r0:2"
       role="tab"
     >
       <a
@@ -536,44 +344,44 @@ exports[`<Tabs /> props should honor negative defaultIndex prop 1`] = `
       </a>
     </li>
     <li
-      aria-controls="react-tabs-7"
+      aria-controls="panel:r0:3"
       aria-disabled="true"
       aria-selected="false"
       class="react-tabs__tab react-tabs__tab--disabled"
       data-rttab="true"
       data-testid="tab4"
-      id="react-tabs-6"
+      id="tab:r0:3"
       role="tab"
     >
       Tab4
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-0"
+    aria-labelledby="tab:r0:0"
     class="react-tabs__tab-panel"
     data-testid="panel1"
-    id="react-tabs-1"
+    id="panel:r0:0"
     role="tabpanel"
   />
   <div
-    aria-labelledby="react-tabs-2"
+    aria-labelledby="tab:r0:1"
     class="react-tabs__tab-panel"
     data-testid="panel2"
-    id="react-tabs-3"
+    id="panel:r0:1"
     role="tabpanel"
   />
   <div
-    aria-labelledby="react-tabs-4"
+    aria-labelledby="tab:r0:2"
     class="react-tabs__tab-panel"
     data-testid="panel3"
-    id="react-tabs-5"
+    id="panel:r0:2"
     role="tabpanel"
   />
   <div
-    aria-labelledby="react-tabs-6"
+    aria-labelledby="tab:r0:3"
     class="react-tabs__tab-panel"
     data-testid="panel4"
-    id="react-tabs-7"
+    id="panel:r0:3"
     role="tabpanel"
   />
 </div>
@@ -589,38 +397,38 @@ exports[`<Tabs /> props should honor positive defaultIndex prop 1`] = `
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-1"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
       data-testid="tab1"
-      id="react-tabs-0"
+      id="tab:r0:0"
       role="tab"
     >
       Tab1
     </li>
     <li
-      aria-controls="react-tabs-3"
+      aria-controls="panel:r0:1"
       aria-disabled="false"
       aria-selected="true"
       class="react-tabs__tab react-tabs__tab--selected"
       data-rttab="true"
       data-testid="tab2"
-      id="react-tabs-2"
+      id="tab:r0:1"
       role="tab"
       tabindex="0"
     >
       Tab2
     </li>
     <li
-      aria-controls="react-tabs-5"
+      aria-controls="panel:r0:2"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
       data-testid="tab3"
-      id="react-tabs-4"
+      id="tab:r0:2"
       role="tab"
     >
       <a
@@ -630,46 +438,46 @@ exports[`<Tabs /> props should honor positive defaultIndex prop 1`] = `
       </a>
     </li>
     <li
-      aria-controls="react-tabs-7"
+      aria-controls="panel:r0:3"
       aria-disabled="true"
       aria-selected="false"
       class="react-tabs__tab react-tabs__tab--disabled"
       data-rttab="true"
       data-testid="tab4"
-      id="react-tabs-6"
+      id="tab:r0:3"
       role="tab"
     >
       Tab4
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-0"
+    aria-labelledby="tab:r0:0"
     class="react-tabs__tab-panel"
     data-testid="panel1"
-    id="react-tabs-1"
+    id="panel:r0:0"
     role="tabpanel"
   />
   <div
-    aria-labelledby="react-tabs-2"
+    aria-labelledby="tab:r0:1"
     class="react-tabs__tab-panel react-tabs__tab-panel--selected"
     data-testid="panel2"
-    id="react-tabs-3"
+    id="panel:r0:1"
     role="tabpanel"
   >
     Hello Tab2
   </div>
   <div
-    aria-labelledby="react-tabs-4"
+    aria-labelledby="tab:r0:2"
     class="react-tabs__tab-panel"
     data-testid="panel3"
-    id="react-tabs-5"
+    id="panel:r0:2"
     role="tabpanel"
   />
   <div
-    aria-labelledby="react-tabs-6"
+    aria-labelledby="tab:r0:3"
     class="react-tabs__tab-panel"
     data-testid="panel4"
-    id="react-tabs-7"
+    id="panel:r0:3"
     role="tabpanel"
   />
 </div>
@@ -685,41 +493,41 @@ exports[`<Tabs /> should allow for higher order components 1`] = `
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-1"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       class="react-tabs__tab react-tabs__tab--selected"
       data-rttab="true"
-      id="react-tabs-0"
+      id="tab:r0:0"
       role="tab"
       tabindex="0"
     >
       Foo
     </li>
     <li
-      aria-controls="react-tabs-3"
+      aria-controls="panel:r0:1"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
-      id="react-tabs-2"
+      id="tab:r0:1"
       role="tab"
     >
       Bar
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-0"
+    aria-labelledby="tab:r0:0"
     class="react-tabs__tab-panel react-tabs__tab-panel--selected"
-    id="react-tabs-1"
+    id="panel:r0:0"
     role="tabpanel"
   >
     Foo
   </div>
   <div
-    aria-labelledby="react-tabs-2"
+    aria-labelledby="tab:r0:1"
     class="react-tabs__tab-panel"
-    id="react-tabs-3"
+    id="panel:r0:1"
     role="tabpanel"
   />
 </div>
@@ -737,12 +545,12 @@ exports[`<Tabs /> should allow string children 1`] = `
   >
     Foo
     <li
-      aria-controls="react-tabs-1"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       class="react-tabs__tab react-tabs__tab--selected"
       data-rttab="true"
-      id="react-tabs-0"
+      id="tab:r0:0"
       role="tab"
       tabindex="0"
     >
@@ -750,12 +558,12 @@ exports[`<Tabs /> should allow string children 1`] = `
     </li>
     Foo
     <li
-      aria-controls="react-tabs-3"
+      aria-controls="panel:r0:1"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
-      id="react-tabs-2"
+      id="tab:r0:1"
       role="tab"
     >
       Bar
@@ -763,17 +571,17 @@ exports[`<Tabs /> should allow string children 1`] = `
     Foo
   </ul>
   <div
-    aria-labelledby="react-tabs-0"
+    aria-labelledby="tab:r0:0"
     class="react-tabs__tab-panel react-tabs__tab-panel--selected"
-    id="react-tabs-1"
+    id="panel:r0:0"
     role="tabpanel"
   >
     Bar
   </div>
   <div
-    aria-labelledby="react-tabs-2"
+    aria-labelledby="tab:r0:1"
     class="react-tabs__tab-panel"
-    id="react-tabs-3"
+    id="panel:r0:1"
     role="tabpanel"
   />
   Foo
@@ -816,22 +624,22 @@ exports[`<Tabs /> validation should allow other DOM nodes 1`] = `
         role="tablist"
       >
         <li
-          aria-controls="react-tabs-1"
+          aria-controls="panel:r0:0"
           aria-disabled="false"
           aria-selected="true"
           class="react-tabs__tab react-tabs__tab--selected"
           data-rttab="true"
-          id="react-tabs-0"
+          id="tab:r0:0"
           role="tab"
           tabindex="0"
         />
         <li
-          aria-controls="react-tabs-3"
+          aria-controls="panel:r0:1"
           aria-disabled="false"
           aria-selected="false"
           class="react-tabs__tab"
           data-rttab="true"
-          id="react-tabs-2"
+          id="tab:r0:1"
           role="tab"
         />
       </ul>
@@ -846,15 +654,15 @@ exports[`<Tabs /> validation should allow other DOM nodes 1`] = `
     class="tab-panels"
   >
     <div
-      aria-labelledby="react-tabs-0"
+      aria-labelledby="tab:r0:0"
       class="react-tabs__tab-panel react-tabs__tab-panel--selected"
-      id="react-tabs-1"
+      id="panel:r0:0"
       role="tabpanel"
     />
     <div
-      aria-labelledby="react-tabs-2"
+      aria-labelledby="tab:r0:1"
       class="react-tabs__tab-panel"
-      id="react-tabs-3"
+      id="panel:r0:1"
       role="tabpanel"
     />
   </div>
@@ -867,9 +675,9 @@ exports[`<Tabs /> validation should allow random order for elements 1`] = `
   data-rttabs="true"
 >
   <div
-    aria-labelledby="react-tabs-0"
+    aria-labelledby="tab:r0:0"
     class="react-tabs__tab-panel react-tabs__tab-panel--selected"
-    id="react-tabs-1"
+    id="panel:r0:0"
     role="tabpanel"
   >
     Hello Foo
@@ -879,33 +687,33 @@ exports[`<Tabs /> validation should allow random order for elements 1`] = `
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-1"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       class="react-tabs__tab react-tabs__tab--selected"
       data-rttab="true"
-      id="react-tabs-0"
+      id="tab:r0:0"
       role="tab"
       tabindex="0"
     >
       Foo
     </li>
     <li
-      aria-controls="react-tabs-3"
+      aria-controls="panel:r0:1"
       aria-disabled="false"
       aria-selected="false"
       class="react-tabs__tab"
       data-rttab="true"
-      id="react-tabs-2"
+      id="tab:r0:1"
       role="tab"
     >
       Bar
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-2"
+    aria-labelledby="tab:r0:1"
     class="react-tabs__tab-panel"
-    id="react-tabs-3"
+    id="panel:r0:1"
     role="tabpanel"
   >
     Hello Bar
@@ -942,12 +750,12 @@ exports[`<Tabs /> validation should gracefully render null 1`] = `
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-1"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       class="react-tabs__tab react-tabs__tab--selected"
       data-rttab="true"
-      id="react-tabs-0"
+      id="tab:r0:0"
       role="tab"
       tabindex="0"
     >
@@ -955,9 +763,9 @@ exports[`<Tabs /> validation should gracefully render null 1`] = `
     </li>
   </ul>
   <div
-    aria-labelledby="react-tabs-0"
+    aria-labelledby="tab:r0:0"
     class="react-tabs__tab-panel react-tabs__tab-panel--selected"
-    id="react-tabs-1"
+    id="panel:r0:0"
     role="tabpanel"
   >
     Content A
@@ -975,21 +783,21 @@ exports[`<Tabs /> validation should not throw a warning when wrong element is fo
     role="tablist"
   >
     <li
-      aria-controls="react-tabs-1"
+      aria-controls="panel:r0:0"
       aria-disabled="false"
       aria-selected="true"
       class="react-tabs__tab react-tabs__tab--selected"
       data-rttab="true"
-      id="react-tabs-0"
+      id="tab:r0:0"
       role="tab"
       tabindex="0"
     />
     <div />
   </ul>
   <div
-    aria-labelledby="react-tabs-0"
+    aria-labelledby="tab:r0:0"
     class="react-tabs__tab-panel react-tabs__tab-panel--selected"
-    id="react-tabs-1"
+    id="panel:r0:0"
     role="tabpanel"
   />
 </div>
diff --git a/src/helpers/uuid.js b/src/helpers/uuid.js
deleted file mode 100644
index c68b5781f..000000000
--- a/src/helpers/uuid.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// Get a universally unique identifier
-let count = 0;
-export default function uuid() {
-  return `react-tabs-${count++}`;
-}
-
-export function reset() {
-  count = 0;
-}
diff --git a/src/index.js b/src/index.js
index 0bd52fba4..c6fd0fd0b 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,4 +2,3 @@ export { default as Tabs } from './components/Tabs';
 export { default as TabList } from './components/TabList';
 export { default as Tab } from './components/Tab';
 export { default as TabPanel } from './components/TabPanel';
-export { reset as resetIdCounter } from './helpers/uuid';