fix(VIcon): add tabindex to clickable icons

vuetifyjs · Mar 18, 2024 · 873550d · 873550d
1 parent 2fcb029
commit 873550d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/packages/vuetify/src/components/VIcon/VIcon.sass b/packages/vuetify/src/components/VIcon/VIcon.sass
@@ -22,6 +22,10 @@
   &--clickable
     cursor: pointer
 
+  &--disabled
+    pointer-events: none
+    opacity: $icon-disabled-opacity
+
   @each $name in settings.$sizes
     &--size-#{$name}
       font-size: calc(var(--v-icon-size-multiplier) * #{map.get($icon-sizes, $name)})

diff --git a/packages/vuetify/src/components/VIcon/VIcon.tsx b/packages/vuetify/src/components/VIcon/VIcon.tsx
@@ -15,6 +15,7 @@ import { convertToUnit, flattenFragments, genericComponent, propsFactory, useRen
 
 export const makeVIconProps = propsFactory({
   color: String,
+  disabled: Boolean,
   start: Boolean,
   end: Boolean,
   icon: IconValue,
@@ -45,6 +46,7 @@ export const VIcon = genericComponent()({
           node.type === Text && node.children && typeof node.children === 'string'
         )[0]?.children as string
       }
+      const hasClick = !!(attrs.onClick || attrs.onClickOnce)
 
       return (
         <iconData.value.component
@@ -57,7 +59,8 @@ export const VIcon = genericComponent()({
             sizeClasses.value,
             textColorClasses.value,
             {
-              'v-icon--clickable': !!attrs.onClick,
+              'v-icon--clickable': hasClick,
+              'v-icon--disabled': props.disabled,
               'v-icon--start': props.start,
               'v-icon--end': props.end,
             },
@@ -72,8 +75,9 @@ export const VIcon = genericComponent()({
             textColorStyles.value,
             props.style,
           ]}
-          role={ attrs.onClick ? 'button' : undefined }
-          aria-hidden={ !attrs.onClick }
+          role={ hasClick ? 'button' : undefined }
+          aria-hidden={ !hasClick }
+          tabindex={ hasClick ? props.disabled ? -1 : 0 : undefined }
         >
           { slotValue }
         </iconData.value.component>

diff --git a/packages/vuetify/src/components/VIcon/_variables.scss b/packages/vuetify/src/components/VIcon/_variables.scss
@@ -3,6 +3,7 @@
 @use '../../styles/tools';
 
 // VIcon
+$icon-disabled-opacity: 0.38 !default;
 $icon-left-margin-left: map.get(settings.$grid-gutters, 'md') !default;
 $icon-letter-spacing: normal !default;
 $icon-line-height: 1 !default;