feat(tabs): add key nav prop like button toolbar has (bootstrap-vue#1733

)
emanuelmutschlechner · Apr 15, 2018 · 7aa1a20 · 7aa1a20
1 parent 7feb867
commit 7aa1a20
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/src/components/tabs/README.md b/src/components/tabs/README.md
@@ -295,6 +295,21 @@ export default {
 <!-- with-classes.vue -->
 ```
 
+## Keyboard Navigation
+Enable optional keyboard navigation by setting the prop `key-nav`.
+
+| Keypress | Action
+| -------- | ------
+| <kbd>LEFT</kbd> or <kbd>UP</kbd> | Move to the previous non-disabled tab
+| <kbd>RIGHT</kbd> or <kbd>DOWN</kbd> | Move to the next non-disabled tab
+| <kbd>SHIFT</kbd>+<kbd>LEFT</kbd> or <kbd>SHIFT</kbd>+<kbd>UP</kbd> | Move to the first non-disabled tab
+| <kbd>SHIFT</kbd>+<kbd>RIGHT</kbd> or <kbd>SHIFT</kbd>+<kbd>DOWN</kbd> | Move to the last non-disabled tab
+| <kbd>TAB</kbd> | Move to the next control on the page
+| <kbd>SHIFT</kbd>+<kbd>TAB</kbd> | Move to the previous control on the page
+
+**Caution:** If you have text or text-like inputs in your tabs, leave keyboard navigation off,
+as it is not possble to use key presses to jump out of a text (or test-like) inputs.
+
 
 ## Advanced Examples
 

diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
@@ -15,7 +15,8 @@ const bTabButtonHelper = {
     active: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
     linkClass: { default: null },
-    itemClass: { default: null }
+    itemClass: { default: null },
+    keyNav: { type: Boolean, default: false }
   },
   render (h) {
     const link = h('a', {
@@ -26,7 +27,7 @@ const bTabButtonHelper = {
       ],
       attrs: {
         role: 'tab',
-        tabindex: '-1',
+        tabindex: this.keyNav ? '-1' : null,
         href: this.href,
         id: this.id,
         disabled: this.disabled,
@@ -52,6 +53,9 @@ const bTabButtonHelper = {
         evt.preventDefault()
         evt.stopPropagation()
       }
+      if (evt.type !== 'click' && !this.keyNav) {
+        return
+      }
       if (this.disabled) {
         stop()
         return
@@ -86,7 +90,8 @@ export default {
           posInSet: index + 1,
           controls: this.safeId('_BV_tab_container_'),
           linkClass: tab.titleLinkClass,
-          itemClass: tab.titleItemClass
+          itemClass: tab.titleItemClass,
+          keyNav: this.keyNav
         },
         on: {
           click: evt => {
@@ -116,7 +121,7 @@ export default {
         ],
         attrs: {
           role: 'tablist',
-          tabindex: '0',
+          tabindex: this.keyNav ? '0' : null,
           id: this.safeId('_BV_tab_controls_')
         },
         on: { keydown: this.onKeynav }
@@ -237,6 +242,10 @@ export default {
     navWrapperClass: {
       type: [String, Array, Object],
       default: null
+    },
+    keyNav: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {
@@ -280,6 +289,9 @@ export default {
          * handle keyboard navigation
          */
     onKeynav (evt) {
+      if (!this.keyNav) {
+        return
+      }
       const key = evt.keyCode
       const shift = evt.shiftKey
       function stop () {