fix(Icon): revert to last head

fixes #18482 and #18493
vuetifyjs · Jan 25, 2024 · 837aad9 · 837aad9
1 parent dd32fc6
commit 837aad9
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
@@ -17,7 +17,7 @@ import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
-import { computed, ref, toRef, watch } from 'vue'
+import { computed, provide, ref, toRef, watch } from 'vue'
 import {
   animate,
   convertToUnit,
@@ -154,6 +154,15 @@ export const VField = genericComponent<new <T>(
         : props.baseColor
     }))
 
+    if (props.clearable) {
+      const hasClickEvent = () => {
+        return Object.keys(attrs).some(key => {
+          return /^onclick/i.test(key) && attrs[key]
+        })
+      }
+      provide('hasClickEvent', hasClickEvent)
+    }
+
     watch(isActive, val => {
       if (hasLabel.value) {
         const el: HTMLElement = labelRef.value!.$el

diff --git a/packages/vuetify/src/components/VIcon/VIcon.tsx b/packages/vuetify/src/components/VIcon/VIcon.tsx
@@ -10,7 +10,7 @@ import { makeTagProps } from '@/composables/tag'
 import { makeThemeProps, provideTheme } from '@/composables/theme'
 
 // Utilities
-import { computed, ref, Text, toRef } from 'vue'
+import { computed, inject, ref, Text, toRef } from 'vue'
 import { convertToUnit, flattenFragments, genericComponent, propsFactory, useRender } from '@/util'
 
 export const makeVIconProps = propsFactory({
@@ -38,6 +38,10 @@ export const VIcon = genericComponent()({
     const { sizeClasses } = useSize(props)
     const { textColorClasses, textColorStyles } = useTextColor(toRef(props, 'color'))
 
+    const hasClickEvent = inject<() => boolean>('hasClickEvent')
+    // handle undefined
+    const safeHasClickEvent = hasClickEvent ?? (() => false)
+
     useRender(() => {
       const slotValue = slots.default?.()
       if (slotValue) {
@@ -72,8 +76,9 @@ export const VIcon = genericComponent()({
             textColorStyles.value,
             props.style,
           ]}
-          role={ attrs.onClick ? 'button' : undefined }
-          aria-hidden={ !attrs.onClick }
+          role={ safeHasClickEvent() || attrs.onClick ? 'button' : undefined }
+          aria-hidden={ !safeHasClickEvent() || !attrs.onClick }
+          tabindex={ safeHasClickEvent() ? '0' : undefined }
         >
           { slotValue }
         </iconData.value.component>