Tabs shift in size when content changes

[jeffredodd]

Description

When changing through tabs, they shift in sidesize.

While on Fundamentals they do not. https://sap.github.io/fundamental/components/tabs.html

Most likely this can be fixed by locating the tab content outside of the Tab's <ul> component.

[chrismanciero]

There are a couple of problems with the Tabs Component implementation.

1. The <li> element for each tab is getting a 'is-selected' class applied when the tab is selected. This should be removed and a value of aria-selected="true" should be added to the selected
2. The <a> elements should have role=tab attribute added
3. The content of the tabs are being inserted into the <li> element (at the same level as the <a>). The implementation on the Fundamental page has the content for the tabs being added after the tab list. (First tab content highlighted in blue)
   
   The content corresponding to the selected tab should have the following attribute set aria-expanded="true"

[bcullman]

The preferred HTML layout for this is seen here (and elsewhere): https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav

<nav>
    <ol>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 1</a></li>
        <li>Text one</li>
    </ol>
</nav>

[chrismanciero]

Why would we want 2 ways to implement a tab list?(https://sap.github.io/fundamental/components/tabs.html)

One implementation is using <ul> and <li> and the other is using <nav> and <span>. Is there a preferred way to implement a tab list?

As a test, if I went with a mix of the approaches (see @bcullman comment ⬆️ ) the tab list loses the bottom padding.

Using <ul> and <li>:

Using <nav>, <ol> and <li>: