Merge pull request #9 from github/add-tab-container-will-change-event

Add tab container will change event

Author: koddsson

README.md

@@ -35,7 +35,8 @@ import '@github/tab-container-element'
 
 ### 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.
+- `tab-container-change` (bubbles, cancelable): fired on `<tab-container>` before a new tab is selected and visibility is updated. `event.detail.relatedTarget` is the tab panel that will be selected if the event isn't cancelled.
+- `tab-container-changed` (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
 

index.js

@@ -45,6 +45,18 @@ function selectTab(tabContainer: TabContainerElement, index: number) {
   const tabs = tabContainer.querySelectorAll('[role="tablist"] [role="tab"]')
   const panels = tabContainer.querySelectorAll('[role="tabpanel"]')
 
+  const selectedTab = tabs[index]
+  const selectedPanel = panels[index]
+
+  const cancelled = !tabContainer.dispatchEvent(
+    new CustomEvent('tab-container-change', {
+      bubbles: true,
+      cancelable: true,
+      detail: {relatedTarget: selectedPanel}
+    })
+  )
+  if (cancelled) return
+
   for (const tab of tabs) {
     tab.setAttribute('aria-selected', 'false')
     tab.setAttribute('tabindex', '-1')
@@ -54,18 +66,15 @@ function selectTab(tabContainer: TabContainerElement, index: number) {
     panel.setAttribute('tabindex', '0')
   }
 
-  const tab = tabs[index]
-  const panel = panels[index]
-
-  tab.setAttribute('aria-selected', 'true')
-  tab.removeAttribute('tabindex')
-  tab.focus()
-  panel.hidden = false
+  selectedTab.setAttribute('aria-selected', 'true')
+  selectedTab.removeAttribute('tabindex')
+  selectedTab.focus()
+  selectedPanel.hidden = false
 
   tabContainer.dispatchEvent(
-    new CustomEvent('tab-container-change', {
+    new CustomEvent('tab-container-changed', {
       bubbles: true,
-      detail: {relatedTarget: panel}
+      detail: {relatedTarget: selectedPanel}
     })
   )
 }

test/test.js

@@ -37,12 +37,12 @@ describe('tab-container', function() {
       document.body.innerHTML = ''
     })
 
-    it('click works and event is dispatched', function() {
+    it('click works and `tab-container-changed` 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 => {
+      tabContainer.addEventListener('tab-container-changed', event => {
         counter++
         assert.equal(event.detail.relatedTarget, panels[1])
       })
@@ -54,12 +54,12 @@ describe('tab-container', function() {
       assert.equal(document.activeElement, tabs[1])
     })
 
-    it('keyboard shortcuts work and events are dispatched', function() {
+    it('keyboard shortcuts work and `tab-container-changed` 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++)
+      tabContainer.addEventListener('tab-container-changed', () => counter++)
 
       tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowLeft', bubbles: true}))
       assert(panels[0].hidden)
@@ -72,5 +72,26 @@ describe('tab-container', function() {
       assert.equal(document.activeElement, tabs[0])
       assert.equal(counter, 2)
     })
+
+    it('click works and a cancellable `tab-container-change` 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])
+        event.preventDefault()
+      })
+
+      tabs[1].click()
+
+      // Since we prevented the event, nothing should have changed.
+      assert(!panels[0].hidden)
+      assert(panels[1].hidden)
+
+      // The event listener should have been called.
+      assert.equal(counter, 1)
+    })
   })
 })