fix(app): activate input-field focus-visble (#15048)

* fix(app): activate input-field focus-visble
Opentrons · Apr 30, 2024 · 8084b9a · 8084b9a
1 parent 2e66d54
commit 8084b9a
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/app/src/atoms/InputField/index.tsx b/app/src/atoms/InputField/index.tsx
@@ -99,6 +99,7 @@ function Input(props: InputFieldProps): JSX.Element {
     size = 'small',
     title,
     tooltipText,
+    tabIndex = 0,
     ...inputProps
   } = props
   const hasError = props.error != null
@@ -150,10 +151,9 @@ function Input(props: InputFieldProps): JSX.Element {
     }
 
     &:focus-visible {
-      border: 1px ${BORDERS.styleSolid}
-        ${hasError ? COLORS.red50 : COLORS.grey60};
+      border: 1px ${BORDERS.styleSolid} ${COLORS.grey55};
       outline: 2px ${BORDERS.styleSolid} ${COLORS.blue50};
-      outline-offset: 3px;
+      outline-offset: 2px;
     }
 
     &:focus-within {
@@ -268,6 +268,7 @@ function Input(props: InputFieldProps): JSX.Element {
       ) : null}
       <Flex width="100%" flexDirection={DIRECTION_COLUMN} css={OUTER_CSS}>
         <Flex
+          tabIndex={tabIndex}
           css={INPUT_FIELD}
           alignItems={ALIGN_CENTER}
           onClick={() => {