fix(tabs): replace wrapper nav (#2853)

Author: emyarod

packages/components/src/components/tabs/tabs.hbs

@@ -1,28 +1,32 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
   LICENSE file in the root directory of this source tree.
 -->
 
-<nav data-tabs class="{{@root.prefix}}--tabs" role="navigation">
+<div data-tabs class="{{@root.prefix}}--tabs">
   <div class="{{@root.prefix}}--tabs-trigger" tabindex="0">
     <a href="javascript:void(0)" class="{{@root.prefix}}--tabs-trigger-text" tabindex="-1"></a>
     {{ carbon-icon 'ChevronDownGlyph' }}
   </div>
   <ul class="{{@root.prefix}}--tabs__nav {{@root.prefix}}--tabs__nav--hidden" role="tablist">
     {{#each items}}
-      <li class="{{@root.prefix}}--tabs__nav-item{{#if selected}} {{@root.prefix}}--tabs__nav-item--selected{{/if}} {{#if disabled}} {{@root.prefix}}--tabs__nav-item--disabled {{/if}}" data-target=".{{panelClass}}" role="presentation">
-        <a tabindex="0" id="{{linkId}}" class="{{@root.prefix}}--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="{{panelId}}"{{#if selected}} aria-selected="true"{{/if}}>{{label}}</a>
-      </li>
+    <li
+      class="{{@root.prefix}}--tabs__nav-item{{#if selected}} {{@root.prefix}}--tabs__nav-item--selected{{/if}} {{#if disabled}} {{@root.prefix}}--tabs__nav-item--disabled {{/if}}"
+      data-target=".{{panelClass}}" role="presentation">
+      <a tabindex="0" id="{{linkId}}" class="{{@root.prefix}}--tabs__nav-link" href="javascript:void(0)" role="tab"
+        aria-controls="{{panelId}}" {{#if selected}} aria-selected="true" {{/if}}>{{label}}</a>
+    </li>
     {{/each}}
   </ul>
-</nav>
+</div>
 <!-- The markup below is for demonstration purposes only -->
 <div>
   {{#each items}}
-    <div id="{{panelId}}" class="{{panelClass}}" role="tabpanel" aria-labelledby="{{linkId}}" aria-hidden="{{not selected}}"{{#if (not selected)}} hidden{{/if}}>
-      <p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">{{panelContent}}</p>
-    </div>
+  <div id="{{panelId}}" class="{{panelClass}}" role="tabpanel" aria-labelledby="{{linkId}}"
+    aria-hidden="{{not selected}}" {{#if (not selected)}} hidden{{/if}}>
+    <p style="padding: 0 1rem; font-size: 14px; font-weight: 600;">{{panelContent}}</p>
+  </div>
   {{/each}}
 </div>

packages/react/src/components/Tabs/Tabs.Skeleton.js

@@ -18,7 +18,7 @@ export default class TabsSkeleton extends React.Component {
       </li>
     );
     return (
-      <nav className={`${prefix}--tabs ${prefix}--skeleton`}>
+      <div className={`${prefix}--tabs ${prefix}--skeleton`}>
         <div className={`${prefix}--tabs-trigger`}>
           <div className={`${prefix}--tabs-trigger-text`}>&nbsp;</div>
           <svg width="10" height="5" viewBox="0 0 10 5" fillRule="evenodd">
@@ -34,7 +34,7 @@ export default class TabsSkeleton extends React.Component {
           {tab}
           {tab}
         </ul>
-      </nav>
+      </div>
     );
   }
 }