ENG-103344: Fixed tabIndex issue from Avatar component (#888)

* ENG-103344: Fixed tabIndex issue from Avatar component * Update src/components/Avatar/Avatar.tsx Co-authored-by: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com> * Update src/components/Avatar/Avatar.tsx Co-authored-by: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com> * Update src/components/Avatar/Avatar.tsx Co-authored-by: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com> --------- Co-authored-by: Jeff Howard <106610186+jhoward-eightfold@users.noreply.github.com>
EightfoldAI · Sep 9, 2024 · 2804d89 · 2804d89
1 parent b0c9d78
commit 2804d89
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -256,6 +256,7 @@ const AvatarFallback: FC<AvatarFallbackProps> = React.forwardRef(
       randomiseTheme,
       style,
       theme,
+      tabIndex = 0,
     },
     ref: Ref<HTMLDivElement>
   ) => {
@@ -296,7 +297,7 @@ const AvatarFallback: FC<AvatarFallbackProps> = React.forwardRef(
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         style={style}
-        tabIndex={0}
+        tabIndex={tabIndex}
       >
         {children}
       </div>
@@ -316,6 +317,7 @@ const AvatarIcon: FC<AvatarIconProps> = React.forwardRef(
       onMouseEnter,
       onMouseLeave,
       style,
+      tabIndex
     },
     ref: Ref<HTMLDivElement>
   ) => {
@@ -333,7 +335,7 @@ const AvatarIcon: FC<AvatarIconProps> = React.forwardRef(
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
         style={style}
-        tabIndex={0}
+        tabIndex={tabIndex}
       >
         <Icon size={fontSize} {...iconProps} />
         {children}
@@ -366,6 +368,7 @@ export const Avatar: FC<AvatarProps> = React.forwardRef(
       theme,
       tooltipProps = undefined,
       type = 'square',
+      tabIndex = 0,
     },
     ref: Ref<HTMLDivElement>
   ) => {
@@ -544,6 +547,7 @@ export const Avatar: FC<AvatarProps> = React.forwardRef(
             onMouseLeave={onMouseLeave}
             ref={ref}
             style={{ ...wrapperContainerStyle, ...(calculatedOutline ?? {}) }}
+            tabIndex={tabIndex}
           >
             <AvatarStatusItems
               outline={calculatedOutline}
@@ -588,6 +592,7 @@ export const Avatar: FC<AvatarProps> = React.forwardRef(
           ref={ref}
           style={{ ...wrapperContainerStyle, ...(calculatedOutline ?? {}) }}
           theme={theme}
+          tabIndex={tabIndex}
         >
           {children}
           <AvatarStatusItems