feat(ripple): use key names instead of codes

Author: KaelWD

packages/vuetify/src/components/VList/VListItem.tsx

@@ -28,7 +28,7 @@ import vRipple from '@/directives/ripple'
 
 // Utilities
 import { computed, onBeforeMount, toDisplayString, toRef, watch } from 'vue'
-import { deprecate, EventProp, genericComponent, keyCodes, propsFactory, useRender } from '@/util'
+import { deprecate, EventProp, genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -190,7 +190,7 @@ export const VListItem = genericComponent<VListItemSlots>()({
         !!props.ripple &&
         list?.filterable
       )
-        ? { keys: [keyCodes.enter] }
+        ? { keys: ['Enter'] }
         : props.ripple
     )
 

packages/vuetify/src/directives/ripple/index.ts

@@ -2,7 +2,7 @@
 import './VRipple.sass'
 
 // Utilities
-import { isObject, keyCodes } from '@/util'
+import { isObject } from '@/util'
 
 // Types
 import type { DirectiveBinding } from 'vue'
@@ -27,7 +27,7 @@ interface RippleOptions {
 export interface RippleDirectiveBinding extends Omit<DirectiveBinding, 'modifiers' | 'value'> {
   value?: boolean | {
     class?: string
-    keys?: number[]
+    keys?: string[]
   }
   modifiers: {
     center?: boolean
@@ -252,8 +252,8 @@ function rippleCancelShow (e: MouseEvent | TouchEvent) {
 
 let keyboardRipple = false
 
-function keyboardRippleShow (e: KeyboardEvent, keys: number[]) {
-  if (!keyboardRipple && keys.includes(e.keyCode)) {
+function keyboardRippleShow (e: KeyboardEvent, keys: string[]) {
+  if (!keyboardRipple && keys.includes(e.key)) {
     keyboardRipple = true
     rippleShow(e)
   }
@@ -289,7 +289,7 @@ function updateRipple (el: HTMLElement, binding: RippleDirectiveBinding, wasEnab
     el._ripple.class = bindingValue.class
   }
 
-  const allowedKeys = bindingValue.keys ?? [keyCodes.enter, keyCodes.space]
+  const allowedKeys = bindingValue.keys ?? ['Enter', 'Space']
   el._ripple.keyDownHandler = (e: KeyboardEvent) => keyboardRippleShow(e, allowedKeys)
 
   if (enabled && !wasEnabled) {