vuetify 2.6.16 → 2.7.1

package/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap

@@ -5,7 +5,7 @@ exports[`VFileInput.ts should be unclearable 1`] = `
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <button type="button"
-              aria-label="prepend icon"
+              aria-label=" prepended action"
               class="v-icon notranslate v-icon--link material-icons theme--light"
       >
         $file
@@ -40,7 +40,7 @@ exports[`VFileInput.ts should display file size 1`] = `
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <button type="button"
-              aria-label="prepend icon"
+              aria-label=" prepended action"
               class="v-icon notranslate v-icon--link material-icons theme--light"
       >
         $file
@@ -60,7 +60,7 @@ exports[`VFileInput.ts should display file size 1`] = `
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
-                  aria-label="clear icon"
+                  aria-label="Clear "
                   tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
@@ -87,7 +87,7 @@ exports[`VFileInput.ts should display file size 2`] = `
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <button type="button"
-              aria-label="prepend icon"
+              aria-label=" prepended action"
               class="v-icon notranslate v-icon--link material-icons theme--light"
       >
         $file
@@ -107,7 +107,7 @@ exports[`VFileInput.ts should display file size 2`] = `
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
-                  aria-label="clear icon"
+                  aria-label="Clear "
                   tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
@@ -134,7 +134,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <button type="button"
-              aria-label="prepend icon"
+              aria-label=" prepended action"
               class="v-icon notranslate v-icon--link material-icons theme--light"
       >
         $file
@@ -154,7 +154,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
-                  aria-label="clear icon"
+                  aria-label="Clear "
                   tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
@@ -184,7 +184,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <button type="button"
-              aria-label="prepend icon"
+              aria-label=" prepended action"
               class="v-icon notranslate v-icon--link material-icons theme--light"
       >
         $file
@@ -204,7 +204,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
-                  aria-label="clear icon"
+                  aria-label="Clear "
                   tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
@@ -234,7 +234,7 @@ exports[`VFileInput.ts should render 1`] = `
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <button type="button"
-              aria-label="prepend icon"
+              aria-label=" prepended action"
               class="v-icon notranslate v-icon--link material-icons theme--light"
       >
         $file
@@ -273,7 +273,7 @@ exports[`VFileInput.ts should render chips 1`] = `
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <button type="button"
-              aria-label="prepend icon"
+              aria-label=" prepended action"
               class="v-icon notranslate v-icon--link material-icons theme--light"
       >
         $file
@@ -297,7 +297,7 @@ exports[`VFileInput.ts should render chips 1`] = `
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
-                  aria-label="clear icon"
+                  aria-label="Clear "
                   tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
@@ -324,7 +324,7 @@ exports[`VFileInput.ts should render counter 1`] = `
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <button type="button"
-              aria-label="prepend icon"
+              aria-label=" prepended action"
               class="v-icon notranslate v-icon--link material-icons theme--light"
       >
         $file
@@ -344,7 +344,7 @@ exports[`VFileInput.ts should render counter 1`] = `
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
-                  aria-label="clear icon"
+                  aria-label="Clear "
                   tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
@@ -374,7 +374,7 @@ exports[`VFileInput.ts should render multiple 1`] = `
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <button type="button"
-              aria-label="prepend icon"
+              aria-label=" prepended action"
               class="v-icon notranslate v-icon--link material-icons theme--light"
       >
         $file
@@ -414,7 +414,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <button type="button"
-              aria-label="prepend icon"
+              aria-label=" prepended action"
               class="v-icon notranslate v-icon--link material-icons theme--light"
       >
         $file
@@ -438,7 +438,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
       <div class="v-input__append-inner">
         <div class="v-input__icon v-input__icon--clear">
           <button type="button"
-                  aria-label="clear icon"
+                  aria-label="Clear "
                   tabindex="-1"
                   class="v-icon notranslate v-icon--link material-icons theme--light"
           >
@@ -494,7 +494,7 @@ exports[`VFileInput.ts should set display none if hide-input prop is set 1`] = `
   <div class="v-input__prepend-outer">
     <div class="v-input__icon v-input__icon--prepend">
       <button type="button"
-              aria-label="prepend icon"
+              aria-label=" prepended action"
               class="v-icon notranslate v-icon--link material-icons theme--light"
       >
         $file

package/src/components/VForm/__tests__/VForm.spec.ts

@@ -1,5 +1,5 @@
 // Libraries
-import Vue from 'vue'
+import Vue, { h } from 'vue'
 import Vuetify from '../../../framework'
 
 // Components
@@ -232,4 +232,25 @@ describe('VForm.ts', () => {
 
     expect(disabledInputs).toBe(inputs.length)
   })
+
+  it('disables all inputs but one', async () => {
+    const inputs = {
+      functional: true,
+      render () {
+        return [h(VTextField), h(VTextField, { props: { disabled: false } })]
+      },
+    }
+
+    const wrapper = mountFunction({
+      propsData: { disabled: true },
+      slots: { default: inputs },
+    })
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.inputs).toEqual([
+      expect.objectContaining({ isDisabled: true }),
+      expect.objectContaining({ isDisabled: false }),
+    ])
+  })
 })

package/src/components/VInput/VInput.ts

@@ -177,9 +177,20 @@ export default baseMixins.extend<options>().extend({
       const eventName = `click:${kebabCase(type)}`
       const hasListener = !!(this.listeners$[eventName] || cb)
 
+      const localeKey = {
+        prepend: 'prependAction',
+        prependInner: 'prependAction',
+        append: 'appendAction',
+        appendOuter: 'appendAction',
+        clear: 'clear',
+      }[type]
+      const label = hasListener && localeKey
+        ? this.$vuetify.lang.t(`$vuetify.input.${localeKey}`, this.label ?? '')
+        : undefined
+
       const data = mergeData({
         attrs: {
-          'aria-label': hasListener ? kebabCase(type).split('-')[0] + ' icon' : undefined,
+          'aria-label': label,
           color: this.validationState,
           dark: this.dark,
           disabled: this.isDisabled,

package/src/components/VInput/__tests__/VInput.spec.ts

@@ -13,6 +13,13 @@ describe('VInput.ts', () => {
       return mount(VInput, {
         // https://github.com/vuejs/vue-test-utils/issues/1130
         sync: false,
+        mocks: {
+          $vuetify: {
+            lang: {
+              t: (val: string) => val,
+            },
+          },
+        },
         ...options,
       })
     }

package/src/components/VItemGroup/VItem.sass

@@ -0,0 +1,4 @@
+.v-item--disabled
+  &,
+  & *
+    pointer-events: none

package/src/components/VItemGroup/VItem.ts

@@ -1,3 +1,6 @@
+// Styles
+import './VItem.sass'
+
 // Mixins
 import { factory as GroupableFactory } from '../../mixins/groupable'
 
@@ -16,6 +19,7 @@ export const BaseItem = Vue.extend({
     value: {
       required: false,
     },
+    disabled: Boolean,
   },
 
   data: () => ({
@@ -56,9 +60,16 @@ export const BaseItem = Vue.extend({
     }
 
     element.data = this._b(element.data || {}, element.tag!, {
-      class: { [this.activeClass]: this.isActive },
+      class: {
+        [this.activeClass]: this.isActive,
+        'v-item--disabled': this.disabled,
+      },
     })
 
+    if (this.disabled) {
+      element.data.attrs = { ...element.data.attrs, tabindex: -1 }
+    }
+
     return element
   },
 })

package/src/components/VMenu/VMenu.ts

@@ -27,7 +27,7 @@ import {
 import goTo from '../../services/goto'
 
 // Types
-import { VNode, VNodeDirective, VNodeData } from 'vue'
+import { VNode, VNodeDirective, VNodeData, PropType } from 'vue'
 
 const baseMixins = mixins(
   Dependent,
@@ -82,6 +82,10 @@ export default baseMixins.extend({
       type: [Boolean, String],
       default: 'v-menu-transition',
     },
+    contentProps: {
+      type: Object as PropType<Record<string, any>>,
+      default: () => ({}),
+    },
   },
 
   data () {
@@ -340,6 +344,7 @@ export default baseMixins.extend({
       const options = {
         attrs: {
           ...this.getScopeIdAttrs(),
+          ...this.contentProps,
           role: 'role' in this.$attrs ? this.$attrs.role : 'menu',
         },
         staticClass: 'v-menu__content',
@@ -454,6 +459,8 @@ export default baseMixins.extend({
       if (tile.tabIndex === -1) this.nextTile()
     },
     onKeyDown (e: KeyboardEvent) {
+      if (this.disableKeys) return
+
       if (e.keyCode === keyCodes.esc) {
         // Wait for dependent elements to close first
         setTimeout(() => { this.isActive = false })

package/src/components/VMenu/__tests__/VMenu.spec.ts

@@ -259,6 +259,37 @@ describe('VMenu.ts', () => {
     expect('Unable to locate target [data-app]').toHaveBeenTipped()
   })
 
+  it('should be able to navigate the menu list with up and down keys', async () => {
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: { eager: true },
+      scopedSlots: {
+        default () {
+          return this.$createElement('div', [
+            this.$createElement(VListItem, { props: { link: true } }),
+            this.$createElement(VListItem, { props: { link: true } }),
+          ])
+        },
+      },
+    })
+
+    wrapper.setData({ isActive: true })
+
+    wrapper.vm.onKeyDown(event(keyCodes.down))
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.listIndex).toBe(0)
+
+    wrapper.vm.onKeyDown(event(keyCodes.up))
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.listIndex).toBe(1)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
   it('should select first or last item when pressing home or end on active menu', async () => {
     const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
     const wrapper = mountFunction({
@@ -291,4 +322,103 @@ describe('VMenu.ts', () => {
 
     expect('Unable to locate target [data-app]').toHaveBeenTipped()
   })
+
+  it('should deactivate when escape is pressed', async () => {
+    jest.useFakeTimers()
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: { eager: true },
+    })
+
+    wrapper.setData({ isActive: true })
+
+    wrapper.vm.onKeyDown(event(keyCodes.esc))
+
+    await wrapper.vm.$nextTick()
+    jest.runAllTimers()
+
+    expect(wrapper.vm.isActive).toBe(false)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+    jest.useRealTimers()
+  })
+
+  it('should disable escape key when disableKeys is true', async () => {
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: {
+        eager: true,
+        disableKeys: true,
+      },
+    })
+
+    wrapper.setData({ isActive: true })
+
+    wrapper.vm.onKeyDown(event(keyCodes.esc))
+
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.vm.isActive).toBe(true)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should disable navigation keys when disableKeys is true', async () => {
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: {
+        eager: true,
+        disableKeys: true,
+      },
+      scopedSlots: {
+        default () {
+          return this.$createElement('div', [
+            this.$createElement(VListItem, { props: { link: true } }),
+          ])
+        },
+      },
+    })
+
+    wrapper.setData({ isActive: true })
+
+    wrapper.vm.onKeyDown(event(keyCodes.up))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    wrapper.vm.onKeyDown(event(keyCodes.down))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    wrapper.vm.onKeyDown(event(keyCodes.end))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    wrapper.vm.onKeyDown(event(keyCodes.home))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
+
+  it('should not open menu on up or down press when disableKeys is true', async () => {
+    const event = (keyCode: number) => new KeyboardEvent('keydown', { keyCode })
+    const wrapper = mountFunction({
+      propsData: {
+        eager: true,
+        disableKeys: true,
+      },
+    })
+
+    wrapper.vm.onKeyDown(event(keyCodes.up))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isActive).toBe(false)
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    wrapper.vm.onKeyDown(event(keyCodes.down))
+    await wrapper.vm.$nextTick()
+    expect(wrapper.vm.isActive).toBe(false)
+    expect(wrapper.vm.listIndex).toBe(-1)
+
+    expect('Unable to locate target [data-app]').toHaveBeenTipped()
+  })
 })

package/src/components/VPagination/VPagination.ts

@@ -29,6 +29,8 @@ export default mixins(
   props: {
     circle: Boolean,
     disabled: Boolean,
+    navigationColor: String,
+    navigationTextColor: String,
     length: {
       type: Number,
       default: 0,
@@ -181,18 +183,21 @@ export default mixins(
     },
     genIcon (h: CreateElement, icon: string, disabled: boolean, fn: EventListener, label: String): VNode {
       return h('li', [
-        h('button', {
-          staticClass: 'v-pagination__navigation',
-          class: {
-            'v-pagination__navigation--disabled': disabled,
-          },
-          attrs: {
-            disabled,
-            type: 'button',
-            'aria-label': label,
-          },
-          on: disabled ? {} : { click: fn },
-        }, [h(VIcon, [icon])]),
+        h('button',
+          this.setBackgroundColor(this.navigationColor, {
+            staticClass: 'v-pagination__navigation',
+            class: {
+              'v-pagination__navigation--disabled': disabled,
+            },
+            attrs: {
+              disabled,
+              type: 'button',
+              'aria-label': label,
+            },
+            on: disabled ? {} : { click: fn },
+          }),
+          [h(VIcon, { props: { color: this.navigationTextColor } }, [icon])]
+        ),
       ])
     },
     genItem (h: CreateElement, i: string | number): VNode {

package/src/components/VRadioGroup/VRadio.ts

@@ -42,7 +42,10 @@ export default baseMixins.extend<options>().extend({
   inheritAttrs: false,
 
   props: {
-    disabled: Boolean,
+    disabled: {
+      type: Boolean,
+      default: null,
+    },
     id: String,
     label: String,
     name: String,
@@ -54,7 +57,10 @@ export default baseMixins.extend<options>().extend({
       type: String,
       default: '$radioOn',
     },
-    readonly: Boolean,
+    readonly: {
+      type: Boolean,
+      default: null,
+    },
     value: {
       default: null,
     },
@@ -90,13 +96,13 @@ export default baseMixins.extend<options>().extend({
       return (this.radioGroup || {}).hasState
     },
     isDisabled (): boolean {
-      return this.disabled || (
+      return this.disabled ?? (
         !!this.radioGroup &&
         this.radioGroup.isDisabled
       )
     },
     isReadonly (): boolean {
-      return this.readonly || (
+      return this.readonly ?? (
         !!this.radioGroup &&
         this.radioGroup.isReadonly
       )

package/src/components/VSelect/VSelect.ts

@@ -754,7 +754,10 @@ export default baseMixins.extend<options>().extend({
     },
     onScroll () {
       if (!this.isMenuActive) {
-        requestAnimationFrame(() => (this.getContent().scrollTop = 0))
+        requestAnimationFrame(() => {
+          const content = this.getContent()
+          if (content) content.scrollTop = 0
+        })
       } else {
         if (this.lastItem > this.computedItems.length) return
 

package/src/components/VSelect/__tests__/__snapshots__/VSelect2.spec.ts.snap

@@ -24,7 +24,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and multi select 1`] =
         <div class="v-input__append-inner">
           <div class="v-input__icon v-input__icon--clear">
             <button type="button"
-                    aria-label="clear icon"
+                    aria-label="$vuetify.input.clear"
                     tabindex="-1"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >
@@ -85,7 +85,7 @@ exports[`VSelect.ts should be clearable with prop, dirty and single select 1`] =
         <div class="v-input__append-inner">
           <div class="v-input__icon v-input__icon--clear">
             <button type="button"
-                    aria-label="clear icon"
+                    aria-label="$vuetify.input.clear"
                     tabindex="-1"
                     class="v-icon notranslate v-icon--link material-icons theme--light"
             >

package/src/components/VSkeletonLoader/VSkeletonLoader.ts

@@ -32,6 +32,10 @@ export default mixins(
   props: {
     boilerplate: Boolean,
     loading: Boolean,
+    loadingText: {
+      type: String,
+      default: '$vuetify.loading',
+    },
     tile: Boolean,
     transition: String,
     type: String,
@@ -45,12 +49,13 @@ export default mixins(
     attrs (): object {
       if (!this.isLoading) return this.$attrs
 
-      return !this.boilerplate ? {
-        'aria-busy': true,
-        'aria-live': 'polite',
-        role: 'alert',
+      return {
+        'aria-busy': !this.boilerplate ? true : undefined,
+        'aria-live': !this.boilerplate ? 'polite' : undefined,
+        'aria-label': !this.boilerplate ? this.$vuetify.lang.t(this.loadingText) : undefined,
+        role: !this.boilerplate ? 'alert' : undefined,
         ...this.$attrs,
-      } : {}
+      }
     },
     classes (): object {
       return {

package/src/components/VSkeletonLoader/__tests__/VSkeletonLoader.spec.ts

@@ -15,6 +15,13 @@ describe('VSkeletonLoader.ts', () => {
   beforeEach(() => {
     mountFunction = (options = {}) => {
       return mount(VSkeletonLoader, {
+        mocks: {
+          $vuetify: {
+            lang: {
+              t: (v: string) => v,
+            },
+          },
+        },
         ...options,
       })
     }