Merge pull request #3 from github/event

Update event, docs, and tests (breaking change)

Author: muan

README.md

@@ -33,6 +33,10 @@ import '@github/tab-container-element'
 </tab-container>
 ```
 
+### Events
+
+- `tab-container-change` (bubbles): fired on `<tab-container>` after a new tab is selected and visibility is updated. `event.detail.relatedTarget` is the newly visible tab panel.
+
 ## Browser support
 
 Browsers without native [custom element support][support] require a [polyfill][].

examples/index.html

@@ -23,7 +23,7 @@
     </div>
   </tab-container>
 
-  <!-- script src="../dist/index.umd.js"></script -->
+  <!-- <script src="../dist/index.umd.js"></script> -->
   <script src="https://unpkg.com/@github/tab-container-element@latest/dist/index.umd.js"></script>
 </body>
 </html>

index.js

@@ -61,7 +61,12 @@ class TabContainerElement extends HTMLElement {
     tab.focus()
     panel.hidden = false
 
-    panel.dispatchEvent(new CustomEvent('tabcontainer:tabchange'))
+    this.dispatchEvent(
+      new CustomEvent('tab-container-change', {
+        bubbles: true,
+        detail: {relatedTarget: panel}
+      })
+    )
   }
 }
 

test/test.js

@@ -13,16 +13,73 @@ describe('tab-container', function() {
 
   describe('after tree insertion', function() {
     beforeEach(function() {
-      document.body.innerHTML = '<tab-container>Tabs go here</tab-container>'
+      document.body.innerHTML = `
+      <tab-container>
+        <div role="tablist">
+          <button type="button" role="tab" aria-selected="true">Tab one</button>
+          <button type="button" role="tab">Tab two</button>
+          <button type="button" role="tab">Tab three</button>
+        </div>
+        <div role="tabpanel">
+          Panel 1
+        </div>
+        <div role="tabpanel" hidden>
+          Panel 2
+        </div>
+        <div role="tabpanel" hidden>
+          Panel 3
+        </div>
+      </tab-container>
+      `
     })
 
     afterEach(function() {
       document.body.innerHTML = ''
     })
 
-    it('initiates', function() {
-      const ce = document.querySelector('tab-container')
-      assert.equal(ce.textContent, 'Tabs go here')
+    it('click works and event is dispatched', function() {
+      const tabContainer = document.querySelector('tab-container')
+      const tabs = document.querySelectorAll('button')
+      const panels = document.querySelectorAll('[role="tabpanel"]')
+      let counter = 0
+      tabContainer.addEventListener('tab-container-change', event => {
+        counter++
+        assert.equal(event.detail.relatedTarget, panels[1])
+      })
+
+      tabs[1].click()
+      assert(panels[0].hidden)
+      assert(!panels[1].hidden)
+      assert.equal(counter, 1)
+      assert.equal(document.activeElement, tabs[1])
+    })
+
+    it('keyboard shortcuts work and events are dispatched', function() {
+      const tabContainer = document.querySelector('tab-container')
+      const tabs = document.querySelectorAll('button')
+      const panels = document.querySelectorAll('[role="tabpanel"]')
+      let counter = 0
+      tabContainer.addEventListener('tab-container-change', () => counter++)
+
+      tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowLeft', bubbles: true}))
+      assert(panels[0].hidden)
+      assert(!panels[2].hidden)
+      assert.equal(document.activeElement, tabs[2])
+
+      tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'Home', bubbles: true}))
+      assert(!panels[0].hidden)
+      assert(panels[2].hidden)
+      assert.equal(document.activeElement, tabs[0])
+      assert.equal(counter, 2)
+    })
+
+    it('selectTab(index) works', function() {
+      const tabContainer = document.querySelector('tab-container')
+      const panels = document.querySelectorAll('[role="tabpanel"]')
+
+      tabContainer.selectTab(2)
+      assert(panels[0].hidden)
+      assert(!panels[2].hidden)
     })
   })
 })