fix(tab): tabpanel is tabbable when content has no tabbable content

packages/react/src/components/TabContent/TabContent-test.js

@@ -7,29 +7,54 @@
 
 import React from 'react';
 import TabContent from '../TabContent';
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 describe('TabContent', () => {
   describe('renders as expected', () => {
-    const wrapper = shallow(
-      <TabContent>
-        <div className="child">content</div>
-        <div className="child">content</div>
-      </TabContent>
-    );
-
     it('renders children as expected', () => {
-      expect(wrapper.props().children.length).toEqual(2);
+      render(
+        <TabContent selected>
+          <div className="child">content</div>
+          <div className="child">content</div>
+        </TabContent>
+      );
+      expect(screen.getByRole('tabpanel').children.length).toEqual(2);
     });
 
-    it('sets selected if passed in via props', () => {
-      wrapper.setProps({ selected: true });
-      expect(wrapper.props().selected).toEqual(true);
+    it('sets selected and hidden props with opposite boolean values', () => {
+      const { rerender } = render(
+        <TabContent>
+          <div className="child">content</div>
+          <div className="child">content</div>
+        </TabContent>
+      );
+      expect(screen.queryByRole('tabpanel')).not.toBeInTheDocument();
+      rerender(
+        <TabContent selected>
+          <div className="child">content</div>
+          <div className="child">content</div>
+        </TabContent>
+      );
+      expect(screen.getByRole('tabpanel')).toBeVisible();
     });
 
-    it('sets selected and hidden props with opposite boolean values', () => {
-      wrapper.setProps({ selected: true });
-      expect(wrapper.props().hidden).toEqual(false);
+    it('includes the content container in the tabbable index when no tabble contents is provided', () => {
+      render(
+        <TabContent selected>
+          <p>content</p>
+        </TabContent>
+      );
+      expect(screen.getByRole('tabpanel')).toHaveAttribute('tabindex', '0');
+    });
+
+    it('does not include the content container in the tabbable index when tabble contents is provided', () => {
+      render(
+        <TabContent selected>
+          <a href="https://www.ibm.com/">content</a>
+        </TabContent>
+      );
+      expect(screen.getByRole('tabpanel')).not.toHaveAttribute('tabindex', '0');
     });
   });
 });

packages/react/src/components/TabContent/TabContent.js

@@ -6,24 +6,45 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
+import { selectorTabbable } from '../../internal/keyboard/navigation';
+import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
 
 const { prefix } = settings;
 
+/**
+ * Determine if the node within the provided ref contains content that is tabbable.
+ */
+function useTabbableContent(ref) {
+  const [hasTabbableContent, setHasTabbableContent] = useState(false);
+
+  useIsomorphicEffect(() => {
+    if (ref.current) {
+      setHasTabbableContent(ref.current.querySelector(selectorTabbable));
+    }
+  });
+
+  return hasTabbableContent;
+}
+
 const TabContent = (props) => {
   const { className, selected, children, ...other } = props;
   const tabContentClasses = classNames(`${prefix}--tab-content`, {
     [className]: className,
   });
+  const ref = useRef(null);
+  const hasTabbableContent = useTabbableContent(ref);
   return (
     <div
       role="tabpanel"
       {...other}
       className={tabContentClasses}
       selected={selected}
-      hidden={!selected}>
+      hidden={!selected}
+      ref={ref}
+      tabIndex={hasTabbableContent ? undefined : 0}>
       {children}
     </div>
   );

packages/react/src/components/Tabs/Tabs-story.js

@@ -18,6 +18,7 @@ import { settings } from 'carbon-components';
 import classNames from 'classnames';
 import './Tabs-story.scss';
 import CodeSnippet from '../CodeSnippet';
+import Button from '../Button';
 import Tabs from '../Tabs';
 import Tab from '../Tab';
 import TabsSkeleton from '../Tabs/Tabs.Skeleton';
@@ -128,6 +129,7 @@ export const _Default = () => (
     </Tab>
     <Tab label="Tab label 2">
       <p>Content for second tab goes here.</p>
+      <Button>With a button</Button>
     </Tab>
     <Tab label="Tab label 3" disabled>
       <p>Content for third tab goes here.</p>

packages/react/src/internal/useIsomorphicEffect.js

@@ -0,0 +1,7 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+// useLayoutEffect on the client, useEffect on the server
+const useIsomorphicEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+
+export default useIsomorphicEffect;