fix(ListChoice): disabled items should not get focus (#2474)

Co-authored-by: Luděk Vepřek <weprous@gmail.com>
kiwicom · Nov 10, 2020 · 08eb9c4 · 08eb9c4
1 parent f092fa9
commit 08eb9c4
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/packages/orbit-components/src/ListChoice/index.js b/packages/orbit-components/src/ListChoice/index.js
@@ -81,8 +81,16 @@ StyledListChoiceContent.defaultProps = {
   theme: defaultTheme,
 };
 
-const ListChoice = (props: Props) => {
-  const { dataTest, icon, title, description, selectable, onClick, selected, disabled } = props;
+const ListChoice = ({
+  dataTest,
+  icon,
+  title,
+  description,
+  selectable,
+  onClick,
+  selected,
+  disabled,
+}: Props) => {
   const conditionalProps = {
     ...(selectable ? { "aria-checked": selected } : null),
   };
@@ -92,7 +100,7 @@ const ListChoice = (props: Props) => {
       onClick={!disabled ? onClick : null}
       data-test={dataTest}
       onKeyDown={!disabled ? handleKeyDown(onClick) : null}
-      tabIndex="0"
+      tabIndex={disabled ? "-1" : "0"}
       disabled={disabled}
       aria-disabled={disabled}
       role={selectable ? "checkbox" : "button"}