Merge pull request #1 from mattzollinhofer/a11y-improvements

Various Improvements

Author: mattzollinhofer

src/components/VueBootstrapTypeahead.vue

@@ -16,6 +16,9 @@
         @focus="isFocused = true"
         @blur="handleBlur"
         @input="handleInput($event.target.value)"
+        @keyup.down="$emit('keyup.down', $event.target.value)"
+        @keyup.up="$emit('keyup.up', $event.target.value)"
+        @keyup.enter="$emit('keyup.enter', $event.target.value)"
         autocomplete="off"
       />
       <div v-if="$slots.append || append" class="input-group-append">
@@ -34,6 +37,8 @@
       :text-variant="textVariant"
       :maxMatches="maxMatches"
       :minMatchingChars="minMatchingChars"
+      :showOnFocus="showOnFocus"
+      :showAllResults="showAllResults"
       @hit="handleHit"
     >
       <!-- pass down all scoped slots -->
@@ -92,6 +97,14 @@ export default {
       type: Number,
       default: 2
     },
+    showOnFocus: {
+      type: Boolean,
+      default: false
+    },
+    showAllResults: {
+      type: Boolean,
+      default: false
+    },
     placeholder: String,
     prepend: String,
     append: String
@@ -164,7 +177,7 @@ export default {
   data() {
     return {
       isFocused: false,
-      inputValue: ''
+      inputValue: this.value || ''
     }
   },
 
@@ -178,6 +191,12 @@ export default {
 
   beforeDestroy() {
     this.$_ro.disconnect()
+  },
+
+  watch: {
+    value: function(val) {
+        this.inputValue = val;
+    }
   }
 }
 </script>

src/components/VueBootstrapTypeaheadList.vue

@@ -1,7 +1,8 @@
 <template>
-  <div class="list-group shadow">
+  <div class="list-group shadow" ref="suggestionList">
     <vue-bootstrap-typeahead-list-item
       v-for="(item, id) in matchedItems" :key="id"
+      :active="isListItemActive(id)"
       :data="item.data"
       :html-text="highlight(item.text)"
       :background-variant="backgroundVariant"
@@ -56,12 +57,32 @@ export default {
     minMatchingChars: {
       type: Number,
       default: 2
+    },
+    showOnFocus: {
+      type: Boolean,
+      default: false
+    },
+    showAllResults: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  created() {
+    this.$parent.$on('input', this.resetActiveListItem)
+    this.$parent.$on('keyup.down', this.selectNextListItem)
+    this.$parent.$on('keyup.up', this.selectPreviousListItem)
+    this.$parent.$on('keyup.enter', this.hitActiveListItem)
+  },
+  data() {
+    return {
+      activeListItem: -1
     }
   },
 
   computed: {
     highlight() {
-      return (text) => {
+      return text => {
         text = sanitize(text)
         if (this.query.length === 0) {
           return text
@@ -77,11 +98,11 @@ export default {
     },
 
     matchedItems() {
-      if (this.query.length === 0 || this.query.length < this.minMatchingChars) {
+      if (!this.showOnFocus && (this.query.length === 0 || this.query.length < this.minMatchingChars)) {
         return []
       }
 
-      const re = new RegExp(this.escapedQuery, 'gi')
+      const re = new RegExp(this.showAllResults ? "" : this.escapedQuery, 'gi')
 
       // Filter, sort, and concat
       return this.data
@@ -101,6 +122,49 @@ export default {
     handleHit(item, evt) {
       this.$emit('hit', item)
       evt.preventDefault()
+    },
+    hitActiveListItem() {
+      if (this.activeListItem >= 0) {
+        this.$emit('hit', this.matchedItems[this.activeListItem])
+      }
+    },
+    isListItemActive(id) {
+      return this.activeListItem === id
+    },
+    resetActiveListItem() {
+      this.activeListItem = -1
+    },
+    selectNextListItem() {
+      if (this.activeListItem < this.matchedItems.length - 1) {
+        this.activeListItem++
+      } else {
+        this.activeListItem = -1
+      }
+    },
+    selectPreviousListItem() {
+      if (this.activeListItem < 0) {
+        this.activeListItem = this.matchedItems.length - 1
+      } else {
+        this.activeListItem--
+      }
+    }
+  },
+  watch: {
+    activeListItem(newValue, oldValue) {
+      if (newValue >= 0) {
+        const scrollContainer = this.$refs.suggestionList
+        const listItem = scrollContainer.children[this.activeListItem]
+        const scrollContainerlHeight = scrollContainer.clientHeight
+        const listItemHeight = listItem.clientHeight
+        const visibleItems = Math.floor(
+          scrollContainerlHeight / (listItemHeight + 20)
+        )
+        if (newValue >= visibleItems) {
+          scrollContainer.scrollTop = listItemHeight * this.activeListItem
+        } else {
+          scrollContainer.scrollTop = 0
+        }
+      }
     }
   }
 }

src/components/VueBootstrapTypeaheadListItem.vue

@@ -3,8 +3,6 @@
     tabindex="0"
     href="#"
     :class="textClasses"
-    @mouseover="active = true"
-    @mouseout="active = false"
   >
     <slot name="suggestion" v-bind="{ data: data, htmlText: htmlText }">
       <span v-html="htmlText"></span>
@@ -16,7 +14,10 @@
 export default {
   name: 'VueBootstrapTypeaheadListItem',
 
-  props: {
+    props: {
+    active: {
+      type: Boolean
+    },
     data: {},
     htmlText: {
       type: String
@@ -29,19 +30,13 @@ export default {
     }
   },
 
-  data() {
-    return {
-      active: false
-    }
-  },
-
   computed: {
     textClasses() {
-      let classes = ''
-      classes += this.active ? 'active' : ''
-      classes += this.backgroundVariant ? ` bg-${this.backgroundVariant}` : ''
-      classes += this.textVariant ? ` text-${this.textVariant}` : ''
-      return `vbst-item list-group-item list-group-item-action ${classes}`
+      const classes = ['vbst-item', 'list-group-item', 'list-group-item-action']
+      if (this.active) classes.push('active')
+      if (this.backgroundVariant) classes.push(`bg-${this.backgroundVariant}`)
+      if (this.textVariant) classes.push(`text-${this.textVariant}`)
+      return classes.join(' ')
     }
   }
 }