fix(input): update input wrapper focus on padding click

innovaccer · Jul 25, 2023 · 59f6cfc · 59f6cfc
1 parent 48f31a6
commit 59f6cfc
Show file tree

Hide file tree

Showing 12 changed files with 254 additions and 1 deletion.
diff --git a/core/components/atoms/input/Input.tsx b/core/components/atoms/input/Input.tsx
@@ -230,6 +230,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>((props, forw
       onClick={() => ref.current?.focus()}
       role="presentation"
       onBlur={() => setIsInputBlank(!ref.current?.value)}
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, jsx-a11y/tabindex-no-positive*/
+      tabIndex={1}
     >
       {inlineLabel && (
         <div className="Input-inlineLabel">

diff --git a/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap b/core/components/atoms/input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -34,6 +35,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left Input-icon--inputBlank"
@@ -69,6 +71,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -93,6 +96,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -128,6 +132,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--large"
@@ -150,6 +155,7 @@ exports[`Input component
       class="Input Input--large"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <div
         class="Input-inlineLabel"
@@ -183,6 +189,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -205,6 +212,7 @@ exports[`Input component
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <div
         class="Input-inlineLabel"
@@ -238,6 +246,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--tiny"
@@ -260,6 +269,7 @@ exports[`Input component
       class="Input Input--tiny"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <div
         class="Input-inlineLabel"
@@ -292,6 +302,7 @@ exports[`Input component
       class="Input Input--regular"
       data-test="DesignSystem-InputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -315,6 +326,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -338,6 +350,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -361,6 +374,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -386,6 +400,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -422,6 +437,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -447,6 +463,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"
@@ -483,6 +500,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -506,6 +524,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left Input-icon--error"
@@ -540,6 +559,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <input
         class="Input-input Input-input--regular"
@@ -565,6 +585,7 @@ exports[`Input component
       data-test="DesignSystem-InputWrapper"
       role="presentation"
       style="min-width: 256px;"
+      tabindex="1"
     >
       <div
         class="Input-icon Input-icon--left"

diff --git a/core/components/atoms/metricInput/MetricInput.tsx b/core/components/atoms/metricInput/MetricInput.tsx
@@ -257,7 +257,15 @@ export const MetricInput = React.forwardRef<HTMLInputElement, MetricInputProps>(
   const actionButtonSize = size === 'large' ? 'regular' : 'tiny';
 
   return (
-    <div data-test="DesignSystem-MetricInputWrapper" className={classes} onKeyDown={onKeyDown} role="presentation">
+    <div
+      data-test="DesignSystem-MetricInputWrapper"
+      className={classes}
+      onKeyDown={onKeyDown}
+      role="presentation"
+      onClick={() => ref.current?.focus()}
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex, jsx-a11y/tabindex-no-positive*/
+      tabIndex={1}
+    >
       {icon && (
         <Icon
           data-test="DesignSystem-MetricInput--icon"

diff --git a/core/components/atoms/metricInput/__tests__/MetricInput.test.tsx b/core/components/atoms/metricInput/__tests__/MetricInput.test.tsx
@@ -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
@@ -9,6 +9,7 @@ exports[`MetricInput component
       class="MetricInput MetricInput--regular"
       data-test="DesignSystem-MetricInputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <i
         class="material-icons material-icons-round Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
@@ -78,6 +79,7 @@ exports[`MetricInput component
       class="MetricInput MetricInput--regular MetricInput--error"
       data-test="DesignSystem-MetricInputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <i
         class="material-icons material-icons-round Icon Icon--subtle MetricInput-icon MetricInput-icon--regular"
@@ -147,6 +149,7 @@ exports[`MetricInput component
       class="MetricInput MetricInput--large"
       data-test="DesignSystem-MetricInputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <span
         class="Text Text--subtle Text--large mr-5"
@@ -221,6 +224,7 @@ exports[`MetricInput component
       class="MetricInput MetricInput--regular"
       data-test="DesignSystem-MetricInputWrapper"
       role="presentation"
+      tabindex="1"
     >
       <span
         class="Text Text--subtle Text--regular mr-4"

diff --git a/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap b/core/components/molecules/inputMask/__tests__/__snapshots__/InputMask.test.tsx.snap
@@ -14,6 +14,7 @@ exports[`Input Mask component
         data-test="DesignSystem-InputWrapper"
         role="presentation"
         style="min-width: 256px;"
+        tabindex="1"
       >
         <input
           autocomplete="off"

diff --git a/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/core/components/molecules/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap
@@ -147,6 +147,7 @@ exports[`Pagination component
         class="MetricInput MetricInput--regular Pagination-MetricInput"
         data-test="DesignSystem-MetricInputWrapper"
         role="presentation"
+        tabindex="1"
       >
         <input
           class="MetricInput-input MetricInput-input--regular"