fix(input): update input focus when wrapper is clicked

innovaccer · Sep 28, 2023 · a72578d · a72578d
1 parent aae5d8a
commit a72578d
Show file tree

Hide file tree

Showing 14 changed files with 496 additions and 234 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"