WIP make dynamic tabs follow ARIA 1.1 practices

js/src/tab.js

@@ -29,33 +29,39 @@ const VERSION = '4.3.1'
 const DATA_KEY = 'bs.tab'
 const EVENT_KEY = `.${DATA_KEY}`
 const DATA_API_KEY = '.data-api'
+const ARROW_LEFT_KEYCODE = 37 // KeyboardEvent.which value for left arrow key
+const ARROW_UP_KEYCODE = 38 // KeyboardEvent.which value for up arrow key
+const ARROW_RIGHT_KEYCODE = 39 // KeyboardEvent.which value for right arrow key
+const ARROW_DOWN_KEYCODE = 40 // KeyboardEvent.which value for down arrow key
 
 const Event = {
   HIDE: `hide${EVENT_KEY}`,
   HIDDEN: `hidden${EVENT_KEY}`,
   SHOW: `show${EVENT_KEY}`,
   SHOWN: `shown${EVENT_KEY}`,
-  CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`
+  CLICK_DATA_API: `click${EVENT_KEY}${DATA_API_KEY}`,
+  KEYDOWN_DATA_API: `keydown${EVENT_KEY}${DATA_API_KEY}`,
+  LOAD_DATA_API: `load${EVENT_KEY}${DATA_API_KEY}`
 }
 
 const ClassName = {
-  DROPDOWN_MENU: 'dropdown-menu',
   ACTIVE: 'active',
   DISABLED: 'disabled',
   FADE: 'fade',
   SHOW: 'show'
 }
 
 const Selector = {
-  DROPDOWN: '.dropdown',
   NAV_LIST_GROUP: '.nav, .list-group',
   ACTIVE: '.active',
   ACTIVE_UL: ':scope > li > .active',
   DATA_TOGGLE: '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
-  DROPDOWN_TOGGLE: '.dropdown-toggle',
-  DROPDOWN_ACTIVE_CHILD: ':scope > .dropdown-menu .active'
+  TABLIST: '[role="tablist"]'
 }
 
+const ORIENTATION_VERTICAL = 'vertical'
+const ORIENTATION_HORIZONTAL = 'horizontal'
+
 /**
  * ------------------------------------------------------------------------
  * Class Definition
@@ -97,6 +103,7 @@ class Tab {
     }
 
     let hideEvent = null
+    this.isTransitioning = true
 
     if (previous) {
       hideEvent = EventHandler.trigger(previous, Event.HIDE, {
@@ -129,6 +136,7 @@ class Tab {
       EventHandler.trigger(this._element, Event.SHOWN, {
         relatedTarget: previous
       })
+      this.isTransitioning = false
     }
 
     if (target) {
@@ -175,20 +183,16 @@ class Tab {
     if (active) {
       active.classList.remove(ClassName.ACTIVE)
 
-      const dropdownChild = SelectorEngine.findOne(Selector.DROPDOWN_ACTIVE_CHILD, active.parentNode)
-
-      if (dropdownChild) {
-        dropdownChild.classList.remove(ClassName.ACTIVE)
-      }
-
       if (active.getAttribute('role') === 'tab') {
         active.setAttribute('aria-selected', false)
+        active.setAttribute('tabindex', '-1')
       }
     }
 
     element.classList.add(ClassName.ACTIVE)
     if (element.getAttribute('role') === 'tab') {
       element.setAttribute('aria-selected', true)
+      element.setAttribute('tabindex', '0')
     }
 
     reflow(element)
@@ -197,17 +201,6 @@ class Tab {
       element.classList.add(ClassName.SHOW)
     }
 
-    if (element.parentNode && element.parentNode.classList.contains(ClassName.DROPDOWN_MENU)) {
-      const dropdownElement = SelectorEngine.closest(element, Selector.DROPDOWN)
-
-      if (dropdownElement) {
-        makeArray(SelectorEngine.find(Selector.DROPDOWN_TOGGLE))
-          .forEach(dropdown => dropdown.classList.add(ClassName.ACTIVE))
-      }
-
-      element.setAttribute('aria-expanded', true)
-    }
-
     if (callback) {
       callback()
     }
@@ -229,6 +222,48 @@ class Tab {
     })
   }
 
+  static _dataApiKeydownHandler(event) {
+    const tablist = SelectorEngine.closest(event.target, Selector.TABLIST)
+    let tabListOrientation = tablist.getAttribute('aria-orientation')
+    if (tabListOrientation !== ORIENTATION_VERTICAL) {
+      tabListOrientation = ORIENTATION_HORIZONTAL
+    }
+
+    if ((tabListOrientation === ORIENTATION_HORIZONTAL && event.which !== ARROW_LEFT_KEYCODE && event.which !== ARROW_RIGHT_KEYCODE) ||
+      (tabListOrientation === ORIENTATION_VERTICAL && event.which !== ARROW_UP_KEYCODE && event.which !== ARROW_DOWN_KEYCODE)) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    if (this.disabled || this.classList.contains(ClassName.DISABLED)) {
+      return
+    }
+
+    const tabs = makeArray(SelectorEngine.find(Selector.DATA_TOGGLE, tablist))
+
+    let index = tabs.indexOf(event.target)
+    const tabInstance = Data.getData(tabs[index], DATA_KEY) || new Tab(tabs[index])
+
+    if (tabInstance.isTransitioning) {
+      return
+    }
+
+    // Left / Up
+    if ((event.which === ARROW_LEFT_KEYCODE || event.which === ARROW_UP_KEYCODE) && index > 0) {
+      index--
+    }
+
+    // Right / Down
+    if ((event.which === ARROW_RIGHT_KEYCODE || event.which === ARROW_DOWN_KEYCODE) && index < tabs.length - 1) {
+      index++
+    }
+
+    tabs[index].focus()
+    tabs[index].click()
+  }
+
   static _getInstance(element) {
     return Data.getData(element, DATA_KEY)
   }
@@ -240,6 +275,31 @@ class Tab {
  * ------------------------------------------------------------------------
  */
 
+EventHandler.on(window, Event.LOAD_DATA_API, () => {
+  makeArray(SelectorEngine.find(Selector.TABLIST))
+    .forEach(tablist => {
+      const tabs = makeArray(SelectorEngine.find(Selector.DATA_TOGGLE, tablist))
+      let selectedTabFound = false
+
+      // iterate over each tab in the tablist, make sure they have correct tabindex/aria-selected
+      tabs.forEach(tab => {
+        if (tab.getAttribute('aria-selected') === 'true' && !selectedTabFound) {
+          tab.setAttribute('tabindex', '0')
+          selectedTabFound = true
+        } else {
+          tab.setAttribute('tabindex', '-1')
+          tab.setAttribute('aria-selected', 'false')
+        }
+      })
+
+      // if none of the tabs were explicitly marked as selected, pick first one
+      if (!selectedTabFound) {
+        tabs[0].setAttribute('tabindex', '0')
+        tabs[0].setAttribute('aria-selected', 'true')
+      }
+    })
+})
+EventHandler.on(document, Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE, Tab._dataApiKeydownHandler)
 EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
   event.preventDefault()