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

---
 core/components/atoms/input/Input.tsx         |   4 +-
 .../__snapshots__/Input.test.tsx.snap         |  63 ++-
 .../atoms/metricInput/MetricInput.tsx         |  10 +-
 .../__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    |  24 +-
 .../__tests__/__snapshots__/TS.test.tsx.snap  |   6 +-
 12 files changed, 485 insertions(+), 232 deletions(-)

diff --git a/core/components/atoms/input/Input.tsx b/core/components/atoms/input/Input.tsx
index 1a959095e0..0f042866f7 100644
--- a/core/components/atoms/input/Input.tsx
+++ b/core/components/atoms/input/Input.tsx
@@ -228,8 +228,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forw
       className={classes}
       style={{ minWidth }}
       onClick={() => ref.current?.focus()}
-      role="presentation"
+      //role is button to provide tab accessibility
+      role="button"
       onBlur={() => setIsInputBlank(!ref.current?.value)}
+      tabIndex={1}
     >
       {inlineLabel && (
         <div className="Input-inlineLabel">
diff --git a/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap b/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap
index c6c015e081..1640a3bfda 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="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <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="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left Input-icon--inputBlank"
@@ -67,8 +69,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -91,8 +94,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -126,8 +130,9 @@ exports[`Input component
     <div
       class="Input Input--large"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--large"
@@ -149,7 +154,8 @@ exports[`Input component
     <div
       class="Input Input--large"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
+      tabindex="1"
     >
       <div
         class="Input-inlineLabel"
@@ -181,8 +187,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -204,7 +211,8 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
+      tabindex="1"
     >
       <div
         class="Input-inlineLabel"
@@ -236,8 +244,9 @@ exports[`Input component
     <div
       class="Input Input--tiny"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--tiny"
@@ -259,7 +268,8 @@ exports[`Input component
     <div
       class="Input Input--tiny"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
+      tabindex="1"
     >
       <div
         class="Input-inlineLabel"
@@ -291,7 +301,8 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -313,8 +324,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -336,8 +348,9 @@ exports[`Input component
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -359,8 +372,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -384,8 +398,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -420,8 +435,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -445,8 +461,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -481,8 +498,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--error"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -504,8 +522,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--error"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left Input-icon--error"
@@ -538,8 +557,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -563,8 +583,9 @@ exports[`Input component
     <div
       class="Input Input--regular Input--disabled"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"
diff --git a/core/components/atoms/metricInput/MetricInput.tsx b/core/components/atoms/metricInput/MetricInput.tsx
index ff7a1a8121..5082521e93 100644
--- a/core/components/atoms/metricInput/MetricInput.tsx
+++ b/core/components/atoms/metricInput/MetricInput.tsx
@@ -257,7 +257,15 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
   const actionButtonSize = size === 'large' ? 'regular' : 'tiny';
 
   return (
-    <div data-test="DesignSystem-MetricInputWrapper" className={classes} onKeyDown={onKeyDown} role="presentation">
+    <div
+      data-test="DesignSystem-MetricInputWrapper"
+      className={classes}
+      onKeyDown={onKeyDown}
+      //role is button to provide tab accessibility
+      role="button"
+      onClick={() => ref.current?.focus()}
+      tabIndex={1}
+    >
       {icon && (
         <Icon
           data-test="DesignSystem-MetricInput--icon"
diff --git a/core/components/atoms/metricInput/__tests__/MetricInput.test.tsx b/core/components/atoms/metricInput/__tests__/MetricInput.test.tsx
index 1701143785..f4a5641fa0 100644
--- a/core/components/atoms/metricInput/__tests__/MetricInput.test.tsx
+++ b/core/components/atoms/metricInput/__tests__/MetricInput.test.tsx
@@ -241,3 +241,16 @@ describe('MetricInput component with props showActionButton', () => {
     expect(queryByTestId('DesignSystem-MetricInput--downIcon')).not.toBeInTheDocument();
   });
 });
+
+describe('MetricInput component receives focus', () => {
+  it('when MetricInputWrapper is clicked', () => {
+    const { getByTestId } = render(<MetricInput />);
+    const metricInputWrapper = getByTestId('DesignSystem-MetricInputWrapper');
+    const metricInput = getByTestId('DesignSystem-MetricInput');
+
+    metricInput.focus = FunctionValue;
+    fireEvent.click(metricInputWrapper);
+
+    expect(metricInput.focus).toHaveBeenCalled();
+  });
+});
diff --git a/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap b/core/components/atoms/metricInput/__tests__/__snapshots__/MetricInput.test.tsx.snap
index 7199e712c1..8a54478550 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="button"
+      tabindex="1"
     >
       <i
         class="material-icons material-icons-round 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="button"
+      tabindex="1"
     >
       <i
         class="material-icons material-icons-round 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="button"
+      tabindex="1"
     >
       <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="button"
+      tabindex="1"
     >
       <span
         class="Text Text--subtle Text--regular mr-4"
diff --git a/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap b/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap
index f3a178d0dd..b150a1ce35 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="button"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
diff --git a/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
index 89a3d8630a..7fb2f4540e 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="button"
+        tabindex="1"
       >
         <input
           class="MetricInput-input MetricInput-input--regular"
diff --git a/core/components/molecules/verificationCodeInput/__tests__/__snapshots__/VerificationCodeInput.test.tsx.snap b/core/components/molecules/verificationCodeInput/__tests__/__snapshots__/VerificationCodeInput.test.tsx.snap
index 32cb9314db..ed40829f8d 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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <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="button"
         style="min-width: 40px;"
+        tabindex="1"
       >
         <input
           class="Input-input Input-input--large"
diff --git a/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
index 97d4baa769..192f638d46 100644
--- a/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
+++ b/core/components/organisms/datePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -5159,8 +5159,9 @@ exports[`DatePicker component snapshots renders snapshot for prop:withInput
         <div
           class="Input Input--regular"
           data-test="DesignSystem-InputWrapper"
-          role="presentation"
+          role="button"
           style="min-width: 256px;"
+          tabindex="1"
         >
           <div
             class="Input-icon Input-icon--left"
diff --git a/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap b/core/components/organisms/dateRangePicker/__tests__/__snapshots__/DateRangePicker.test.tsx.snap
index a6271cd211..008ccb2d58 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="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38671,8 +38672,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38751,8 +38753,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38812,8 +38815,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38892,8 +38896,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -38953,8 +38958,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40112,8 +40118,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40173,8 +40180,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40253,8 +40261,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40314,8 +40323,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40394,8 +40404,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -40455,8 +40466,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -41614,8 +41626,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -41675,8 +41688,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -42741,8 +42755,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -42802,8 +42817,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -43868,8 +43884,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -43929,8 +43946,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -46074,8 +46092,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -46135,8 +46154,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -47201,8 +47221,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -47262,8 +47283,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -48328,8 +48350,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
@@ -48389,8 +48412,9 @@ exports[`DateRangePicker component
             <div
               class="Input Input--regular"
               data-test="DesignSystem-InputWrapper"
-              role="presentation"
+              role="button"
               style="min-width: 256px;"
+              tabindex="1"
             >
               <div
                 class="Input-icon Input-icon--left"
diff --git a/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap b/core/components/organisms/timePicker/__tests__/__snapshots__/TimePicker.test.tsx.snap
index d4780428f7..b84b414d8d 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:inputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="button"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -41,8 +42,9 @@ exports[`TimePicker component prop:inputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="button"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -70,8 +72,9 @@ exports[`TimePicker component prop:outputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="button"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -99,8 +102,9 @@ exports[`TimePicker component prop:outputFormat snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="button"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -128,8 +132,9 @@ exports[`TimePicker component prop:time snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="button"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -170,8 +175,9 @@ exports[`TimePicker component prop:time snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="button"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -212,8 +218,9 @@ exports[`TimePicker component prop:validators snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="button"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
@@ -241,8 +248,9 @@ exports[`TimePicker component prop:validators snapshot
       <div
         class="Input Input--regular"
         data-test="DesignSystem-InputWrapper"
-        role="presentation"
+        role="button"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"
diff --git a/core/utils/__tests__/__snapshots__/TS.test.tsx.snap b/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
index aebe5bd83c..75fa20cbc2 100644
--- a/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
+++ b/core/utils/__tests__/__snapshots__/TS.test.tsx.snap
@@ -856,8 +856,9 @@ exports[`TS renders children 1`] = `
   <div
     class="Input Input--regular"
     data-test="DesignSystem-InputWrapper"
-    role="presentation"
+    role="button"
     style="min-width: 256px;"
+    tabindex="1"
   >
     <input
       class="Input-input Input-input--regular"
@@ -873,8 +874,9 @@ exports[`TS renders children 1`] = `
     <div
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
-      role="presentation"
+      role="button"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         autocomplete="off"