Support [aria-orientation="vertical"]

When the `[role="tablist"]` element declares
[`[aria-orientation="vertical"]`][aria-orientation], directional
[keyboard navigation changes][keyboard-interaction] from `ArrowRight`
and `ArrowLeft` to `ArrowDown` and `ArrowUp`:

> When a tab list has its `aria-orientation` set to `vertical`:
> * <kbd>Down Arrow</kbd> performs as <kbd>Right Arrow</kbd> is described above.
> * <kbd>Up Arrow</kbd> performs as <kbd>Left Arrow</kbd> is described above.

[aria-orientation]: https://www.w3.org/TR/wai-aria/#aria-orientation
[keyboard-interaction]: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/#keyboard-interaction-21

Author: seanpdoyle

src/index.ts

@@ -1,9 +1,21 @@
+type IncrementKey = 'ArrowRight' | 'ArrowDown'
+type DecrementKey = 'ArrowUp' | 'ArrowLeft'
+type NavigationDirection = [IncrementKey, DecrementKey]
+
 function getTabs(el: TabContainerElement): HTMLElement[] {
   return Array.from(el.querySelectorAll<HTMLElement>('[role="tablist"] [role="tab"]')).filter(
     tab => tab instanceof HTMLElement && tab.closest(el.tagName) === el
   )
 }
 
+function getNavigationKeys(vertical: boolean): NavigationDirection {
+  if (vertical) {
+    return ['ArrowDown', 'ArrowUp']
+  } else {
+    return ['ArrowRight', 'ArrowLeft']
+  }
+}
+
 export default class TabContainerElement extends HTMLElement {
   constructor() {
     super()
@@ -15,12 +27,15 @@ export default class TabContainerElement extends HTMLElement {
       if (target.getAttribute('role') !== 'tab' && !target.closest('[role="tablist"]')) return
       const tabs = getTabs(this)
       const currentIndex = tabs.indexOf(tabs.find(tab => tab.matches('[aria-selected="true"]'))!)
+      const [incrementKey, decrementKey] = getNavigationKeys(
+        !!target.closest('[role="tablist"][aria-orientation="vertical"]')
+      )
 
-      if (event.code === 'ArrowRight') {
+      if (event.code === incrementKey) {
         let index = currentIndex + 1
         if (index >= tabs.length) index = 0
         selectTab(this, index)
-      } else if (event.code === 'ArrowLeft') {
+      } else if (event.code === decrementKey) {
         let index = currentIndex - 1
         if (index < 0) index = tabs.length - 1
         selectTab(this, index)

test/test.js

@@ -219,4 +219,82 @@ describe('tab-container', function () {
       )
     })
   })
+
+  describe('with [role="tablist"][aria-orientation="vertical"]', function () {
+    beforeEach(function () {
+      // eslint-disable-next-line github/no-inner-html
+      document.body.innerHTML = `
+      <tab-container>
+        <div role="tablist" aria-orientation="vertical">
+          <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 data-tab-container-no-tabstop>
+          Panel 3
+        </div>
+      </tab-container>
+      `
+    })
+
+    it('supports up and down keyboard shortcuts', () => {
+      const tabContainer = document.querySelector('tab-container')
+      const tabs = document.querySelectorAll('button')
+      const panels = document.querySelectorAll('[role="tabpanel"]')
+      let counter = 0
+      tabContainer.addEventListener('tab-container-changed', () => counter++)
+
+      tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowUp', 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)
+
+      tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowDown', bubbles: true}))
+      assert(panels[0].hidden)
+      assert(!panels[1].hidden)
+      assert(panels[2].hidden)
+      assert.equal(document.activeElement, panels[1])
+
+      tabs[1].dispatchEvent(new KeyboardEvent('keydown', {code: 'End', bubbles: true}))
+      assert(panels[0].hidden)
+      assert(panels[1].hidden)
+      assert(!panels[2].hidden)
+      assert.equal(document.activeElement, tabs[2])
+      assert.equal(counter, 2)
+    })
+
+    it('does not supports left and right keyboard shortcuts', () => {
+      const tabContainer = document.querySelector('tab-container')
+      const tabs = document.querySelectorAll('button')
+      const panels = document.querySelectorAll('[role="tabpanel"]')
+      let counter = 0
+      tabContainer.addEventListener('tab-container-changed', () => counter++)
+
+      tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowLeft', bubbles: true}))
+      assert(!panels[0].hidden)
+      assert(panels[1].hidden)
+      assert(panels[2].hidden)
+      assert.equal(document.activeElement, tabs[0])
+      assert.equal(counter, 0)
+
+      tabs[0].dispatchEvent(new KeyboardEvent('keydown', {code: 'ArrowRight', bubbles: true}))
+      assert(!panels[0].hidden)
+      assert(panels[1].hidden)
+      assert(panels[2].hidden)
+      assert.equal(document.activeElement, tabs[0])
+      assert.equal(counter, 0)
+    })
+  })
 })