Fix the test and examples page

Author: owenniblock

examples/index.html

@@ -67,27 +67,6 @@ <h2>Horizontal (custom tablist and tablist-wrapper)</h2>
       </div>
     </tab-container>
 
-    <h2>Horizontal (custom tablist and tablist-tab-wrapper)</h2>
-
-    <tab-container>
-      <div slot="tablist-tab-wrapper">
-        <div role="tablist" aria-label="Horizontal Tabs Example">
-          <button type="button" id="tab-one" role="tab">Tab one</button>
-          <button type="button" id="tab-two" role="tab">Tab two</button>
-          <button type="button" id="tab-three" role="tab">Tab three</button>
-        </div>
-      </div>
-      <div role="tabpanel" aria-labelledby="tab-one">
-        Panel 1
-      </div>
-      <div role="tabpanel" aria-labelledby="tab-two" hidden>
-        Panel 2
-      </div>
-      <div role="tabpanel" aria-labelledby="tab-three" hidden>
-        Panel 3
-      </div>
-    </tab-container>
-
     <h2>Vertical (shadow tablist)</h2>
 
     <tab-container>
@@ -144,7 +123,7 @@ <h2>Set initially selected tab</h2>
 
     <h2>Set default tab</h2>
 
-    <tab-container default-tab-index="1">
+    <tab-container default-tab="1">
       <button type="button" id="tab-one" role="tab">Tab one</button>
       <button type="button" id="tab-two" role="tab">Tab two</button>
       <button type="button" id="tab-three" role="tab">Tab three</button>

test/test.js

@@ -719,54 +719,4 @@ describe('tab-container', function () {
       assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
     })
   })
-
-  describe('with custom tablist-tab-wrapper', function () {
-    beforeEach(function () {
-      document.body.innerHTML = `
-      <tab-container>
-        <div slot="tablist-tab-wrapper">
-          <div role="tablist">
-            <button type="button" role="tab">Tab one</button>
-            <button type="button" role="tab" aria-selected="true">Tab two</button>
-            <button type="button" role="tab">Tab three</button>
-          </div>
-        </div>
-        <div role="tabpanel" hidden>
-          Panel 1
-        </div>
-        <div role="tabpanel">
-          Panel 2
-        </div>
-        <div role="tabpanel" hidden data-tab-container-no-tabstop>
-          Panel 3
-        </div>
-      </tab-container>
-      `
-      tabs = Array.from(document.querySelectorAll('button'))
-      panels = Array.from(document.querySelectorAll('[role="tabpanel"]'))
-    })
-
-    afterEach(function () {
-      // Check to make sure we still have accessible markup after the test finishes running.
-      expect(document.body).to.be.accessible()
-
-      document.body.innerHTML = ''
-    })
-
-    it('has accessible markup', function () {
-      expect(document.body).to.be.accessible()
-    })
-
-    it('the second tab is still selected', function () {
-      assert.deepStrictEqual(tabs.map(isSelected), [false, true, false], 'Second tab is selected')
-      assert.deepStrictEqual(panels.map(isHidden), [true, false, true], 'Second panel is visible')
-    })
-
-    it('selects the clicked tab', function () {
-      tabs[0].click()
-
-      assert.deepStrictEqual(tabs.map(isSelected), [true, false, false], 'First tab is selected')
-      assert.deepStrictEqual(panels.map(isHidden), [false, true, true], 'First panel is visible')
-    })
-  })
 })