From a72578d991c7a141ac5be5f14f87bf703da8df66 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 focus when wrapper is clicked

---
 core/components/atoms/input/Input.tsx         |   4 +-
 .../__snapshots__/Input.test.tsx.snap         |  63 ++-
 .../atoms/metricInput/MetricInput.tsx         |   9 +-
 .../__tests__/MetricInput.test.tsx            |  13 +
 .../__snapshots__/MetricInput.test.tsx.snap   |  12 +-
 .../__snapshots__/InputMask.test.tsx.snap     |   3 +-
 .../__snapshots__/Pagination.test.tsx.snap    |   3 +-
 .../VerificationCodeInput.test.tsx.snap       | 504 ++++++++++++------
 .../__snapshots__/DatePicker.test.tsx.snap    |   3 +-
 .../DateRangePicker.test.tsx.snap             |  72 ++-
 .../__snapshots__/TimePicker.test.tsx.snap    |  30 +-
 .../__tests__/__snapshots__/TS.test.tsx.snap  |   6 +-
 css/src/components/input.css                  |   4 +
 css/src/components/metricInput.css            |   4 +
 14 files changed, 496 insertions(+), 234 deletions(-)

diff --git a/core/components/atoms/input/Input.tsx b/core/components/atoms/input/Input.tsx
index 07a8618f11..734d3af4ce 100644
--- a/core/components/atoms/input/Input.tsx
+++ b/core/components/atoms/input/Input.tsx
@@ -228,13 +228,15 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forw
   );
 
   return (
+    // eslint-disable-next-line
     <div
       data-test="DesignSystem-InputWrapper"
       className={classes}
       style={{ minWidth }}
       onClick={() => ref.current?.focus()}
-      role="presentation"
+      role="textbox"
       onBlur={() => setIsInputBlank(!ref.current?.value)}
+      tabIndex={0}
     >
       {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 3a24c3bd39..09b0b34b88 100644
--- a/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap
+++ b/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -8,8 +8,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--regular"
@@ -32,8 +33,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <div
         class="Input-icon Input-icon--left Input-icon--inputBlank"
@@ -68,8 +70,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--regular"
@@ -92,8 +95,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -128,8 +132,9 @@ exports[`Input component
     <div
       class="Input Input--large"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--large"
@@ -151,7 +156,8 @@ exports[`Input component
     <div
       class="Input Input--large"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
+      tabindex="0"
     >
       <div
         class="Input-inlineLabel"
@@ -183,8 +189,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--regular"
@@ -206,7 +213,8 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
+      tabindex="0"
     >
       <div
         class="Input-inlineLabel"
@@ -238,8 +246,9 @@ exports[`Input component
     <div
       class="Input Input--tiny"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--tiny"
@@ -261,7 +270,8 @@ exports[`Input component
     <div
       class="Input Input--tiny"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
+      tabindex="0"
     >
       <div
         class="Input-inlineLabel"
@@ -293,7 +303,8 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--regular"
@@ -315,8 +326,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--regular"
@@ -338,8 +350,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--regular"
@@ -361,8 +374,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--regular"
@@ -386,8 +400,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -423,8 +438,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--regular"
@@ -448,8 +464,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -485,8 +502,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--error"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--regular"
@@ -508,8 +526,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--error"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <div
         class="Input-icon Input-icon--left Input-icon--error"
@@ -543,8 +562,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         class="Input-input Input-input--regular"
@@ -568,8 +588,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <div
         class="Input-icon Input-icon--left"
diff --git a/core/components/atoms/metricInput/MetricInput.tsx b/core/components/atoms/metricInput/MetricInput.tsx
index a2f1f5e271..24b3695346 100644
--- a/core/components/atoms/metricInput/MetricInput.tsx
+++ b/core/components/atoms/metricInput/MetricInput.tsx
@@ -262,7 +262,14 @@ 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="textbox"
+      onClick={() => ref.current?.focus()}
+      tabIndex={0}
+    >
       {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..18a4fa77e1 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', () => {
+  it('has focus state 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 8d31519bbc..4e258e1d22 100644
--- a/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap
+++ b/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap
@@ -8,7 +8,8 @@ exports[`MetricInput component
     <div
       class="MetricInput MetricInput--regular"
       data-test="DesignSystem-MetricInputWrapper"
-      role="presentation"
+      role="textbox"
+      tabindex="0"
     >
       <i
         class="material-icons material-icons-rounded Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
@@ -77,7 +78,8 @@ exports[`MetricInput component
     <div
       class="MetricInput MetricInput--regular MetricInput--error"
       data-test="DesignSystem-MetricInputWrapper"
-      role="presentation"
+      role="textbox"
+      tabindex="0"
     >
       <i
         class="material-icons material-icons-rounded Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
@@ -146,7 +148,8 @@ exports[`MetricInput component
     <div
       class="MetricInput MetricInput--large"
       data-test="DesignSystem-MetricInputWrapper"
-      role="presentation"
+      role="textbox"
+      tabindex="0"
     >
       <span
         class="Text Text--subtle Text--large mr-5"
@@ -220,7 +223,8 @@ exports[`MetricInput component
     <div
       class="MetricInput MetricInput--regular"
       data-test="DesignSystem-MetricInputWrapper"
-      role="presentation"
+      role="textbox"
+      tabindex="0"
     >
       <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..6528d9f5f2 100644
--- a/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap
+++ b/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap
@@ -12,8 +12,9 @@ exports[`Input Mask component
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 256px;"
+        tabindex="0"
       >
         <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 5bbe323f8f..bcec9df53e 100644
--- a/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
+++ b/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -146,7 +146,8 @@ exports[`Pagination component
       <div
         class="MetricInput MetricInput--regular Pagination-MetricInput"
         data-test="DesignSystem-MetricInputWrapper"
-        role="presentation"
+        role="textbox"
+        tabindex="0"
       >
         <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..25b0485065 100644
--- a/core/components/molecules/verificationCodeInput/__tests__/__snapshots__/VerificationCodeInput.test.tsx.snap
+++ b/core/components/molecules/verificationCodeInput/__tests__/__snapshots__/VerificationCodeInput.test.tsx.snap
@@ -12,8 +12,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -27,8 +28,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -42,8 +44,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -57,8 +60,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -86,8 +90,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -101,8 +106,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -116,8 +122,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -131,8 +138,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -160,8 +168,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -175,8 +184,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -190,8 +200,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -205,8 +216,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -234,8 +246,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -249,8 +262,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -264,8 +278,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -279,8 +294,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -308,8 +324,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -323,8 +340,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -338,8 +356,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -353,8 +372,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -382,8 +402,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -397,8 +418,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -412,8 +434,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -427,8 +450,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -456,8 +480,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -471,8 +496,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -486,8 +512,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -501,8 +528,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -516,8 +544,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -531,8 +560,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -560,8 +590,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -575,8 +606,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -590,8 +622,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -605,8 +638,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -620,8 +654,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -635,8 +670,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -664,8 +700,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -679,8 +716,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -694,8 +732,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -709,8 +748,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -724,8 +764,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -739,8 +780,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -768,8 +810,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -783,8 +826,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -798,8 +842,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -813,8 +858,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -828,8 +874,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -843,8 +890,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -872,8 +920,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -887,8 +936,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -902,8 +952,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -917,8 +968,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -946,8 +998,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -961,8 +1014,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -976,8 +1030,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -991,8 +1046,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1020,8 +1076,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1035,8 +1092,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1050,8 +1108,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1065,8 +1124,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1094,8 +1154,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1109,8 +1170,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1124,8 +1186,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1139,8 +1202,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1168,8 +1232,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1183,8 +1248,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1198,8 +1264,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1213,8 +1280,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1242,8 +1310,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1257,8 +1326,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1272,8 +1342,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1287,8 +1358,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1316,8 +1388,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1331,8 +1404,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1346,8 +1420,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1361,8 +1436,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1390,8 +1466,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1405,8 +1482,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1420,8 +1498,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1435,8 +1514,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1464,8 +1544,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1479,8 +1560,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1494,8 +1576,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1509,8 +1592,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1524,8 +1608,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1539,8 +1624,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1568,8 +1654,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1583,8 +1670,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1598,8 +1686,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1613,8 +1702,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1628,8 +1718,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1643,8 +1734,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1672,8 +1764,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1687,8 +1780,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1702,8 +1796,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1717,8 +1812,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1732,8 +1828,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1747,8 +1844,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1776,8 +1874,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1791,8 +1890,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1806,8 +1906,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1821,8 +1922,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1836,8 +1938,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1851,8 +1954,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1880,8 +1984,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1895,8 +2000,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1910,8 +2016,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1925,8 +2032,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1954,8 +2062,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1969,8 +2078,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1984,8 +2094,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -1999,8 +2110,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2028,8 +2140,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2043,8 +2156,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2058,8 +2172,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2073,8 +2188,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2102,8 +2218,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2117,8 +2234,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2132,8 +2250,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2147,8 +2266,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2176,8 +2296,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2191,8 +2312,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2206,8 +2328,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2221,8 +2344,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2250,8 +2374,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2265,8 +2390,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2280,8 +2406,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2295,8 +2422,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2324,8 +2452,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2339,8 +2468,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2354,8 +2484,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2369,8 +2500,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2398,8 +2530,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2413,8 +2546,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2428,8 +2562,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2443,8 +2578,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2458,8 +2594,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2473,8 +2610,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2502,8 +2640,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2517,8 +2656,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2532,8 +2672,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2547,8 +2688,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2562,8 +2704,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2577,8 +2720,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2606,8 +2750,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2621,8 +2766,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2636,8 +2782,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2651,8 +2798,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2666,8 +2814,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2681,8 +2830,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2710,8 +2860,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2725,8 +2876,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2740,8 +2892,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2755,8 +2908,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2770,8 +2924,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2785,8 +2940,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2814,8 +2970,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2829,8 +2986,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2844,8 +3002,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2859,8 +3018,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2888,8 +3048,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2903,8 +3064,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2918,8 +3080,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2933,8 +3096,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2962,8 +3126,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2977,8 +3142,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -2992,8 +3158,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <input
           class="Input-input Input-input--large"
@@ -3007,8 +3174,9 @@ exports[`VerificationCodeInput component
       <div
         class="Input Input--large VerificationCodeInput-Input ml-4"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 40px;"
+        tabindex="0"
       >
         <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 d62dea9d97..c395b96c81 100644
--- a/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
+++ b/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -5174,8 +5174,9 @@ exports[`DatePicker component snapshots renders snapshot for prop:withInput
         <div
           class="Input Input--regular"
           data-test="DesignSystem-InputWrapper"
-          role="presentation"
+          role="textbox"
           style="min-width: 256px;"
+          tabindex="0"
         >
           <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 246f3cf1a1..ba7ec7b476 100644
--- a/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap
+++ b/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap
@@ -38610,8 +38610,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38672,8 +38673,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38753,8 +38755,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38815,8 +38818,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38896,8 +38900,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38958,8 +38963,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40118,8 +40124,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40180,8 +40187,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40261,8 +40269,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40323,8 +40332,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40404,8 +40414,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40466,8 +40477,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -41626,8 +41638,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -41688,8 +41701,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -42755,8 +42769,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -42817,8 +42832,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -43884,8 +43900,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -43946,8 +43963,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -46092,8 +46110,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -46154,8 +46173,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -47221,8 +47241,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -47283,8 +47304,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -48350,8 +48372,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -48412,8 +48435,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="textbox"
               style="min-width: 256px;"
+              tabindex="0"
             >
               <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 af6b6a75e0..050a6a154c 100644
--- a/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap
+++ b/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap
@@ -12,8 +12,9 @@ exports[`TimePicker component prop:error snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 256px;"
+        tabindex="0"
       >
         <input
           autocomplete="off"
@@ -41,8 +42,9 @@ exports[`TimePicker component prop:error snapshot
       <div
         class="Input Input--regular Input--error"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 256px;"
+        tabindex="0"
       >
         <input
           autocomplete="off"
@@ -70,8 +72,9 @@ exports[`TimePicker component prop:inputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 256px;"
+        tabindex="0"
       >
         <input
           autocomplete="off"
@@ -99,8 +102,9 @@ exports[`TimePicker component prop:inputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 256px;"
+        tabindex="0"
       >
         <input
           autocomplete="off"
@@ -128,8 +132,9 @@ exports[`TimePicker component prop:outputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 256px;"
+        tabindex="0"
       >
         <input
           autocomplete="off"
@@ -157,8 +162,9 @@ exports[`TimePicker component prop:outputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 256px;"
+        tabindex="0"
       >
         <input
           autocomplete="off"
@@ -186,8 +192,9 @@ exports[`TimePicker component prop:time snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 256px;"
+        tabindex="0"
       >
         <input
           autocomplete="off"
@@ -228,8 +235,9 @@ exports[`TimePicker component prop:time snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 256px;"
+        tabindex="0"
       >
         <input
           autocomplete="off"
@@ -270,8 +278,9 @@ exports[`TimePicker component prop:validators snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 256px;"
+        tabindex="0"
       >
         <input
           autocomplete="off"
@@ -299,8 +308,9 @@ exports[`TimePicker component prop:validators snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="textbox"
         style="min-width: 256px;"
+        tabindex="0"
       >
         <input
           autocomplete="off"
diff --git a/core/utils/__tests__/__snapshots__/TS.test.tsx.snap b/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
index dbbe6b44d4..345ebafbcf 100644
--- a/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
+++ b/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
@@ -861,8 +861,9 @@ exports[`TS renders children 1`] = `
   <div
     class="Input Input--regular"
     data-test="DesignSystem-InputWrapper"
-    role="presentation"
+    role="textbox"
     style="min-width: 256px;"
+    tabindex="0"
   >
     <input
       class="Input-input Input-input--regular"
@@ -878,8 +879,9 @@ exports[`TS renders children 1`] = `
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="textbox"
       style="min-width: 256px;"
+      tabindex="0"
     >
       <input
         autocomplete="off"
diff --git a/css/src/components/input.css b/css/src/components/input.css
index 3aedf9caed..06d7159edf 100644
--- a/css/src/components/input.css
+++ b/css/src/components/input.css
@@ -42,6 +42,10 @@
   cursor: text;
 }
 
+.Input:focus-visible {
+  outline: none;
+}
+
 .Input:focus-within {
   background: var(--white);
   border-color: var(--primary);
diff --git a/css/src/components/metricInput.css b/css/src/components/metricInput.css
index 2a1e8fab94..65a767ea12 100644
--- a/css/src/components/metricInput.css
+++ b/css/src/components/metricInput.css
@@ -30,6 +30,10 @@
   cursor: text;
 }
 
+.MetricInput:focus-visible {
+  outline: none;
+}
+
 .MetricInput:focus-within {
   background: var(--white);
   border-color: var(--primary);