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

innovaccer · Aug 17, 2023 · de16c58 · de16c58
1 parent cd9729b
commit de16c58
Show file tree

Hide file tree

Showing 12 changed files with 485 additions and 232 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"