Namespace ids

src/core/client/ui/components/Tabs/Tab.tsx

@@ -54,13 +54,13 @@ class Tab extends React.Component<TabProps> {
     return (
       <li
         className={styles.root}
-        key={`${tabId}-tab`}
-        id={`${tabId}-tab`}
+        key={tabId}
+        id={`tab-${tabId}`}
         role="presentation"
       >
         <BaseButton
           className={buttonClassName}
-          aria-controls={tabId}
+          aria-controls={`tabPane-${tabId}`}
           role="tab"
           aria-selected={active}
           onClick={this.handleTabClick}

src/core/client/ui/components/Tabs/TabPane.tsx

@@ -17,9 +17,9 @@ const TabPane: StatelessComponent<TabBarProps> = props => {
     <section
       className={className}
       key={tabId}
-      id={tabId}
+      id={`tabPane-${tabId}`}
       role="tabpanel"
-      aria-labelledby={`${tabId}-tab`}
+      aria-labelledby={`tab-${tabId}`}
     >
       {children}
     </section>