From 0fe30c0f92d1d5fbaf5da27aad4c3b77f30fdcec Mon Sep 17 00:00:00 2001
From: PKulkoRaccoonGang <peter.kulko@raccoongang.com>
Date: Mon, 30 Oct 2023 13:21:59 +0200
Subject: [PATCH] fix: fixed tabindex for disabled variant

---
 src/Chip/ChipIcon.tsx | 6 +++++-
 src/Chip/index.scss   | 1 +
 src/Chip/index.tsx    | 2 ++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/Chip/ChipIcon.tsx b/src/Chip/ChipIcon.tsx
index 7bbdb3ac1fb..962467bbcf5 100644
--- a/src/Chip/ChipIcon.tsx
+++ b/src/Chip/ChipIcon.tsx
@@ -12,10 +12,11 @@ export interface ChipIconProps {
   onClick?: KeyboardEventHandler & MouseEventHandler,
   alt?: string,
   variant: string,
+  disabled?: boolean,
 }
 
 function ChipIcon({
-  className, src, onClick, alt, variant,
+  className, src, onClick, alt, variant, disabled,
 }: ChipIconProps) {
   if (onClick) {
     return (
@@ -26,6 +27,7 @@ function ChipIcon({
         iconAs={Icon}
         alt={alt}
         invertColors={variant === STYLE_VARIANTS.DARK}
+        tabIndex={disabled ? -1 : 0}
       />
     );
   }
@@ -39,11 +41,13 @@ ChipIcon.propTypes = {
   onClick: PropTypes.func,
   alt: PropTypes.string.isRequired,
   variant: PropTypes.string,
+  disabled: PropTypes.bool,
 };
 
 ChipIcon.defaultProps = {
   onClick: undefined,
   variant: STYLE_VARIANTS.LIGHT,
+  disabled: false,
 };
 
 export default ChipIcon;
diff --git a/src/Chip/index.scss b/src/Chip/index.scss
index 7a1f796a7a5..abfa54040dd 100644
--- a/src/Chip/index.scss
+++ b/src/Chip/index.scss
@@ -32,6 +32,7 @@
 
     [dir="rtl"] & {
       margin-right: 0;
+      margin-left: .25rem;
     }
   }
 
diff --git a/src/Chip/index.tsx b/src/Chip/index.tsx
index c0f5c84412c..d2359010ba5 100644
--- a/src/Chip/index.tsx
+++ b/src/Chip/index.tsx
@@ -69,6 +69,7 @@ const Chip = React.forwardRef(({
           onClick={onIconBeforeClick}
           alt={iconBeforeAlt}
           variant={variant}
+          disabled={disabled}
         />
       )}
       <div
@@ -86,6 +87,7 @@ const Chip = React.forwardRef(({
           onClick={onIconAfterClick}
           alt={iconAfterAlt}
           variant={variant}
+          disabled={disabled}
         />
       )}
     </div>