fix(VMenu/Selects): properly configure a11y

packages/vuetify/src/components/VAutocomplete/VAutocomplete.ts

@@ -55,7 +55,6 @@ export default VSelect.extend({
 
   data () {
     return {
-      attrsInput: null,
       lazySearch: this.searchInput,
     }
   },
@@ -198,7 +197,11 @@ export default VSelect.extend({
   },
 
   methods: {
-    onFilteredItemsChanged (val: never[]) {
+    onFilteredItemsChanged (val: never[], oldVal: never[]) {
+      // TODO: How is the watcher triggered
+      // for duplicate items? no idea
+      if (val === oldVal) return
+
       this.$nextTick(() => {
         this.setMenuIndex(val.length > 0 && (val.length === 1 || this.autoSelectFirst) ? 0 : -1)
       })
@@ -275,12 +278,17 @@ export default VSelect.extend({
       input.data = input.data || {}
       input.data.attrs = input.data.attrs || {}
       input.data.domProps = input.data.domProps || {}
-
-      input.data.attrs.role = 'combobox'
       input.data.domProps.value = this.internalSearch
 
       return input
     },
+    genInputSlot () {
+      const slot = VSelect.options.methods.genInputSlot.call(this)
+
+      slot.data!.attrs!.role = 'combobox'
+
+      return slot
+    },
     genSelections () {
       return this.hasSlot || this.multiple
         ? VSelect.options.methods.genSelections.call(this)
@@ -295,11 +303,6 @@ export default VSelect.extend({
 
       this.activateMenu()
     },
-    onEnterDown () {
-      // Avoid invoking this method
-      // will cause updateSelf to
-      // be called emptying search
-    },
     onInput (e: Event) {
       if (
         this.selectedIndex > -1 ||
@@ -310,10 +313,7 @@ export default VSelect.extend({
       const value = target.value
 
       // If typing and menu is not currently active
-      if (target.value) {
-        this.activateMenu()
-        if (!this.isAnyValueAllowed) this.setMenuIndex(0)
-      }
+      if (target.value) this.activateMenu()
 
       this.internalSearch = value
       this.badInput = target.validity && target.validity.badInput
@@ -333,6 +333,12 @@ export default VSelect.extend({
       VSelect.options.methods.onTabDown.call(this, e)
       this.updateSelf()
     },
+    onUpDown () {
+      // For autocomplete / combobox, cycling
+      // interfers with native up/down behavior
+      // instead activate the menu
+      this.activateMenu()
+    },
     setSelectedItems () {
       VSelect.options.methods.setSelectedItems.call(this)
 

packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.ts

@@ -162,7 +162,7 @@ describe('VAutocomplete.ts', () => {
 
     expect(wrapper.vm.$el.getAttribute('role')).toBeFalsy()
 
-    const input = wrapper.find('input')
+    const input = wrapper.find('.v-input__slot')
     expect(input.element.getAttribute('role')).toBe('combobox')
   })
 

packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete2.spec.ts

@@ -431,16 +431,14 @@ describe('VAutocomplete.ts', () => {
   })
 
   it('should not replicate html select hotkeys in v-autocomplete', async () => {
-    // const wrapper = mountFunction()
+    const onKeyPress = jest.fn()
     const wrapper = mountFunction({
       propsData: {
         items: ['aaa', 'foo', 'faa'],
       },
+      methods: { onKeyPress },
     })
 
-    const onKeyPress = jest.fn()
-    wrapper.setMethods({ onKeyPress })
-
     const input = wrapper.find('input')
     input.trigger('focus')
     await wrapper.vm.$nextTick()

packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete3.spec.ts

@@ -0,0 +1,42 @@
+// Components
+import VAutocomplete from '../VAutocomplete'
+
+// Utilities
+import {
+  mount,
+  Wrapper,
+  MountOptions,
+} from '@vue/test-utils'
+
+describe('VAutocomplete.ts', () => {
+  type Instance = InstanceType<typeof VAutocomplete>
+  let mountFunction: (options?: MountOptions<Instance>) => Wrapper<Instance>
+
+  beforeEach(() => {
+    document.body.setAttribute('data-app', 'true')
+
+    mountFunction = (options = {}) => {
+      return mount(VAutocomplete, {
+        ...options,
+        mocks: {
+          $vuetify: {
+            lang: {
+              t: (val: string) => val,
+            },
+            theme: {
+              dark: false,
+            },
+          },
+        },
+      })
+    }
+  })
+
+  it('should have the correct role', async () => {
+    const wrapper = mountFunction()
+
+    const inputSlot = wrapper.find('.v-input__slot')
+
+    expect(inputSlot.element.getAttribute('role')).toBe('combobox')
+  })
+})

packages/vuetify/src/components/VBtn/VBtn.ts

@@ -186,7 +186,7 @@ export default baseMixins.extend<options>().extend({
     const { tag, data } = this.generateRouteLink()
 
     if (tag === 'button') data.attrs!.type = this.type
-
+    if (this.disabled) data.attrs!.disabled = true
     data.attrs!.value = ['string', 'number'].includes(typeof this.value)
       ? this.value
       : JSON.stringify(this.value)

packages/vuetify/src/components/VCheckbox/VSimpleCheckbox.sass

@@ -4,6 +4,7 @@
 // Block
 .v-simple-checkbox
   align-self: center
+  line-height: normal
   position: relative
   user-select: none
   cursor: pointer

packages/vuetify/src/components/VCheckbox/VSimpleCheckbox.ts

@@ -61,7 +61,7 @@ export default Vue.extend({
     if (props.indeterminate) icon = props.indeterminateIcon
     else if (props.value) icon = props.onIcon
 
-    children.push(h(VIcon, Colorable.options.methods.setTextColor(props.color, {
+    children.push(h(VIcon, Colorable.options.methods.setTextColor(props.value && props.color, {
       props: {
         disabled: props.disabled,
         dark: props.dark,

packages/vuetify/src/components/VColorPicker/__tests__/__snapshots__/VColorPickerEdit.spec.ts.snap

@@ -292,8 +292,8 @@ exports[`VColorPickerEdit.ts should render with disabled 1`] = `
       A
     </span>
   </div>
-  <button disabled="disabled"
-          type="button"
+  <button type="button"
+          disabled="disabled"
           class="v-btn v-btn--disabled v-btn--fab v-btn--flat v-btn--icon v-btn--round theme--light v-size--small"
   >
     <span class="v-btn__content">

packages/vuetify/src/components/VCombobox/VCombobox.ts

@@ -51,7 +51,6 @@ export default VAutocomplete.extend({
   },
 
   methods: {
-    onFilteredItemsChanged: () => {},
     onInternalSearchChanged (val: any) {
       if (
         val &&
@@ -94,13 +93,15 @@ export default VAutocomplete.extend({
     onEnterDown (e: Event) {
       e.preventDefault()
 
-      VSelect.options.methods.onEnterDown.call(this, e)
-
       // If has menu index, let v-select-list handle
       if (this.getMenuIndex() > -1) return
 
       this.updateSelf()
     },
+    onFilteredItemsChanged () {
+      // noop - should not auto select so user can enter custom
+      // words that may loosely match items in the list
+    },
     onKeyDown (e: KeyboardEvent) {
       const keyCode = e.keyCode
 
@@ -113,6 +114,8 @@ export default VAutocomplete.extend({
         this.$refs.input.selectionStart === 0
       ) {
         this.updateSelf()
+      } else if (keyCode === keyCodes.enter) {
+        this.onEnterDown(e)
       }
 
       // The ordering is important here

packages/vuetify/src/components/VCombobox/__tests__/VCombobox-multiple.spec.ts

@@ -109,23 +109,24 @@ describe('VCombobox.ts', () => {
 
     const input = wrapper.find('input')
     const element = input.element as HTMLInputElement
-    const menu = wrapper.find('.v-menu')
 
     input.trigger('focus')
     element.value = 'b'
     input.trigger('input')
-    menu.trigger('keydown.down')
+    // First down opens the menu
+    input.trigger('keydown.down')
 
     // Give DOM time to update
     // list tile classes
     await wrapper.vm.$nextTick()
 
     expect(wrapper.vm.isMenuActive).toBe(true)
 
+    // Second down moves the index
+    input.trigger('keydown.down')
     input.trigger('keydown.tab')
 
     expect(change).toHaveBeenCalledWith(['bar'])
-    expect(wrapper.vm.getMenuIndex()).toBe(0)
   })
 
   it('should add a tag on tab using the current searchValue', async () => {
@@ -134,15 +135,18 @@ describe('VCombobox.ts', () => {
     })
 
     const input = wrapper.find('input')
+    const element = input.element as HTMLInputElement
 
     input.trigger('focus')
+    element.value = 'ba'
+    input.trigger('input')
 
-    wrapper.setProps({ searchInput: 'ba' })
     input.trigger('keydown.tab')
     await wrapper.vm.$nextTick()
     expect(change).toHaveBeenCalledWith(['ba'])
 
-    wrapper.setProps({ searchInput: 'it' })
+    element.value = 'it'
+    input.trigger('input')
     input.trigger('keydown.tab')
     await wrapper.vm.$nextTick()
     expect(change).toHaveBeenCalledWith(['ba', 'it'])

packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.ts

@@ -246,11 +246,13 @@ describe('VCombobox.ts', () => {
   })
 
   // https://github.com/vuetifyjs/vuetify/issues/5008
-  it.skip('should select item if menu index is greater than -1', async () => {
+  it('should select item if menu index is greater than -1', async () => {
+    const selectItem = jest.fn()
     const wrapper = mountFunction({
       propsData: {
         items: ['foo'],
       },
+      methods: { selectItem },
     })
 
     const input = wrapper.find('input')
@@ -263,6 +265,6 @@ describe('VCombobox.ts', () => {
 
     input.trigger('keydown.enter')
 
-    expect(wrapper.vm.internalValue).toBe('foo')
+    expect(selectItem).toHaveBeenCalledWith('foo')
   })
 })