[Tabs] Fix Tabs accessibility issue

UNRELEASED.md

@@ -15,6 +15,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Bug fixes
 
 - Fixed accessibility issue with ChoiceList errors not being correctly connected to the inputs ([#1824](https://github.com/Shopify/polaris-react/pull/1824));
+- Fixed `Tab` `aria-controls` pointing to a non-existent `Panel` `id` ([#1869](https://github.com/Shopify/polaris-react/pull/1869))
 
 ### Documentation
 

src/components/Tabs/Tabs.scss

@@ -116,6 +116,10 @@ $focus-state-box-shadow-color: rgba(92, 106, 196, 0.8);
   }
 }
 
+.Panel-hidden {
+  display: none;
+}
+
 .List {
   list-style: none;
   margin: 0;

src/components/Tabs/Tabs.tsx

@@ -79,14 +79,26 @@ class Tabs extends React.PureComponent<CombinedProps, State> {
     const {tabToFocus, visibleTabs, hiddenTabs, showDisclosure} = this.state;
     const disclosureTabs = hiddenTabs.map((tabIndex) => tabs[tabIndex]);
 
-    const panelMarkup = children ? (
-      <Panel
-        id={tabs[selected].panelID || `${tabs[selected].id}-panel`}
-        tabID={tabs[selected].id}
-      >
-        {children}
-      </Panel>
-    ) : null;
+    const panelMarkup = children
+      ? tabs.map((_tab, index) => {
+          return selected === index ? (
+            <Panel
+              id={tabs[index].panelID || `${tabs[index].id}-panel`}
+              tabID={tabs[index].id}
+              key={tabs[index].id}
+            >
+              {children}
+            </Panel>
+          ) : (
+            <Panel
+              id={tabs[index].panelID || `${tabs[index].id}-panel`}
+              tabID={tabs[index].id}
+              key={tabs[index].id}
+              hidden
+            />
+          );
+        })
+      : null;
 
     const tabsMarkup = visibleTabs
       .sort((tabA, tabB) => tabA - tabB)

src/components/Tabs/components/Panel/Panel.tsx

@@ -1,16 +1,19 @@
 import * as React from 'react';
+import {classNames} from '@shopify/css-utilities';
 import styles from '../../Tabs.scss';
 
 export interface Props {
+  hidden?: boolean;
   id: string;
   tabID: string;
   children?: React.ReactNode;
 }
 
-export default function Panel({id, tabID, children}: Props) {
+export default function Panel({hidden, id, tabID, children}: Props) {
+  const className = classNames(styles.Panel, hidden && styles['Panel-hidden']);
   return (
     <div
-      className={styles.Panel}
+      className={className}
       id={id}
       role="tabpanel"
       aria-labelledby={tabID}

src/components/Tabs/tests/Tabs.test.tsx

@@ -168,15 +168,34 @@ describe('<Tabs />', () => {
     });
   });
 
-  describe('children', () => {
+  describe('panel', () => {
+    it('renders a Panel for each of the Tabs', () => {
+      const content = <p>Tab content</p>;
+      const wrapper = mountWithAppProvider(
+        <Tabs {...mockProps}>{content}</Tabs>,
+      );
+      const panel = wrapper.find(Panel);
+      expect(panel).toHaveLength(2);
+    });
+
+    it('renders a Panel with a hidden prop for the non selected tabs', () => {
+      const content = <p>Tab content</p>;
+      const wrapper = mountWithAppProvider(
+        <Tabs {...mockProps}>{content}</Tabs>,
+      );
+
+      const nonSelectedPanel = wrapper.find(Panel).at(1);
+      expect(nonSelectedPanel.prop('hidden')).toBe(true);
+    });
+
     it('wraps the children in a Panel with matching aria attributes to the tab', () => {
       const content = <p>Tab content</p>;
       const wrapper = mountWithAppProvider(
         <Tabs {...mockProps}>{content}</Tabs>,
       );
 
       const selectedTab = wrapper.find(Tab).at(0);
-      const panel = wrapper.find(Panel);
+      const panel = wrapper.find(Panel).at(0);
       expect(panel.exists()).toBe(true);
       expect(panel.contains(content)).toBe(true);
       expect(panel.prop('id')).toBeTruthy();
@@ -195,7 +214,7 @@ describe('<Tabs />', () => {
         </Tabs>,
       );
 
-      const panel = wrapper.find(Panel);
+      const panel = wrapper.find(Panel).at(0);
       const selectedTab = wrapper.find(Tab).at(0);
       expect(panel.prop('id')).toBe(selectedTab.prop('panelID'));
     });