diff --git a/packages/patternfly-4/react-core/src/components/Tabs/Tabs.test.tsx b/packages/patternfly-4/react-core/src/components/Tabs/Tabs.test.tsx
index c7b410c4fc5..7ba820eef09 100644
--- a/packages/patternfly-4/react-core/src/components/Tabs/Tabs.test.tsx
+++ b/packages/patternfly-4/react-core/src/components/Tabs/Tabs.test.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { render, mount } from 'enzyme';
 import { Tabs } from './Tabs';
 import { Tab } from './Tab';
-import { TabContent } from './TabContent';
 
 test('should render simple tabs', () => {
-  const view = shallow(
+  const view = render(
     <Tabs id="simpleTabs">
       <Tab id="tab1" eventKey={0} title="Tab item 1">
         Tab 1 section
@@ -22,7 +21,7 @@ test('should render simple tabs', () => {
 });
 
 test('should render accessible tabs', () => {
-  const view = shallow(
+  const view = render(
     <Tabs id="accessibleTabs" aria-label="accessible Tabs example" variant="nav">
       <Tab id="tab1" eventKey={0} title="Tab item 1" href="#/items/1">
         Tab 1 section
@@ -39,7 +38,7 @@ test('should render accessible tabs', () => {
 });
 
 test('should render filled tabs', () => {
-  const view = shallow(
+  const view = render(
     <Tabs id="filledTabs" isFilled>
       <Tab id="tab1" eventKey={0} title="Tab item 1">
         Tab 1 section
@@ -56,8 +55,8 @@ test('should render filled tabs', () => {
 });
 
 test('should render secondary tabs', () => {
-  const view = shallow(
-    <Tabs id="primaryTabs">
+  const view = render(
+    <Tabs id="primarieTabs">
       <Tab eventKey={0} title="Tab item 1">
         <Tabs id="secondaryTabs">
           <Tab id="secondary tab1" eventKey={10} title="Secondary Tab 1">
@@ -143,8 +142,8 @@ test('should call handleScrollButtons tabs with scrolls', () => {
 });
 
 test('should render tabs with eventKey Strings', () => {
-  const view = shallow(
-    <Tabs id="simpleTabs">
+  const view = render(
+    <Tabs id="eventKeyTabs">
       <Tab id="tab1" eventKey={'one'} title="Tab item 1">
         Tab 1 section
       </Tab>
diff --git a/packages/patternfly-4/react-core/src/components/Tabs/Tabs.tsx b/packages/patternfly-4/react-core/src/components/Tabs/Tabs.tsx
index b57968ee2c9..fda27e83846 100644
--- a/packages/patternfly-4/react-core/src/components/Tabs/Tabs.tsx
+++ b/packages/patternfly-4/react-core/src/components/Tabs/Tabs.tsx
@@ -8,6 +8,7 @@ import { getUniqueId, isElementInView, sideElementIsOutOfView } from '../../help
 import { SIDE } from '../../helpers/constants';
 import { TabContent } from './TabContent';
 import { Tab } from './Tab';
+import { InjectedOuiaProps, withOuiaContext } from '../withOuia';
 
 export enum TabsVariant {
   div = 'div',
@@ -46,9 +47,9 @@ export interface TabsState {
   highlightRightScrollButton: boolean;
 }
 
-export class Tabs extends React.Component<TabsProps, TabsState> {
+class Tabs extends React.Component<TabsProps & InjectedOuiaProps, TabsState> {
   tabList = React.createRef<HTMLUListElement>();
-  constructor(props: TabsProps) {
+  constructor(props: TabsProps & InjectedOuiaProps) {
     super(props);
     this.state = {
       showLeftScrollButton: false,
@@ -177,6 +178,8 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
       rightScrollAriaLabel,
       'aria-label': ariaLabel,
       variant,
+      ouiaContext,
+      ouiaId,
       ...props
     } = this.props;
     const {
@@ -203,6 +206,10 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
             highlightRightScrollButton && styles.modifiers.endCurrent,
             className
           )}
+          {...ouiaContext.isOuia && {
+            'data-ouia-component-type': 'Tabs',
+            'data-ouia-component-id': ouiaId || ouiaContext.ouiaId
+          }}
           {...props}
         >
             <button
@@ -255,3 +262,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
     );
   }
 }
+
+const TabsWithOuiaContext = withOuiaContext(Tabs);
+
+export { TabsWithOuiaContext as Tabs };
diff --git a/packages/patternfly-4/react-core/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
index 5185523bfa1..2523616019c 100644
--- a/packages/patternfly-4/react-core/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Tabs/__snapshots__/Tabs.test.tsx.snap
@@ -1,79 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should call handleScrollButtons tabs with scrolls 1`] = `
-<Tabs
-  activeKey={0}
-  className=""
+<Component
   id="handleScrollButtons"
   isFilled={true}
-  isSecondary={false}
-  leftScrollAriaLabel="Scroll left"
-  onSelect={[Function]}
-  rightScrollAriaLabel="Scroll right"
-  variant="div"
 >
-  <div
-    className="pf-c-tabs pf-m-fill"
-    onSelect={[Function]}
+  <ComponentWithOuia
+    component={[Function]}
+    componentProps={
+      Object {
+        "children": Array [
+          <ForwardRef
+            eventKey={0}
+            id="tab1"
+            title="Tab item 1"
+          >
+            Tab 1 section
+          </ForwardRef>,
+          <ForwardRef
+            eventKey={1}
+            id="tab2"
+            title="Tab item 2"
+          >
+            Tab 2 section
+          </ForwardRef>,
+          <ForwardRef
+            eventKey={2}
+            id="tab3"
+            title="Tab item 3"
+          >
+            Tab 3 section
+          </ForwardRef>,
+        ],
+        "id": "handleScrollButtons",
+        "isFilled": true,
+      }
+    }
+    consumerContext={null}
   >
-    <button
-      aria-label="Scroll left"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
-    >
-      <AngleLeftIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      >
-        <svg
-          aria-hidden={true}
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 256 512"
-          width="1em"
-        >
-          <path
-            d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            transform=""
-          />
-        </svg>
-      </AngleLeftIcon>
-    </button>
-    <ul
-      className="pf-c-tabs__list"
-      onScroll={[Function]}
+    <Tabs
+      activeKey={0}
+      className=""
+      id="handleScrollButtons"
+      isFilled={true}
+      isSecondary={false}
+      leftScrollAriaLabel="Scroll left"
+      onSelect={[Function]}
+      ouiaContext={
+        Object {
+          "isOuia": false,
+          "ouiaId": null,
+        }
+      }
+      rightScrollAriaLabel="Scroll right"
+      variant="div"
     >
-      <li
-        className="pf-c-tabs__item pf-m-current"
-        key="0/.0"
+      <div
+        className="pf-c-tabs pf-m-fill"
+        onSelect={[Function]}
       >
-        <ForwardRef
-          aria-controls="pf-tab-section-0-tab1"
-          className="pf-c-tabs__button"
-          eventKey={0}
-          id="tab1"
+        <button
+          aria-label="Scroll left"
+          className="pf-c-tabs__scroll-button"
           onClick={[Function]}
-          title="Tab item 1"
         >
-          <TabContainer
-            aria-controls="pf-tab-section-0-tab1"
-            className="pf-c-tabs__button"
-            eventKey={0}
-            forwardRef={null}
-            id="tab1"
-            onClick={[Function]}
-            title="Tab item 1"
+          <AngleLeftIcon
+            color="currentColor"
+            noVerticalAlign={false}
+            size="sm"
+            title={null}
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style={
+                Object {
+                  "verticalAlign": "-0.125em",
+                }
+              }
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                transform=""
+              />
+            </svg>
+          </AngleLeftIcon>
+        </button>
+        <ul
+          className="pf-c-tabs__list"
+          onScroll={[Function]}
+        >
+          <li
+            className="pf-c-tabs__item pf-m-current"
+            key="0/.0"
           >
-            <Tab0
+            <ForwardRef
               aria-controls="pf-tab-section-0-tab1"
               className="pf-c-tabs__button"
               eventKey={0}
@@ -81,40 +107,40 @@ exports[`should call handleScrollButtons tabs with scrolls 1`] = `
               onClick={[Function]}
               title="Tab item 1"
             >
-              <button
+              <TabContainer
                 aria-controls="pf-tab-section-0-tab1"
                 className="pf-c-tabs__button"
+                eventKey={0}
+                forwardRef={null}
                 id="tab1"
                 onClick={[Function]}
+                title="Tab item 1"
               >
-                Tab item 1
-              </button>
-            </Tab0>
-          </TabContainer>
-        </ForwardRef>
-      </li>
-      <li
-        className="pf-c-tabs__item"
-        key="1/.1"
-      >
-        <ForwardRef
-          aria-controls="pf-tab-section-1-tab2"
-          className="pf-c-tabs__button"
-          eventKey={1}
-          id="tab2"
-          onClick={[Function]}
-          title="Tab item 2"
-        >
-          <TabContainer
-            aria-controls="pf-tab-section-1-tab2"
-            className="pf-c-tabs__button"
-            eventKey={1}
-            forwardRef={null}
-            id="tab2"
-            onClick={[Function]}
-            title="Tab item 2"
+                <Tab0
+                  aria-controls="pf-tab-section-0-tab1"
+                  className="pf-c-tabs__button"
+                  eventKey={0}
+                  id="tab1"
+                  onClick={[Function]}
+                  title="Tab item 1"
+                >
+                  <button
+                    aria-controls="pf-tab-section-0-tab1"
+                    className="pf-c-tabs__button"
+                    id="tab1"
+                    onClick={[Function]}
+                  >
+                    Tab item 1
+                  </button>
+                </Tab0>
+              </TabContainer>
+            </ForwardRef>
+          </li>
+          <li
+            className="pf-c-tabs__item"
+            key="1/.1"
           >
-            <Tab0
+            <ForwardRef
               aria-controls="pf-tab-section-1-tab2"
               className="pf-c-tabs__button"
               eventKey={1}
@@ -122,40 +148,40 @@ exports[`should call handleScrollButtons tabs with scrolls 1`] = `
               onClick={[Function]}
               title="Tab item 2"
             >
-              <button
+              <TabContainer
                 aria-controls="pf-tab-section-1-tab2"
                 className="pf-c-tabs__button"
+                eventKey={1}
+                forwardRef={null}
                 id="tab2"
                 onClick={[Function]}
+                title="Tab item 2"
               >
-                Tab item 2
-              </button>
-            </Tab0>
-          </TabContainer>
-        </ForwardRef>
-      </li>
-      <li
-        className="pf-c-tabs__item"
-        key="2/.2"
-      >
-        <ForwardRef
-          aria-controls="pf-tab-section-2-tab3"
-          className="pf-c-tabs__button"
-          eventKey={2}
-          id="tab3"
-          onClick={[Function]}
-          title="Tab item 3"
-        >
-          <TabContainer
-            aria-controls="pf-tab-section-2-tab3"
-            className="pf-c-tabs__button"
-            eventKey={2}
-            forwardRef={null}
-            id="tab3"
-            onClick={[Function]}
-            title="Tab item 3"
+                <Tab0
+                  aria-controls="pf-tab-section-1-tab2"
+                  className="pf-c-tabs__button"
+                  eventKey={1}
+                  id="tab2"
+                  onClick={[Function]}
+                  title="Tab item 2"
+                >
+                  <button
+                    aria-controls="pf-tab-section-1-tab2"
+                    className="pf-c-tabs__button"
+                    id="tab2"
+                    onClick={[Function]}
+                  >
+                    Tab item 2
+                  </button>
+                </Tab0>
+              </TabContainer>
+            </ForwardRef>
+          </li>
+          <li
+            className="pf-c-tabs__item"
+            key="2/.2"
           >
-            <Tab0
+            <ForwardRef
               aria-controls="pf-tab-section-2-tab3"
               className="pf-c-tabs__button"
               eventKey={2}
@@ -163,249 +189,294 @@ exports[`should call handleScrollButtons tabs with scrolls 1`] = `
               onClick={[Function]}
               title="Tab item 3"
             >
-              <button
+              <TabContainer
                 aria-controls="pf-tab-section-2-tab3"
                 className="pf-c-tabs__button"
+                eventKey={2}
+                forwardRef={null}
                 id="tab3"
                 onClick={[Function]}
+                title="Tab item 3"
               >
-                Tab item 3
-              </button>
-            </Tab0>
-          </TabContainer>
-        </ForwardRef>
-      </li>
-    </ul>
-    <button
-      aria-label="Scroll right"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
-    >
-      <AngleRightIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      >
-        <svg
-          aria-hidden={true}
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 256 512"
-          width="1em"
+                <Tab0
+                  aria-controls="pf-tab-section-2-tab3"
+                  className="pf-c-tabs__button"
+                  eventKey={2}
+                  id="tab3"
+                  onClick={[Function]}
+                  title="Tab item 3"
+                >
+                  <button
+                    aria-controls="pf-tab-section-2-tab3"
+                    className="pf-c-tabs__button"
+                    id="tab3"
+                    onClick={[Function]}
+                  >
+                    Tab item 3
+                  </button>
+                </Tab0>
+              </TabContainer>
+            </ForwardRef>
+          </li>
+        </ul>
+        <button
+          aria-label="Scroll right"
+          className="pf-c-tabs__scroll-button"
+          onClick={[Function]}
         >
-          <path
-            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            transform=""
-          />
-        </svg>
-      </AngleRightIcon>
-    </button>
-  </div>
-  <ForwardRef
-    activeKey={0}
-    child={
+          <AngleRightIcon
+            color="currentColor"
+            noVerticalAlign={false}
+            size="sm"
+            title={null}
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style={
+                Object {
+                  "verticalAlign": "-0.125em",
+                }
+              }
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                transform=""
+              />
+            </svg>
+          </AngleRightIcon>
+        </button>
+      </div>
       <ForwardRef
-        eventKey={0}
+        activeKey={0}
+        child={
+          <ForwardRef
+            eventKey={0}
+            id="tab1"
+            title="Tab item 1"
+          >
+            Tab 1 section
+          </ForwardRef>
+        }
         id="tab1"
-        title="Tab item 1"
+        key="0/.0"
       >
-        Tab 1 section
-      </ForwardRef>
-    }
-    id="tab1"
-    key="0/.0"
-  >
-    <TabContent0
-      activeKey={0}
-      child={
-        <ForwardRef
-          eventKey={0}
+        <TabContent0
+          activeKey={0}
+          child={
+            <ForwardRef
+              eventKey={0}
+              id="tab1"
+              title="Tab item 1"
+            >
+              Tab 1 section
+            </ForwardRef>
+          }
           id="tab1"
-          title="Tab item 1"
+          innerRef={null}
         >
-          Tab 1 section
-        </ForwardRef>
-      }
-      id="tab1"
-      innerRef={null}
-    >
-      <section
-        aria-labelledby="pf-tab-0-tab1"
-        className="pf-c-tab-content"
-        hidden={false}
-        id="pf-tab-section-0-tab1"
-        role="tabpanel"
-        tabIndex={0}
-      >
-        Tab 1 section
-      </section>
-    </TabContent0>
-  </ForwardRef>
-  <ForwardRef
-    activeKey={0}
-    child={
+          <section
+            aria-labelledby="pf-tab-0-tab1"
+            className="pf-c-tab-content"
+            hidden={false}
+            id="pf-tab-section-0-tab1"
+            role="tabpanel"
+            tabIndex={0}
+          >
+            Tab 1 section
+          </section>
+        </TabContent0>
+      </ForwardRef>
       <ForwardRef
-        eventKey={1}
+        activeKey={0}
+        child={
+          <ForwardRef
+            eventKey={1}
+            id="tab2"
+            title="Tab item 2"
+          >
+            Tab 2 section
+          </ForwardRef>
+        }
         id="tab2"
-        title="Tab item 2"
+        key="1/.1"
       >
-        Tab 2 section
-      </ForwardRef>
-    }
-    id="tab2"
-    key="1/.1"
-  >
-    <TabContent0
-      activeKey={0}
-      child={
-        <ForwardRef
-          eventKey={1}
+        <TabContent0
+          activeKey={0}
+          child={
+            <ForwardRef
+              eventKey={1}
+              id="tab2"
+              title="Tab item 2"
+            >
+              Tab 2 section
+            </ForwardRef>
+          }
           id="tab2"
-          title="Tab item 2"
+          innerRef={null}
         >
-          Tab 2 section
-        </ForwardRef>
-      }
-      id="tab2"
-      innerRef={null}
-    >
-      <section
-        aria-labelledby="pf-tab-1-tab2"
-        className="pf-c-tab-content"
-        hidden={true}
-        id="pf-tab-section-1-tab2"
-        role="tabpanel"
-        tabIndex={0}
-      >
-        Tab 2 section
-      </section>
-    </TabContent0>
-  </ForwardRef>
-  <ForwardRef
-    activeKey={0}
-    child={
+          <section
+            aria-labelledby="pf-tab-1-tab2"
+            className="pf-c-tab-content"
+            hidden={true}
+            id="pf-tab-section-1-tab2"
+            role="tabpanel"
+            tabIndex={0}
+          >
+            Tab 2 section
+          </section>
+        </TabContent0>
+      </ForwardRef>
       <ForwardRef
-        eventKey={2}
+        activeKey={0}
+        child={
+          <ForwardRef
+            eventKey={2}
+            id="tab3"
+            title="Tab item 3"
+          >
+            Tab 3 section
+          </ForwardRef>
+        }
         id="tab3"
-        title="Tab item 3"
+        key="2/.2"
       >
-        Tab 3 section
-      </ForwardRef>
-    }
-    id="tab3"
-    key="2/.2"
-  >
-    <TabContent0
-      activeKey={0}
-      child={
-        <ForwardRef
-          eventKey={2}
+        <TabContent0
+          activeKey={0}
+          child={
+            <ForwardRef
+              eventKey={2}
+              id="tab3"
+              title="Tab item 3"
+            >
+              Tab 3 section
+            </ForwardRef>
+          }
           id="tab3"
-          title="Tab item 3"
+          innerRef={null}
         >
-          Tab 3 section
-        </ForwardRef>
-      }
-      id="tab3"
-      innerRef={null}
-    >
-      <section
-        aria-labelledby="pf-tab-2-tab3"
-        className="pf-c-tab-content"
-        hidden={true}
-        id="pf-tab-section-2-tab3"
-        role="tabpanel"
-        tabIndex={0}
-      >
-        Tab 3 section
-      </section>
-    </TabContent0>
-  </ForwardRef>
-</Tabs>
+          <section
+            aria-labelledby="pf-tab-2-tab3"
+            className="pf-c-tab-content"
+            hidden={true}
+            id="pf-tab-section-2-tab3"
+            role="tabpanel"
+            tabIndex={0}
+          >
+            Tab 3 section
+          </section>
+        </TabContent0>
+      </ForwardRef>
+    </Tabs>
+  </ComponentWithOuia>
+</Component>
 `;
 
 exports[`should call scrollLeft tabs with scrolls 1`] = `
-<Tabs
-  activeKey={0}
-  className=""
+<Component
   id="scrollLeft"
   isFilled={true}
-  isSecondary={false}
-  leftScrollAriaLabel="Scroll left"
-  onSelect={[Function]}
-  rightScrollAriaLabel="Scroll right"
-  variant="div"
 >
-  <div
-    className="pf-c-tabs pf-m-fill"
-    onSelect={[Function]}
+  <ComponentWithOuia
+    component={[Function]}
+    componentProps={
+      Object {
+        "children": Array [
+          <ForwardRef
+            eventKey={0}
+            id="tab1"
+            title="Tab item 1"
+          >
+            Tab 1 section
+          </ForwardRef>,
+          <ForwardRef
+            eventKey={1}
+            id="tab2"
+            title="Tab item 2"
+          >
+            Tab 2 section
+          </ForwardRef>,
+          <ForwardRef
+            eventKey={2}
+            id="tab3"
+            title="Tab item 3"
+          >
+            Tab 3 section
+          </ForwardRef>,
+        ],
+        "id": "scrollLeft",
+        "isFilled": true,
+      }
+    }
+    consumerContext={null}
   >
-    <button
-      aria-label="Scroll left"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
-    >
-      <AngleLeftIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      >
-        <svg
-          aria-hidden={true}
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 256 512"
-          width="1em"
-        >
-          <path
-            d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            transform=""
-          />
-        </svg>
-      </AngleLeftIcon>
-    </button>
-    <ul
-      className="pf-c-tabs__list"
-      onScroll={[Function]}
+    <Tabs
+      activeKey={0}
+      className=""
+      id="scrollLeft"
+      isFilled={true}
+      isSecondary={false}
+      leftScrollAriaLabel="Scroll left"
+      onSelect={[Function]}
+      ouiaContext={
+        Object {
+          "isOuia": false,
+          "ouiaId": null,
+        }
+      }
+      rightScrollAriaLabel="Scroll right"
+      variant="div"
     >
-      <li
-        className="pf-c-tabs__item pf-m-current"
-        key="0/.0"
+      <div
+        className="pf-c-tabs pf-m-fill"
+        onSelect={[Function]}
       >
-        <ForwardRef
-          aria-controls="pf-tab-section-0-tab1"
-          className="pf-c-tabs__button"
-          eventKey={0}
-          id="tab1"
+        <button
+          aria-label="Scroll left"
+          className="pf-c-tabs__scroll-button"
           onClick={[Function]}
-          title="Tab item 1"
         >
-          <TabContainer
-            aria-controls="pf-tab-section-0-tab1"
-            className="pf-c-tabs__button"
-            eventKey={0}
-            forwardRef={null}
-            id="tab1"
-            onClick={[Function]}
-            title="Tab item 1"
+          <AngleLeftIcon
+            color="currentColor"
+            noVerticalAlign={false}
+            size="sm"
+            title={null}
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style={
+                Object {
+                  "verticalAlign": "-0.125em",
+                }
+              }
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                transform=""
+              />
+            </svg>
+          </AngleLeftIcon>
+        </button>
+        <ul
+          className="pf-c-tabs__list"
+          onScroll={[Function]}
+        >
+          <li
+            className="pf-c-tabs__item pf-m-current"
+            key="0/.0"
           >
-            <Tab0
+            <ForwardRef
               aria-controls="pf-tab-section-0-tab1"
               className="pf-c-tabs__button"
               eventKey={0}
@@ -413,40 +484,40 @@ exports[`should call scrollLeft tabs with scrolls 1`] = `
               onClick={[Function]}
               title="Tab item 1"
             >
-              <button
+              <TabContainer
                 aria-controls="pf-tab-section-0-tab1"
                 className="pf-c-tabs__button"
+                eventKey={0}
+                forwardRef={null}
                 id="tab1"
                 onClick={[Function]}
+                title="Tab item 1"
               >
-                Tab item 1
-              </button>
-            </Tab0>
-          </TabContainer>
-        </ForwardRef>
-      </li>
-      <li
-        className="pf-c-tabs__item"
-        key="1/.1"
-      >
-        <ForwardRef
-          aria-controls="pf-tab-section-1-tab2"
-          className="pf-c-tabs__button"
-          eventKey={1}
-          id="tab2"
-          onClick={[Function]}
-          title="Tab item 2"
-        >
-          <TabContainer
-            aria-controls="pf-tab-section-1-tab2"
-            className="pf-c-tabs__button"
-            eventKey={1}
-            forwardRef={null}
-            id="tab2"
-            onClick={[Function]}
-            title="Tab item 2"
+                <Tab0
+                  aria-controls="pf-tab-section-0-tab1"
+                  className="pf-c-tabs__button"
+                  eventKey={0}
+                  id="tab1"
+                  onClick={[Function]}
+                  title="Tab item 1"
+                >
+                  <button
+                    aria-controls="pf-tab-section-0-tab1"
+                    className="pf-c-tabs__button"
+                    id="tab1"
+                    onClick={[Function]}
+                  >
+                    Tab item 1
+                  </button>
+                </Tab0>
+              </TabContainer>
+            </ForwardRef>
+          </li>
+          <li
+            className="pf-c-tabs__item"
+            key="1/.1"
           >
-            <Tab0
+            <ForwardRef
               aria-controls="pf-tab-section-1-tab2"
               className="pf-c-tabs__button"
               eventKey={1}
@@ -454,40 +525,40 @@ exports[`should call scrollLeft tabs with scrolls 1`] = `
               onClick={[Function]}
               title="Tab item 2"
             >
-              <button
+              <TabContainer
                 aria-controls="pf-tab-section-1-tab2"
                 className="pf-c-tabs__button"
+                eventKey={1}
+                forwardRef={null}
                 id="tab2"
                 onClick={[Function]}
+                title="Tab item 2"
               >
-                Tab item 2
-              </button>
-            </Tab0>
-          </TabContainer>
-        </ForwardRef>
-      </li>
-      <li
-        className="pf-c-tabs__item"
-        key="2/.2"
-      >
-        <ForwardRef
-          aria-controls="pf-tab-section-2-tab3"
-          className="pf-c-tabs__button"
-          eventKey={2}
-          id="tab3"
-          onClick={[Function]}
-          title="Tab item 3"
-        >
-          <TabContainer
-            aria-controls="pf-tab-section-2-tab3"
-            className="pf-c-tabs__button"
-            eventKey={2}
-            forwardRef={null}
-            id="tab3"
-            onClick={[Function]}
-            title="Tab item 3"
+                <Tab0
+                  aria-controls="pf-tab-section-1-tab2"
+                  className="pf-c-tabs__button"
+                  eventKey={1}
+                  id="tab2"
+                  onClick={[Function]}
+                  title="Tab item 2"
+                >
+                  <button
+                    aria-controls="pf-tab-section-1-tab2"
+                    className="pf-c-tabs__button"
+                    id="tab2"
+                    onClick={[Function]}
+                  >
+                    Tab item 2
+                  </button>
+                </Tab0>
+              </TabContainer>
+            </ForwardRef>
+          </li>
+          <li
+            className="pf-c-tabs__item"
+            key="2/.2"
           >
-            <Tab0
+            <ForwardRef
               aria-controls="pf-tab-section-2-tab3"
               className="pf-c-tabs__button"
               eventKey={2}
@@ -495,249 +566,294 @@ exports[`should call scrollLeft tabs with scrolls 1`] = `
               onClick={[Function]}
               title="Tab item 3"
             >
-              <button
+              <TabContainer
                 aria-controls="pf-tab-section-2-tab3"
                 className="pf-c-tabs__button"
+                eventKey={2}
+                forwardRef={null}
                 id="tab3"
                 onClick={[Function]}
+                title="Tab item 3"
               >
-                Tab item 3
-              </button>
-            </Tab0>
-          </TabContainer>
-        </ForwardRef>
-      </li>
-    </ul>
-    <button
-      aria-label="Scroll right"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
-    >
-      <AngleRightIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      >
-        <svg
-          aria-hidden={true}
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 256 512"
-          width="1em"
+                <Tab0
+                  aria-controls="pf-tab-section-2-tab3"
+                  className="pf-c-tabs__button"
+                  eventKey={2}
+                  id="tab3"
+                  onClick={[Function]}
+                  title="Tab item 3"
+                >
+                  <button
+                    aria-controls="pf-tab-section-2-tab3"
+                    className="pf-c-tabs__button"
+                    id="tab3"
+                    onClick={[Function]}
+                  >
+                    Tab item 3
+                  </button>
+                </Tab0>
+              </TabContainer>
+            </ForwardRef>
+          </li>
+        </ul>
+        <button
+          aria-label="Scroll right"
+          className="pf-c-tabs__scroll-button"
+          onClick={[Function]}
         >
-          <path
-            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            transform=""
-          />
-        </svg>
-      </AngleRightIcon>
-    </button>
-  </div>
-  <ForwardRef
-    activeKey={0}
-    child={
+          <AngleRightIcon
+            color="currentColor"
+            noVerticalAlign={false}
+            size="sm"
+            title={null}
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style={
+                Object {
+                  "verticalAlign": "-0.125em",
+                }
+              }
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                transform=""
+              />
+            </svg>
+          </AngleRightIcon>
+        </button>
+      </div>
       <ForwardRef
-        eventKey={0}
+        activeKey={0}
+        child={
+          <ForwardRef
+            eventKey={0}
+            id="tab1"
+            title="Tab item 1"
+          >
+            Tab 1 section
+          </ForwardRef>
+        }
         id="tab1"
-        title="Tab item 1"
+        key="0/.0"
       >
-        Tab 1 section
-      </ForwardRef>
-    }
-    id="tab1"
-    key="0/.0"
-  >
-    <TabContent0
-      activeKey={0}
-      child={
-        <ForwardRef
-          eventKey={0}
+        <TabContent0
+          activeKey={0}
+          child={
+            <ForwardRef
+              eventKey={0}
+              id="tab1"
+              title="Tab item 1"
+            >
+              Tab 1 section
+            </ForwardRef>
+          }
           id="tab1"
-          title="Tab item 1"
+          innerRef={null}
         >
-          Tab 1 section
-        </ForwardRef>
-      }
-      id="tab1"
-      innerRef={null}
-    >
-      <section
-        aria-labelledby="pf-tab-0-tab1"
-        className="pf-c-tab-content"
-        hidden={false}
-        id="pf-tab-section-0-tab1"
-        role="tabpanel"
-        tabIndex={0}
-      >
-        Tab 1 section
-      </section>
-    </TabContent0>
-  </ForwardRef>
-  <ForwardRef
-    activeKey={0}
-    child={
+          <section
+            aria-labelledby="pf-tab-0-tab1"
+            className="pf-c-tab-content"
+            hidden={false}
+            id="pf-tab-section-0-tab1"
+            role="tabpanel"
+            tabIndex={0}
+          >
+            Tab 1 section
+          </section>
+        </TabContent0>
+      </ForwardRef>
       <ForwardRef
-        eventKey={1}
+        activeKey={0}
+        child={
+          <ForwardRef
+            eventKey={1}
+            id="tab2"
+            title="Tab item 2"
+          >
+            Tab 2 section
+          </ForwardRef>
+        }
         id="tab2"
-        title="Tab item 2"
+        key="1/.1"
       >
-        Tab 2 section
-      </ForwardRef>
-    }
-    id="tab2"
-    key="1/.1"
-  >
-    <TabContent0
-      activeKey={0}
-      child={
-        <ForwardRef
-          eventKey={1}
+        <TabContent0
+          activeKey={0}
+          child={
+            <ForwardRef
+              eventKey={1}
+              id="tab2"
+              title="Tab item 2"
+            >
+              Tab 2 section
+            </ForwardRef>
+          }
           id="tab2"
-          title="Tab item 2"
+          innerRef={null}
         >
-          Tab 2 section
-        </ForwardRef>
-      }
-      id="tab2"
-      innerRef={null}
-    >
-      <section
-        aria-labelledby="pf-tab-1-tab2"
-        className="pf-c-tab-content"
-        hidden={true}
-        id="pf-tab-section-1-tab2"
-        role="tabpanel"
-        tabIndex={0}
-      >
-        Tab 2 section
-      </section>
-    </TabContent0>
-  </ForwardRef>
-  <ForwardRef
-    activeKey={0}
-    child={
+          <section
+            aria-labelledby="pf-tab-1-tab2"
+            className="pf-c-tab-content"
+            hidden={true}
+            id="pf-tab-section-1-tab2"
+            role="tabpanel"
+            tabIndex={0}
+          >
+            Tab 2 section
+          </section>
+        </TabContent0>
+      </ForwardRef>
       <ForwardRef
-        eventKey={2}
+        activeKey={0}
+        child={
+          <ForwardRef
+            eventKey={2}
+            id="tab3"
+            title="Tab item 3"
+          >
+            Tab 3 section
+          </ForwardRef>
+        }
         id="tab3"
-        title="Tab item 3"
+        key="2/.2"
       >
-        Tab 3 section
-      </ForwardRef>
-    }
-    id="tab3"
-    key="2/.2"
-  >
-    <TabContent0
-      activeKey={0}
-      child={
-        <ForwardRef
-          eventKey={2}
+        <TabContent0
+          activeKey={0}
+          child={
+            <ForwardRef
+              eventKey={2}
+              id="tab3"
+              title="Tab item 3"
+            >
+              Tab 3 section
+            </ForwardRef>
+          }
           id="tab3"
-          title="Tab item 3"
+          innerRef={null}
         >
-          Tab 3 section
-        </ForwardRef>
-      }
-      id="tab3"
-      innerRef={null}
-    >
-      <section
-        aria-labelledby="pf-tab-2-tab3"
-        className="pf-c-tab-content"
-        hidden={true}
-        id="pf-tab-section-2-tab3"
-        role="tabpanel"
-        tabIndex={0}
-      >
-        Tab 3 section
-      </section>
-    </TabContent0>
-  </ForwardRef>
-</Tabs>
+          <section
+            aria-labelledby="pf-tab-2-tab3"
+            className="pf-c-tab-content"
+            hidden={true}
+            id="pf-tab-section-2-tab3"
+            role="tabpanel"
+            tabIndex={0}
+          >
+            Tab 3 section
+          </section>
+        </TabContent0>
+      </ForwardRef>
+    </Tabs>
+  </ComponentWithOuia>
+</Component>
 `;
 
 exports[`should call scrollRight tabs with scrolls 1`] = `
-<Tabs
-  activeKey={0}
-  className=""
+<Component
   id="scrollRight"
   isFilled={true}
-  isSecondary={false}
-  leftScrollAriaLabel="Scroll left"
-  onSelect={[Function]}
-  rightScrollAriaLabel="Scroll right"
-  variant="div"
 >
-  <div
-    className="pf-c-tabs pf-m-fill"
-    onSelect={[Function]}
+  <ComponentWithOuia
+    component={[Function]}
+    componentProps={
+      Object {
+        "children": Array [
+          <ForwardRef
+            eventKey={0}
+            id="tab1"
+            title="Tab item 1"
+          >
+            Tab 1 section
+          </ForwardRef>,
+          <ForwardRef
+            eventKey={1}
+            id="tab2"
+            title="Tab item 2"
+          >
+            Tab 2 section
+          </ForwardRef>,
+          <ForwardRef
+            eventKey={2}
+            id="tab3"
+            title="Tab item 3"
+          >
+            Tab 3 section
+          </ForwardRef>,
+        ],
+        "id": "scrollRight",
+        "isFilled": true,
+      }
+    }
+    consumerContext={null}
   >
-    <button
-      aria-label="Scroll left"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
-    >
-      <AngleLeftIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      >
-        <svg
-          aria-hidden={true}
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 256 512"
-          width="1em"
-        >
-          <path
-            d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-            transform=""
-          />
-        </svg>
-      </AngleLeftIcon>
-    </button>
-    <ul
-      className="pf-c-tabs__list"
-      onScroll={[Function]}
+    <Tabs
+      activeKey={0}
+      className=""
+      id="scrollRight"
+      isFilled={true}
+      isSecondary={false}
+      leftScrollAriaLabel="Scroll left"
+      onSelect={[Function]}
+      ouiaContext={
+        Object {
+          "isOuia": false,
+          "ouiaId": null,
+        }
+      }
+      rightScrollAriaLabel="Scroll right"
+      variant="div"
     >
-      <li
-        className="pf-c-tabs__item pf-m-current"
-        key="0/.0"
+      <div
+        className="pf-c-tabs pf-m-fill"
+        onSelect={[Function]}
       >
-        <ForwardRef
-          aria-controls="pf-tab-section-0-tab1"
-          className="pf-c-tabs__button"
-          eventKey={0}
-          id="tab1"
+        <button
+          aria-label="Scroll left"
+          className="pf-c-tabs__scroll-button"
           onClick={[Function]}
-          title="Tab item 1"
         >
-          <TabContainer
-            aria-controls="pf-tab-section-0-tab1"
-            className="pf-c-tabs__button"
-            eventKey={0}
-            forwardRef={null}
-            id="tab1"
-            onClick={[Function]}
-            title="Tab item 1"
+          <AngleLeftIcon
+            color="currentColor"
+            noVerticalAlign={false}
+            size="sm"
+            title={null}
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style={
+                Object {
+                  "verticalAlign": "-0.125em",
+                }
+              }
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+                transform=""
+              />
+            </svg>
+          </AngleLeftIcon>
+        </button>
+        <ul
+          className="pf-c-tabs__list"
+          onScroll={[Function]}
+        >
+          <li
+            className="pf-c-tabs__item pf-m-current"
+            key="0/.0"
           >
-            <Tab0
+            <ForwardRef
               aria-controls="pf-tab-section-0-tab1"
               className="pf-c-tabs__button"
               eventKey={0}
@@ -745,40 +861,40 @@ exports[`should call scrollRight tabs with scrolls 1`] = `
               onClick={[Function]}
               title="Tab item 1"
             >
-              <button
+              <TabContainer
                 aria-controls="pf-tab-section-0-tab1"
                 className="pf-c-tabs__button"
+                eventKey={0}
+                forwardRef={null}
                 id="tab1"
                 onClick={[Function]}
+                title="Tab item 1"
               >
-                Tab item 1
-              </button>
-            </Tab0>
-          </TabContainer>
-        </ForwardRef>
-      </li>
-      <li
-        className="pf-c-tabs__item"
-        key="1/.1"
-      >
-        <ForwardRef
-          aria-controls="pf-tab-section-1-tab2"
-          className="pf-c-tabs__button"
-          eventKey={1}
-          id="tab2"
-          onClick={[Function]}
-          title="Tab item 2"
-        >
-          <TabContainer
-            aria-controls="pf-tab-section-1-tab2"
-            className="pf-c-tabs__button"
-            eventKey={1}
-            forwardRef={null}
-            id="tab2"
-            onClick={[Function]}
-            title="Tab item 2"
+                <Tab0
+                  aria-controls="pf-tab-section-0-tab1"
+                  className="pf-c-tabs__button"
+                  eventKey={0}
+                  id="tab1"
+                  onClick={[Function]}
+                  title="Tab item 1"
+                >
+                  <button
+                    aria-controls="pf-tab-section-0-tab1"
+                    className="pf-c-tabs__button"
+                    id="tab1"
+                    onClick={[Function]}
+                  >
+                    Tab item 1
+                  </button>
+                </Tab0>
+              </TabContainer>
+            </ForwardRef>
+          </li>
+          <li
+            className="pf-c-tabs__item"
+            key="1/.1"
           >
-            <Tab0
+            <ForwardRef
               aria-controls="pf-tab-section-1-tab2"
               className="pf-c-tabs__button"
               eventKey={1}
@@ -786,40 +902,40 @@ exports[`should call scrollRight tabs with scrolls 1`] = `
               onClick={[Function]}
               title="Tab item 2"
             >
-              <button
+              <TabContainer
                 aria-controls="pf-tab-section-1-tab2"
                 className="pf-c-tabs__button"
-                id="tab2"
-                onClick={[Function]}
-              >
-                Tab item 2
-              </button>
-            </Tab0>
-          </TabContainer>
-        </ForwardRef>
-      </li>
-      <li
-        className="pf-c-tabs__item"
-        key="2/.2"
-      >
-        <ForwardRef
-          aria-controls="pf-tab-section-2-tab3"
-          className="pf-c-tabs__button"
-          eventKey={2}
-          id="tab3"
-          onClick={[Function]}
-          title="Tab item 3"
-        >
-          <TabContainer
-            aria-controls="pf-tab-section-2-tab3"
-            className="pf-c-tabs__button"
-            eventKey={2}
-            forwardRef={null}
-            id="tab3"
-            onClick={[Function]}
-            title="Tab item 3"
+                eventKey={1}
+                forwardRef={null}
+                id="tab2"
+                onClick={[Function]}
+                title="Tab item 2"
+              >
+                <Tab0
+                  aria-controls="pf-tab-section-1-tab2"
+                  className="pf-c-tabs__button"
+                  eventKey={1}
+                  id="tab2"
+                  onClick={[Function]}
+                  title="Tab item 2"
+                >
+                  <button
+                    aria-controls="pf-tab-section-1-tab2"
+                    className="pf-c-tabs__button"
+                    id="tab2"
+                    onClick={[Function]}
+                  >
+                    Tab item 2
+                  </button>
+                </Tab0>
+              </TabContainer>
+            </ForwardRef>
+          </li>
+          <li
+            className="pf-c-tabs__item"
+            key="2/.2"
           >
-            <Tab0
+            <ForwardRef
               aria-controls="pf-tab-section-2-tab3"
               className="pf-c-tabs__button"
               eventKey={2}
@@ -827,839 +943,868 @@ exports[`should call scrollRight tabs with scrolls 1`] = `
               onClick={[Function]}
               title="Tab item 3"
             >
-              <button
+              <TabContainer
                 aria-controls="pf-tab-section-2-tab3"
                 className="pf-c-tabs__button"
+                eventKey={2}
+                forwardRef={null}
                 id="tab3"
                 onClick={[Function]}
+                title="Tab item 3"
               >
-                Tab item 3
-              </button>
-            </Tab0>
-          </TabContainer>
-        </ForwardRef>
-      </li>
-    </ul>
-    <button
-      aria-label="Scroll right"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
-    >
-      <AngleRightIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      >
-        <svg
-          aria-hidden={true}
-          aria-labelledby={null}
-          fill="currentColor"
-          height="1em"
-          role="img"
-          style={
-            Object {
-              "verticalAlign": "-0.125em",
-            }
-          }
-          viewBox="0 0 256 512"
-          width="1em"
+                <Tab0
+                  aria-controls="pf-tab-section-2-tab3"
+                  className="pf-c-tabs__button"
+                  eventKey={2}
+                  id="tab3"
+                  onClick={[Function]}
+                  title="Tab item 3"
+                >
+                  <button
+                    aria-controls="pf-tab-section-2-tab3"
+                    className="pf-c-tabs__button"
+                    id="tab3"
+                    onClick={[Function]}
+                  >
+                    Tab item 3
+                  </button>
+                </Tab0>
+              </TabContainer>
+            </ForwardRef>
+          </li>
+        </ul>
+        <button
+          aria-label="Scroll right"
+          className="pf-c-tabs__scroll-button"
+          onClick={[Function]}
         >
-          <path
-            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            transform=""
-          />
-        </svg>
-      </AngleRightIcon>
-    </button>
-  </div>
-  <ForwardRef
-    activeKey={0}
-    child={
+          <AngleRightIcon
+            color="currentColor"
+            noVerticalAlign={false}
+            size="sm"
+            title={null}
+          >
+            <svg
+              aria-hidden={true}
+              aria-labelledby={null}
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style={
+                Object {
+                  "verticalAlign": "-0.125em",
+                }
+              }
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                transform=""
+              />
+            </svg>
+          </AngleRightIcon>
+        </button>
+      </div>
       <ForwardRef
-        eventKey={0}
+        activeKey={0}
+        child={
+          <ForwardRef
+            eventKey={0}
+            id="tab1"
+            title="Tab item 1"
+          >
+            Tab 1 section
+          </ForwardRef>
+        }
         id="tab1"
-        title="Tab item 1"
+        key="0/.0"
       >
-        Tab 1 section
-      </ForwardRef>
-    }
-    id="tab1"
-    key="0/.0"
-  >
-    <TabContent0
-      activeKey={0}
-      child={
-        <ForwardRef
-          eventKey={0}
+        <TabContent0
+          activeKey={0}
+          child={
+            <ForwardRef
+              eventKey={0}
+              id="tab1"
+              title="Tab item 1"
+            >
+              Tab 1 section
+            </ForwardRef>
+          }
           id="tab1"
-          title="Tab item 1"
+          innerRef={null}
         >
-          Tab 1 section
-        </ForwardRef>
-      }
-      id="tab1"
-      innerRef={null}
-    >
-      <section
-        aria-labelledby="pf-tab-0-tab1"
-        className="pf-c-tab-content"
-        hidden={false}
-        id="pf-tab-section-0-tab1"
-        role="tabpanel"
-        tabIndex={0}
-      >
-        Tab 1 section
-      </section>
-    </TabContent0>
-  </ForwardRef>
-  <ForwardRef
-    activeKey={0}
-    child={
+          <section
+            aria-labelledby="pf-tab-0-tab1"
+            className="pf-c-tab-content"
+            hidden={false}
+            id="pf-tab-section-0-tab1"
+            role="tabpanel"
+            tabIndex={0}
+          >
+            Tab 1 section
+          </section>
+        </TabContent0>
+      </ForwardRef>
       <ForwardRef
-        eventKey={1}
+        activeKey={0}
+        child={
+          <ForwardRef
+            eventKey={1}
+            id="tab2"
+            title="Tab item 2"
+          >
+            Tab 2 section
+          </ForwardRef>
+        }
         id="tab2"
-        title="Tab item 2"
+        key="1/.1"
       >
-        Tab 2 section
-      </ForwardRef>
-    }
-    id="tab2"
-    key="1/.1"
-  >
-    <TabContent0
-      activeKey={0}
-      child={
-        <ForwardRef
-          eventKey={1}
+        <TabContent0
+          activeKey={0}
+          child={
+            <ForwardRef
+              eventKey={1}
+              id="tab2"
+              title="Tab item 2"
+            >
+              Tab 2 section
+            </ForwardRef>
+          }
           id="tab2"
-          title="Tab item 2"
+          innerRef={null}
         >
-          Tab 2 section
-        </ForwardRef>
-      }
-      id="tab2"
-      innerRef={null}
-    >
-      <section
-        aria-labelledby="pf-tab-1-tab2"
-        className="pf-c-tab-content"
-        hidden={true}
-        id="pf-tab-section-1-tab2"
-        role="tabpanel"
-        tabIndex={0}
-      >
-        Tab 2 section
-      </section>
-    </TabContent0>
-  </ForwardRef>
-  <ForwardRef
-    activeKey={0}
-    child={
+          <section
+            aria-labelledby="pf-tab-1-tab2"
+            className="pf-c-tab-content"
+            hidden={true}
+            id="pf-tab-section-1-tab2"
+            role="tabpanel"
+            tabIndex={0}
+          >
+            Tab 2 section
+          </section>
+        </TabContent0>
+      </ForwardRef>
       <ForwardRef
-        eventKey={2}
+        activeKey={0}
+        child={
+          <ForwardRef
+            eventKey={2}
+            id="tab3"
+            title="Tab item 3"
+          >
+            Tab 3 section
+          </ForwardRef>
+        }
         id="tab3"
-        title="Tab item 3"
+        key="2/.2"
       >
-        Tab 3 section
-      </ForwardRef>
-    }
-    id="tab3"
-    key="2/.2"
-  >
-    <TabContent0
-      activeKey={0}
-      child={
-        <ForwardRef
-          eventKey={2}
+        <TabContent0
+          activeKey={0}
+          child={
+            <ForwardRef
+              eventKey={2}
+              id="tab3"
+              title="Tab item 3"
+            >
+              Tab 3 section
+            </ForwardRef>
+          }
           id="tab3"
-          title="Tab item 3"
+          innerRef={null}
         >
-          Tab 3 section
-        </ForwardRef>
-      }
-      id="tab3"
-      innerRef={null}
-    >
-      <section
-        aria-labelledby="pf-tab-2-tab3"
-        className="pf-c-tab-content"
-        hidden={true}
-        id="pf-tab-section-2-tab3"
-        role="tabpanel"
-        tabIndex={0}
-      >
-        Tab 3 section
-      </section>
-    </TabContent0>
-  </ForwardRef>
-</Tabs>
+          <section
+            aria-labelledby="pf-tab-2-tab3"
+            className="pf-c-tab-content"
+            hidden={true}
+            id="pf-tab-section-2-tab3"
+            role="tabpanel"
+            tabIndex={0}
+          >
+            Tab 3 section
+          </section>
+        </TabContent0>
+      </ForwardRef>
+    </Tabs>
+  </ComponentWithOuia>
+</Component>
 `;
 
 exports[`should render accessible tabs 1`] = `
-<Fragment>
+Array [
   <nav
     aria-label="accessible Tabs example"
-    className="pf-c-tabs"
-    onSelect={[Function]}
+    class="pf-c-tabs"
   >
     <button
       aria-label="Scroll left"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
+      class="pf-c-tabs__scroll-button"
     >
-      <AngleLeftIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      />
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align:-0.125em"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+          transform=""
+        />
+      </svg>
     </button>
     <ul
-      className="pf-c-tabs__list"
-      onScroll={[Function]}
+      class="pf-c-tabs__list"
     >
       <li
-        className="pf-c-tabs__item pf-m-current"
-        key="0/.0"
+        class="pf-c-tabs__item pf-m-current"
       >
-        <ForwardRef
+        <a
           aria-controls="pf-tab-section-0-tab1"
-          className="pf-c-tabs__button"
-          eventKey={0}
+          class="pf-c-tabs__button"
           href="#/items/1"
           id="tab1"
-          onClick={[Function]}
-          title="Tab item 1"
         >
           Tab item 1
-        </ForwardRef>
+        </a>
       </li>
       <li
-        className="pf-c-tabs__item"
-        key="1/.1"
+        class="pf-c-tabs__item"
       >
-        <ForwardRef
+        <a
           aria-controls="pf-tab-section-1-tab2"
-          className="pf-c-tabs__button"
-          eventKey={1}
+          class="pf-c-tabs__button"
           href="#/items/2"
           id="tab2"
-          onClick={[Function]}
-          title="Tab item 2"
         >
           Tab item 2
-        </ForwardRef>
+        </a>
       </li>
       <li
-        className="pf-c-tabs__item"
-        key="2/.2"
+        class="pf-c-tabs__item"
       >
-        <ForwardRef
+        <a
           aria-controls="pf-tab-section-2-tab3"
-          className="pf-c-tabs__button"
-          eventKey={2}
+          class="pf-c-tabs__button"
           href="#/items/3"
           id="tab3"
-          onClick={[Function]}
-          title="Tab item 3"
         >
           Tab item 3
-        </ForwardRef>
+        </a>
       </li>
     </ul>
     <button
       aria-label="Scroll right"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
+      class="pf-c-tabs__scroll-button"
     >
-      <AngleRightIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      />
-    </button>
-  </nav>
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={0}
-        href="#/items/1"
-        id="tab1"
-        title="Tab item 1"
-      >
-        Tab 1 section
-      </ForwardRef>
-    }
-    id="tab1"
-    key="0/.0"
-  />
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={1}
-        href="#/items/2"
-        id="tab2"
-        title="Tab item 2"
-      >
-        Tab 2 section
-      </ForwardRef>
-    }
-    id="tab2"
-    key="1/.1"
-  />
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={2}
-        href="#/items/3"
-        id="tab3"
-        title="Tab item 3"
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align:-0.125em"
+        viewBox="0 0 256 512"
+        width="1em"
       >
-        Tab 3 section
-      </ForwardRef>
-    }
-    id="tab3"
-    key="2/.2"
-  />
-</Fragment>
+        <path
+          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+          transform=""
+        />
+      </svg>
+    </button>
+  </nav>,
+  <section
+    aria-labelledby="pf-tab-0-tab1"
+    class="pf-c-tab-content"
+    id="pf-tab-section-0-tab1"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 1 section
+  </section>,
+  <section
+    aria-labelledby="pf-tab-1-tab2"
+    class="pf-c-tab-content"
+    hidden=""
+    id="pf-tab-section-1-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>,
+  <section
+    aria-labelledby="pf-tab-2-tab3"
+    class="pf-c-tab-content"
+    hidden=""
+    id="pf-tab-section-2-tab3"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 3 section
+  </section>,
+]
 `;
 
 exports[`should render filled tabs 1`] = `
-<Fragment>
+Array [
   <div
-    className="pf-c-tabs pf-m-fill"
-    onSelect={[Function]}
+    class="pf-c-tabs pf-m-fill"
   >
     <button
       aria-label="Scroll left"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
+      class="pf-c-tabs__scroll-button"
     >
-      <AngleLeftIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      />
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align:-0.125em"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+          transform=""
+        />
+      </svg>
     </button>
     <ul
-      className="pf-c-tabs__list"
-      onScroll={[Function]}
+      class="pf-c-tabs__list"
     >
       <li
-        className="pf-c-tabs__item pf-m-current"
-        key="0/.0"
+        class="pf-c-tabs__item pf-m-current"
       >
-        <ForwardRef
+        <button
           aria-controls="pf-tab-section-0-tab1"
-          className="pf-c-tabs__button"
-          eventKey={0}
+          class="pf-c-tabs__button"
           id="tab1"
-          onClick={[Function]}
-          title="Tab item 1"
         >
           Tab item 1
-        </ForwardRef>
+        </button>
       </li>
       <li
-        className="pf-c-tabs__item"
-        key="1/.1"
+        class="pf-c-tabs__item"
       >
-        <ForwardRef
+        <button
           aria-controls="pf-tab-section-1-tab2"
-          className="pf-c-tabs__button"
-          eventKey={1}
+          class="pf-c-tabs__button"
           id="tab2"
-          onClick={[Function]}
-          title="Tab item 2"
         >
           Tab item 2
-        </ForwardRef>
+        </button>
       </li>
       <li
-        className="pf-c-tabs__item"
-        key="2/.2"
+        class="pf-c-tabs__item"
       >
-        <ForwardRef
+        <button
           aria-controls="pf-tab-section-2-tab3"
-          className="pf-c-tabs__button"
-          eventKey={2}
+          class="pf-c-tabs__button"
           id="tab3"
-          onClick={[Function]}
-          title="Tab item 3"
         >
           Tab item 3
-        </ForwardRef>
+        </button>
       </li>
     </ul>
     <button
       aria-label="Scroll right"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
+      class="pf-c-tabs__scroll-button"
     >
-      <AngleRightIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      />
-    </button>
-  </div>
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={0}
-        id="tab1"
-        title="Tab item 1"
-      >
-        Tab 1 section
-      </ForwardRef>
-    }
-    id="tab1"
-    key="0/.0"
-  />
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={1}
-        id="tab2"
-        title="Tab item 2"
-      >
-        Tab 2 section
-      </ForwardRef>
-    }
-    id="tab2"
-    key="1/.1"
-  />
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={2}
-        id="tab3"
-        title="Tab item 3"
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align:-0.125em"
+        viewBox="0 0 256 512"
+        width="1em"
       >
-        Tab 3 section
-      </ForwardRef>
-    }
-    id="tab3"
-    key="2/.2"
-  />
-</Fragment>
+        <path
+          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+          transform=""
+        />
+      </svg>
+    </button>
+  </div>,
+  <section
+    aria-labelledby="pf-tab-0-tab1"
+    class="pf-c-tab-content"
+    id="pf-tab-section-0-tab1"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 1 section
+  </section>,
+  <section
+    aria-labelledby="pf-tab-1-tab2"
+    class="pf-c-tab-content"
+    hidden=""
+    id="pf-tab-section-1-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>,
+  <section
+    aria-labelledby="pf-tab-2-tab3"
+    class="pf-c-tab-content"
+    hidden=""
+    id="pf-tab-section-2-tab3"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 3 section
+  </section>,
+]
 `;
 
 exports[`should render secondary tabs 1`] = `
-<Fragment>
+Array [
   <div
-    className="pf-c-tabs"
-    onSelect={[Function]}
+    class="pf-c-tabs"
   >
     <button
       aria-label="Scroll left"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
+      class="pf-c-tabs__scroll-button"
     >
-      <AngleLeftIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      />
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align:-0.125em"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+          transform=""
+        />
+      </svg>
     </button>
     <ul
-      className="pf-c-tabs__list"
-      onScroll={[Function]}
+      class="pf-c-tabs__list"
     >
       <li
-        className="pf-c-tabs__item pf-m-current"
-        key="0/.0"
+        class="pf-c-tabs__item pf-m-current"
       >
-        <ForwardRef
-          aria-controls="pf-tab-section-0-primaryTabs"
-          className="pf-c-tabs__button"
-          eventKey={0}
-          id="pf-tab-0-primaryTabs"
-          onClick={[Function]}
-          title="Tab item 1"
+        <button
+          aria-controls="pf-tab-section-0-primarieTabs"
+          class="pf-c-tabs__button"
+          id="pf-tab-0-primarieTabs"
         >
           Tab item 1
-        </ForwardRef>
+        </button>
       </li>
       <li
-        className="pf-c-tabs__item"
-        key="1/.1"
+        class="pf-c-tabs__item"
       >
-        <ForwardRef
+        <button
           aria-controls="pf-tab-section-1-tab2"
-          className="pf-c-tabs__button"
-          eventKey={1}
+          class="pf-c-tabs__button"
           id="tab2"
-          onClick={[Function]}
-          title="Tab item 2"
         >
           Tab item 2
-        </ForwardRef>
+        </button>
       </li>
       <li
-        className="pf-c-tabs__item"
-        key="2/.2"
+        class="pf-c-tabs__item"
       >
-        <ForwardRef
+        <button
           aria-controls="pf-tab-section-2-tab3"
-          className="pf-c-tabs__button"
-          eventKey={2}
+          class="pf-c-tabs__button"
           id="tab3"
-          onClick={[Function]}
-          title="Tab item 3"
         >
           Tab item 3
-        </ForwardRef>
+        </button>
       </li>
     </ul>
     <button
       aria-label="Scroll right"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
+      class="pf-c-tabs__scroll-button"
     >
-      <AngleRightIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      />
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align:-0.125em"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+          transform=""
+        />
+      </svg>
     </button>
-  </div>
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={0}
-        title="Tab item 1"
+  </div>,
+  <section
+    aria-labelledby="pf-tab-0-primarieTabs"
+    class="pf-c-tab-content"
+    id="pf-tab-section-0-primarieTabs"
+    role="tabpanel"
+    tabindex="0"
+  >
+    <div
+      class="pf-c-tabs"
+    >
+      <button
+        aria-label="Scroll left"
+        class="pf-c-tabs__scroll-button"
       >
-        <Tabs
-          activeKey={0}
-          className=""
-          id="secondaryTabs"
-          isFilled={false}
-          isSecondary={false}
-          leftScrollAriaLabel="Scroll left"
-          onSelect={[Function]}
-          rightScrollAriaLabel="Scroll right"
-          variant="div"
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align:-0.125em"
+          viewBox="0 0 256 512"
+          width="1em"
         >
-          <ForwardRef
-            eventKey={10}
+          <path
+            d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            transform=""
+          />
+        </svg>
+      </button>
+      <ul
+        class="pf-c-tabs__list"
+      >
+        <li
+          class="pf-c-tabs__item"
+        >
+          <button
+            aria-controls="pf-tab-section-10-secondary tab1"
+            class="pf-c-tabs__button"
             id="secondary tab1"
-            title="Secondary Tab 1"
           >
-            Secondary Tab 1 section
-          </ForwardRef>
-          <ForwardRef
-            eventKey={11}
+            Secondary Tab 1
+          </button>
+        </li>
+        <li
+          class="pf-c-tabs__item"
+        >
+          <button
+            aria-controls="pf-tab-section-11-secondary tab2"
+            class="pf-c-tabs__button"
             id="secondary tab2"
-            title="Secondary Tab 2"
           >
-            Secondary Tab 2 section
-          </ForwardRef>
-          <ForwardRef
-            eventKey={12}
+            Secondary Tab 2
+          </button>
+        </li>
+        <li
+          class="pf-c-tabs__item"
+        >
+          <button
+            aria-controls="pf-tab-section-12-secondary tab3"
+            class="pf-c-tabs__button"
             id="secondary tab3"
-            title="Secondary Tab 3"
           >
-            Secondary Tab 3 section
-          </ForwardRef>
-        </Tabs>
-      </ForwardRef>
-    }
-    id="primaryTabs"
-    key="0/.0"
-  />
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={1}
-        id="tab2"
-        title="Tab item 2"
-      >
-        Tab 2 section
-      </ForwardRef>
-    }
-    id="tab2"
-    key="1/.1"
-  />
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={2}
-        id="tab3"
-        title="Tab item 3"
+            Secondary Tab 3
+          </button>
+        </li>
+      </ul>
+      <button
+        aria-label="Scroll right"
+        class="pf-c-tabs__scroll-button"
       >
-        Tab 3 section
-      </ForwardRef>
-    }
-    id="tab3"
-    key="2/.2"
-  />
-</Fragment>
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align:-0.125em"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            transform=""
+          />
+        </svg>
+      </button>
+    </div>
+    <section
+      aria-labelledby="pf-tab-10-secondary tab1"
+      class="pf-c-tab-content"
+      hidden=""
+      id="pf-tab-section-10-secondary tab1"
+      role="tabpanel"
+      tabindex="0"
+    >
+      Secondary Tab 1 section
+    </section>
+    <section
+      aria-labelledby="pf-tab-11-secondary tab2"
+      class="pf-c-tab-content"
+      hidden=""
+      id="pf-tab-section-11-secondary tab2"
+      role="tabpanel"
+      tabindex="0"
+    >
+      Secondary Tab 2 section
+    </section>
+    <section
+      aria-labelledby="pf-tab-12-secondary tab3"
+      class="pf-c-tab-content"
+      hidden=""
+      id="pf-tab-section-12-secondary tab3"
+      role="tabpanel"
+      tabindex="0"
+    >
+      Secondary Tab 3 section
+    </section>
+  </section>,
+  <section
+    aria-labelledby="pf-tab-1-tab2"
+    class="pf-c-tab-content"
+    hidden=""
+    id="pf-tab-section-1-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>,
+  <section
+    aria-labelledby="pf-tab-2-tab3"
+    class="pf-c-tab-content"
+    hidden=""
+    id="pf-tab-section-2-tab3"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 3 section
+  </section>,
+]
 `;
 
 exports[`should render simple tabs 1`] = `
-<Fragment>
+Array [
   <div
-    className="pf-c-tabs"
-    onSelect={[Function]}
+    class="pf-c-tabs"
   >
     <button
       aria-label="Scroll left"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
+      class="pf-c-tabs__scroll-button"
     >
-      <AngleLeftIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      />
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align:-0.125em"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+          transform=""
+        />
+      </svg>
     </button>
     <ul
-      className="pf-c-tabs__list"
-      onScroll={[Function]}
+      class="pf-c-tabs__list"
     >
       <li
-        className="pf-c-tabs__item pf-m-current"
-        key="0/.0"
+        class="pf-c-tabs__item pf-m-current"
       >
-        <ForwardRef
+        <button
           aria-controls="pf-tab-section-0-tab1"
-          className="pf-c-tabs__button"
-          eventKey={0}
+          class="pf-c-tabs__button"
           id="tab1"
-          onClick={[Function]}
-          title="Tab item 1"
         >
           Tab item 1
-        </ForwardRef>
+        </button>
       </li>
       <li
-        className="pf-c-tabs__item"
-        key="1/.1"
+        class="pf-c-tabs__item"
       >
-        <ForwardRef
+        <button
           aria-controls="pf-tab-section-1-tab2"
-          className="pf-c-tabs__button"
-          eventKey={1}
+          class="pf-c-tabs__button"
           id="tab2"
-          onClick={[Function]}
-          title="Tab item 2"
         >
           Tab item 2
-        </ForwardRef>
+        </button>
       </li>
       <li
-        className="pf-c-tabs__item"
-        key="2/.2"
+        class="pf-c-tabs__item"
       >
-        <ForwardRef
+        <button
           aria-controls="pf-tab-section-2-tab3"
-          className="pf-c-tabs__button"
-          eventKey={2}
+          class="pf-c-tabs__button"
           id="tab3"
-          onClick={[Function]}
-          title="Tab item 3"
         >
           Tab item 3
-        </ForwardRef>
+        </button>
       </li>
     </ul>
     <button
       aria-label="Scroll right"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
+      class="pf-c-tabs__scroll-button"
     >
-      <AngleRightIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      />
-    </button>
-  </div>
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={0}
-        id="tab1"
-        title="Tab item 1"
-      >
-        Tab 1 section
-      </ForwardRef>
-    }
-    id="tab1"
-    key="0/.0"
-  />
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={1}
-        id="tab2"
-        title="Tab item 2"
-      >
-        Tab 2 section
-      </ForwardRef>
-    }
-    id="tab2"
-    key="1/.1"
-  />
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey={2}
-        id="tab3"
-        title="Tab item 3"
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align:-0.125em"
+        viewBox="0 0 256 512"
+        width="1em"
       >
-        Tab 3 section
-      </ForwardRef>
-    }
-    id="tab3"
-    key="2/.2"
-  />
-</Fragment>
+        <path
+          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+          transform=""
+        />
+      </svg>
+    </button>
+  </div>,
+  <section
+    aria-labelledby="pf-tab-0-tab1"
+    class="pf-c-tab-content"
+    id="pf-tab-section-0-tab1"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 1 section
+  </section>,
+  <section
+    aria-labelledby="pf-tab-1-tab2"
+    class="pf-c-tab-content"
+    hidden=""
+    id="pf-tab-section-1-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>,
+  <section
+    aria-labelledby="pf-tab-2-tab3"
+    class="pf-c-tab-content"
+    hidden=""
+    id="pf-tab-section-2-tab3"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 3 section
+  </section>,
+]
 `;
 
 exports[`should render tabs with eventKey Strings 1`] = `
-<Fragment>
+Array [
   <div
-    className="pf-c-tabs"
-    onSelect={[Function]}
+    class="pf-c-tabs"
   >
     <button
       aria-label="Scroll left"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
+      class="pf-c-tabs__scroll-button"
     >
-      <AngleLeftIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      />
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align:-0.125em"
+        viewBox="0 0 256 512"
+        width="1em"
+      >
+        <path
+          d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+          transform=""
+        />
+      </svg>
     </button>
     <ul
-      className="pf-c-tabs__list"
-      onScroll={[Function]}
+      class="pf-c-tabs__list"
     >
       <li
-        className="pf-c-tabs__item"
-        key="0/.0"
+        class="pf-c-tabs__item"
       >
-        <ForwardRef
+        <button
           aria-controls="pf-tab-section-one-tab1"
-          className="pf-c-tabs__button"
-          eventKey="one"
+          class="pf-c-tabs__button"
           id="tab1"
-          onClick={[Function]}
-          title="Tab item 1"
         >
           Tab item 1
-        </ForwardRef>
+        </button>
       </li>
       <li
-        className="pf-c-tabs__item"
-        key="1/.1"
+        class="pf-c-tabs__item"
       >
-        <ForwardRef
+        <button
           aria-controls="pf-tab-section-two-tab2"
-          className="pf-c-tabs__button"
-          eventKey="two"
+          class="pf-c-tabs__button"
           id="tab2"
-          onClick={[Function]}
-          title="Tab item 2"
         >
           Tab item 2
-        </ForwardRef>
+        </button>
       </li>
       <li
-        className="pf-c-tabs__item"
-        key="2/.2"
+        class="pf-c-tabs__item"
       >
-        <ForwardRef
+        <button
           aria-controls="pf-tab-section-three-tab3"
-          className="pf-c-tabs__button"
-          eventKey="three"
+          class="pf-c-tabs__button"
           id="tab3"
-          onClick={[Function]}
-          title="Tab item 3"
         >
           Tab item 3
-        </ForwardRef>
+        </button>
       </li>
     </ul>
     <button
       aria-label="Scroll right"
-      className="pf-c-tabs__scroll-button"
-      onClick={[Function]}
+      class="pf-c-tabs__scroll-button"
     >
-      <AngleRightIcon
-        color="currentColor"
-        noVerticalAlign={false}
-        size="sm"
-        title={null}
-      />
-    </button>
-  </div>
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey="one"
-        id="tab1"
-        title="Tab item 1"
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align:-0.125em"
+        viewBox="0 0 256 512"
+        width="1em"
       >
-        Tab 1 section
-      </ForwardRef>
-    }
-    id="tab1"
-    key="0/.0"
-  />
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey="two"
-        id="tab2"
-        title="Tab item 2"
-      >
-        Tab 2 section
-      </ForwardRef>
-    }
-    id="tab2"
-    key="1/.1"
-  />
-  <ForwardRef
-    activeKey={0}
-    child={
-      <ForwardRef
-        eventKey="three"
-        id="tab3"
-        title="Tab item 3"
-      >
-        Tab 3 section
-      </ForwardRef>
-    }
-    id="tab3"
-    key="2/.2"
-  />
-</Fragment>
+        <path
+          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+          transform=""
+        />
+      </svg>
+    </button>
+  </div>,
+  <section
+    aria-labelledby="pf-tab-one-tab1"
+    class="pf-c-tab-content"
+    hidden=""
+    id="pf-tab-section-one-tab1"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 1 section
+  </section>,
+  <section
+    aria-labelledby="pf-tab-two-tab2"
+    class="pf-c-tab-content"
+    hidden=""
+    id="pf-tab-section-two-tab2"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 2 section
+  </section>,
+  <section
+    aria-labelledby="pf-tab-three-tab3"
+    class="pf-c-tab-content"
+    hidden=""
+    id="pf-tab-section-three-tab3"
+    role="tabpanel"
+    tabindex="0"
+  >
+    Tab 3 section
+  </section>,
+]
 `;