From 59f6cfc79a37c2748b93b8272700215b58828260 Mon Sep 17 00:00:00 2001
From: Satyam Chatterjee <satyam.chatterjee@innovaccer.com>
Date: Tue, 25 Jul 2023 17:58:35 +0530
Subject: [PATCH] fix(input): update input wrapper focus on padding click

---
 core/components/atoms/input/Input.tsx         |   2 +
 .../__snapshots__/Input.test.tsx.snap         |  21 +++
 .../atoms/metricInput/MetricInput.tsx         |  10 +-
 .../__tests__/MetricInput.test.tsx            |  13 ++
 .../__snapshots__/MetricInput.test.tsx.snap   |   4 +
 .../__snapshots__/InputMask.test.tsx.snap     |   1 +
 .../__snapshots__/Pagination.test.tsx.snap    |   1 +
 .../VerificationCodeInput.test.tsx.snap       | 168 ++++++++++++++++++
 .../__snapshots__/DatePicker.test.tsx.snap    |   1 +
 .../DateRangePicker.test.tsx.snap             |  24 +++
 .../__snapshots__/TimePicker.test.tsx.snap    |   8 +
 .../__tests__/__snapshots__/TS.test.tsx.snap  |   2 +
 12 files changed, 254 insertions(+), 1 deletion(-)

diff --git a/core/components/atoms/input/Input.tsx b/core/components/atoms/input/Input.tsx
index 1a959095e0..de28d8e6fd 100644
--- a/core/components/atoms/input/Input.tsx
+++ b/core/components/atoms/input/Input.tsx
@@ -230,6 +230,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forw
       onClick={() => ref.current?.focus()}
       role="presentation"
       onBlur={() => setIsInputBlank(!ref.current?.value)}
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, jsx-a11y/tabindex-no-positive*/
+      tabIndex={1}
     >
       {inlineLabel && (
         <div className="Input-inlineLabel">
diff --git a/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap b/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap
index c6c015e081..c4e31e441a 100644
--- a/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap
+++ b/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -34,6 +35,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left Input-icon--inputBlank"
@@ -69,6 +71,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -93,6 +96,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -128,6 +132,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--large"
@@ -150,6 +155,7 @@ exports[`Input component
       class="Input Input--large"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <div
         class="Input-inlineLabel"
@@ -183,6 +189,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -205,6 +212,7 @@ exports[`Input component
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <div
         class="Input-inlineLabel"
@@ -238,6 +246,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--tiny"
@@ -260,6 +269,7 @@ exports[`Input component
       class="Input Input--tiny"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <div
         class="Input-inlineLabel"
@@ -292,6 +302,7 @@ exports[`Input component
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -315,6 +326,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -338,6 +350,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -361,6 +374,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -386,6 +400,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -422,6 +437,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -447,6 +463,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -483,6 +500,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -506,6 +524,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left Input-icon--error"
@@ -540,6 +559,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -565,6 +585,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"
diff --git a/core/components/atoms/metricInput/MetricInput.tsx b/core/components/atoms/metricInput/MetricInput.tsx
index ff7a1a8121..f53b4e7c27 100644
--- a/core/components/atoms/metricInput/MetricInput.tsx
+++ b/core/components/atoms/metricInput/MetricInput.tsx
@@ -257,7 +257,15 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
   const actionButtonSize = size === 'large' ? 'regular' : 'tiny';
 
   return (
-    <div data-test="DesignSystem-MetricInputWrapper" className={classes} onKeyDown={onKeyDown} role="presentation">
+    <div
+      data-test="DesignSystem-MetricInputWrapper"
+      className={classes}
+      onKeyDown={onKeyDown}
+      role="presentation"
+      onClick={() => ref.current?.focus()}
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, jsx-a11y/tabindex-no-positive*/
+      tabIndex={1}
+    >
       {icon && (
         <Icon
           data-test="DesignSystem-MetricInput--icon"
diff --git a/core/components/atoms/metricInput/__tests__/MetricInput.test.tsx b/core/components/atoms/metricInput/__tests__/MetricInput.test.tsx
index 1701143785..f4a5641fa0 100644
--- a/core/components/atoms/metricInput/__tests__/MetricInput.test.tsx
+++ b/core/components/atoms/metricInput/__tests__/MetricInput.test.tsx
@@ -241,3 +241,16 @@ describe('MetricInput component with props showActionButton', () => {
     expect(queryByTestId('DesignSystem-MetricInput--downIcon')).not.toBeInTheDocument();
   });
 });
+
+describe('MetricInput component receives focus', () => {
+  it('when MetricInputWrapper is clicked', () => {
+    const { getByTestId } = render(<MetricInput />);
+    const metricInputWrapper = getByTestId('DesignSystem-MetricInputWrapper');
+    const metricInput = getByTestId('DesignSystem-MetricInput');
+
+    metricInput.focus = FunctionValue;
+    fireEvent.click(metricInputWrapper);
+
+    expect(metricInput.focus).toHaveBeenCalled();
+  });
+});
diff --git a/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap b/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap
index 7199e712c1..2569281f23 100644
--- a/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap
+++ b/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap
@@ -9,6 +9,7 @@ exports[`MetricInput component
       class="MetricInput MetricInput--regular"
       data-test="DesignSystem-MetricInputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <i
         class="material-icons material-icons-round Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
@@ -78,6 +79,7 @@ exports[`MetricInput component
       class="MetricInput MetricInput--regular MetricInput--error"
       data-test="DesignSystem-MetricInputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <i
         class="material-icons material-icons-round Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
@@ -147,6 +149,7 @@ exports[`MetricInput component
       class="MetricInput MetricInput--large"
       data-test="DesignSystem-MetricInputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <span
         class="Text Text--subtle Text--large mr-5"
@@ -221,6 +224,7 @@ exports[`MetricInput component
       class="MetricInput MetricInput--regular"
       data-test="DesignSystem-MetricInputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <span
         class="Text Text--subtle Text--regular mr-4"
diff --git a/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap b/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap
index f3a178d0dd..5b69b62c59 100644
--- a/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap
+++ b/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`Input Mask component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
diff --git a/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
index 89a3d8630a..ccf035c773 100644
--- a/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -147,6 +147,7 @@ exports[`Pagination component
         class="MetricInput MetricInput--regular Pagination-MetricInput"
         data-test="DesignSystem-MetricInputWrapper"
         role="presentation"
+        tabindex="1"
       >
         <input
           class="MetricInput-input MetricInput-input--regular"
diff --git a/core/components/molecules/verificationCodeInput/__tests__/__snapshots__/VerificationCodeInput.test.tsx.snap b/core/components/molecules/verificationCodeInput/__tests__/__snapshots__/VerificationCodeInput.test.tsx.snap
index 32cb9314db..e03113ec79 100644
--- a/core/components/molecules/verificationCodeInput/__tests__/__snapshots__/VerificationCodeInput.test.tsx.snap
+++ b/core/components/molecules/verificationCodeInput/__tests__/__snapshots__/VerificationCodeInput.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -29,6 +30,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -44,6 +46,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -59,6 +62,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -88,6 +92,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -103,6 +108,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -118,6 +124,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -133,6 +140,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -162,6 +170,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -177,6 +186,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -192,6 +202,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -207,6 +218,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -236,6 +248,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -251,6 +264,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -266,6 +280,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -281,6 +296,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -310,6 +326,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -325,6 +342,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -340,6 +358,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -355,6 +374,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -384,6 +404,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -399,6 +420,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -414,6 +436,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -429,6 +452,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -458,6 +482,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -473,6 +498,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -488,6 +514,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -503,6 +530,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -518,6 +546,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -533,6 +562,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -562,6 +592,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -577,6 +608,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -592,6 +624,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -607,6 +640,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -622,6 +656,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -637,6 +672,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -666,6 +702,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -681,6 +718,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -696,6 +734,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -711,6 +750,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -726,6 +766,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -741,6 +782,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -770,6 +812,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -785,6 +828,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -800,6 +844,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -815,6 +860,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -830,6 +876,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -845,6 +892,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -874,6 +922,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -889,6 +938,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -904,6 +954,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -919,6 +970,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -948,6 +1000,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -963,6 +1016,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -978,6 +1032,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -993,6 +1048,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1022,6 +1078,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1037,6 +1094,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1052,6 +1110,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1067,6 +1126,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1096,6 +1156,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1111,6 +1172,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1126,6 +1188,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1141,6 +1204,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1170,6 +1234,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1185,6 +1250,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1200,6 +1266,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1215,6 +1282,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1244,6 +1312,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1259,6 +1328,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1274,6 +1344,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1289,6 +1360,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1318,6 +1390,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1333,6 +1406,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1348,6 +1422,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1363,6 +1438,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1392,6 +1468,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1407,6 +1484,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1422,6 +1500,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1437,6 +1516,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1466,6 +1546,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1481,6 +1562,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1496,6 +1578,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1511,6 +1594,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1526,6 +1610,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1541,6 +1626,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1570,6 +1656,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1585,6 +1672,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1600,6 +1688,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1615,6 +1704,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1630,6 +1720,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1645,6 +1736,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1674,6 +1766,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1689,6 +1782,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1704,6 +1798,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1719,6 +1814,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1734,6 +1830,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1749,6 +1846,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1778,6 +1876,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1793,6 +1892,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1808,6 +1908,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1823,6 +1924,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1838,6 +1940,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1853,6 +1956,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1882,6 +1986,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1897,6 +2002,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1912,6 +2018,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1927,6 +2034,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1956,6 +2064,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1971,6 +2080,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -1986,6 +2096,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2001,6 +2112,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2030,6 +2142,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2045,6 +2158,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2060,6 +2174,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2075,6 +2190,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2104,6 +2220,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2119,6 +2236,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2134,6 +2252,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2149,6 +2268,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2178,6 +2298,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2193,6 +2314,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2208,6 +2330,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2223,6 +2346,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2252,6 +2376,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2267,6 +2392,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2282,6 +2408,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2297,6 +2424,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2326,6 +2454,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2341,6 +2470,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2356,6 +2486,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2371,6 +2502,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2400,6 +2532,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2415,6 +2548,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2430,6 +2564,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2445,6 +2580,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2460,6 +2596,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2475,6 +2612,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2504,6 +2642,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2519,6 +2658,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2534,6 +2674,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2549,6 +2690,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2564,6 +2706,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2579,6 +2722,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2608,6 +2752,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2623,6 +2768,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2638,6 +2784,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2653,6 +2800,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2668,6 +2816,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2683,6 +2832,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2712,6 +2862,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2727,6 +2878,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2742,6 +2894,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2757,6 +2910,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2772,6 +2926,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2787,6 +2942,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2816,6 +2972,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2831,6 +2988,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2846,6 +3004,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2861,6 +3020,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2890,6 +3050,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2905,6 +3066,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2920,6 +3082,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2935,6 +3098,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2964,6 +3128,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2979,6 +3144,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -2994,6 +3160,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
@@ -3009,6 +3176,7 @@ exports[`VerificationCodeInput component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
diff --git a/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
index 008a6e5b78..aa3bb913cd 100644
--- a/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
+++ b/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -5161,6 +5161,7 @@ exports[`DatePicker component snapshots renders snapshot for prop:withInput
           data-test="DesignSystem-InputWrapper"
           role="presentation"
           style="min-width: 256px;"
+          tabindex="1"
         >
           <div
             class="Input-icon Input-icon--left"
diff --git a/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap b/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap
index a6271cd211..e6723be766 100644
--- a/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap
+++ b/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap
@@ -38612,6 +38612,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38673,6 +38674,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38753,6 +38755,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38814,6 +38817,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38894,6 +38898,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38955,6 +38960,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40114,6 +40120,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40175,6 +40182,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40255,6 +40263,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40316,6 +40325,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40396,6 +40406,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40457,6 +40468,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -41616,6 +41628,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -41677,6 +41690,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -42743,6 +42757,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -42804,6 +42819,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -43870,6 +43886,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -43931,6 +43948,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -46076,6 +46094,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -46137,6 +46156,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -47203,6 +47223,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -47264,6 +47285,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -48330,6 +48352,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -48391,6 +48414,7 @@ exports[`DateRangePicker component
               data-test="DesignSystem-InputWrapper"
               role="presentation"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
diff --git a/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap b/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap
index d4780428f7..2670c5c1f3 100644
--- a/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap
+++ b/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`TimePicker component prop:inputFormat snapshot
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -43,6 +44,7 @@ exports[`TimePicker component prop:inputFormat snapshot
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -72,6 +74,7 @@ exports[`TimePicker component prop:outputFormat snapshot
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -101,6 +104,7 @@ exports[`TimePicker component prop:outputFormat snapshot
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -130,6 +134,7 @@ exports[`TimePicker component prop:time snapshot
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -172,6 +177,7 @@ exports[`TimePicker component prop:time snapshot
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -214,6 +220,7 @@ exports[`TimePicker component prop:validators snapshot
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -243,6 +250,7 @@ exports[`TimePicker component prop:validators snapshot
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
diff --git a/core/utils/__tests__/__snapshots__/TS.test.tsx.snap b/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
index aebe5bd83c..8be5d35a2c 100644
--- a/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
+++ b/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
@@ -858,6 +858,7 @@ exports[`TS renders children 1`] = `
     data-test="DesignSystem-InputWrapper"
     role="presentation"
     style="min-width: 256px;"
+    tabindex="1"
   >
     <input
       class="Input-input Input-input--regular"
@@ -875,6 +876,7 @@ exports[`TS renders children 1`] = `
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         autocomplete="off"