Merge pull request #856 from gympass/ACS-56

🚀 feat: add arial label to input component
gympass · Dec 26, 2024 · c66e9ab · c66e9ab
2 parents 0c838e4 + 1e32e83
commit c66e9ab
Show file tree

Hide file tree

Showing 10 changed files with 162 additions and 735 deletions.
diff --git a/packages/yoga/src/AutoComplete/web/__snapshots__/AutoComplete.test.jsx.snap b/packages/yoga/src/AutoComplete/web/__snapshots__/AutoComplete.test.jsx.snap
diff --git a/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap b/packages/yoga/src/Dropdown/web/__snapshots__/Dropdown.test.jsx.snap
@@ -255,6 +255,7 @@ exports[`<Dropdown /> should match snapshot 1`] = `
             aria-labelledby="downshift-0-label"
             autocomplete="off"
             class="c4 c5"
+            data-testid="input"
             id="downshift-0-input"
             label="Find an activity to love"
             readonly=""
@@ -551,6 +552,7 @@ exports[`<Dropdown /> should match snapshot when disabled 1`] = `
             aria-labelledby="downshift-1-label"
             autocomplete="off"
             class="c3 c4"
+            data-testid="input"
             disabled=""
             id="downshift-1-input"
             label="Find an activity to love"
@@ -850,6 +852,7 @@ exports[`<Dropdown /> should match snapshot when full 1`] = `
             aria-labelledby="downshift-2-label"
             autocomplete="off"
             class="c4 c5"
+            data-testid="input"
             id="downshift-2-input"
             label="Find an activity to love"
             readonly=""
@@ -1168,6 +1171,7 @@ exports[`<Dropdown /> should match snapshot when has a selected value 1`] = `
             aria-labelledby="downshift-3-label"
             autocomplete="off"
             class="c3 c4"
+            data-testid="input"
             disabled=""
             id="downshift-3-input"
             label="Find an activity to love"
@@ -1535,6 +1539,7 @@ exports[`<Dropdown /> should match snapshot with error 1`] = `
             aria-labelledby="downshift-4-label"
             autocomplete="off"
             class="c4 c5"
+            data-testid="input"
             id="downshift-4-input"
             label="Find an activity to love"
             readonly=""

diff --git a/packages/yoga/src/Input/web/Input.jsx b/packages/yoga/src/Input/web/Input.jsx
@@ -101,6 +101,7 @@ const Input = React.forwardRef(
       full,
       helper,
       label,
+      ariaLabel,
       maxLength,
       readOnly,
       style,
@@ -135,14 +136,16 @@ const Input = React.forwardRef(
     const labelA11yId = includeAriaAttributes && a11yId && `${a11yId}-label`;
     let a11yFieldProps;
 
+    const labelAria = ariaLabel || label;
+
     if (includeAriaAttributes) {
       a11yFieldProps = a11yId
         ? {
             ...(hasHelper && { 'aria-describedby': helperA11yId }),
             ...(label && { 'aria-labelledby': labelA11yId }),
           }
         : {
-            ...(label && { 'aria-label': label }),
+            ...(labelAria && { 'aria-label': labelAria }),
           };
       a11yFieldProps['aria-invalid'] = !!error;
     } else {
@@ -186,6 +189,7 @@ const Input = React.forwardRef(
                 maxLength,
               }}
               ref={inputRef}
+              data-testid="input"
               value={value}
               onChange={onChange}
               {...a11yFieldProps}
@@ -259,6 +263,7 @@ Input.propTypes = {
   /** a helper text to be displayed below field */
   helper: string,
   label: string,
+  ariaLabel: string,
   /** maximum length (number of characters) of value */
   maxLength: number,
   readOnly: bool,
@@ -290,7 +295,8 @@ Input.defaultProps = {
   error: undefined,
   full: false,
   helper: undefined,
-  label: 'Label',
+  label: undefined,
+  ariaLabel: undefined,
   maxLength: undefined,
   readOnly: false,
   style: undefined,

diff --git a/packages/yoga/src/Input/web/Input.test.jsx b/packages/yoga/src/Input/web/Input.test.jsx
@@ -191,7 +191,7 @@ describe('<Input />', () => {
     it('should test if clean button is present', () => {
       const { rerender } = render(
         <ThemeProvider>
-          <Input label="Input" />
+          <Input label="Input" ariaLabel="valor aria label" />
         </ThemeProvider>,
       );
 
@@ -206,5 +206,34 @@ describe('<Input />', () => {
 
       expect(screen.queryByRole('button')).not.toBeNull();
     });
+
+    it('should have aria-label', () => {
+      const value = 'aria label value';
+      const { getByTestId } = render(
+        <ThemeProvider>
+          <Input label="Input" value="foo" ariaLabel={value} />
+        </ThemeProvider>,
+      );
+
+      const inputElement = getByTestId('input');
+
+      expect(inputElement).toBeInTheDocument();
+
+      expect(inputElement).toHaveAttribute('aria-label', value);
+    });
+    it('should have label value', () => {
+      const value = 'label value';
+      const { getByTestId } = render(
+        <ThemeProvider>
+          <Input label={value} value="foo" />
+        </ThemeProvider>,
+      );
+
+      const inputElement = getByTestId('input');
+
+      expect(inputElement).toBeInTheDocument();
+
+      expect(inputElement).toHaveAttribute('aria-label', value);
+    });
   });
 });
diff --git a/packages/yoga/src/Input/web/__snapshots__/Email.test.jsx.snap b/packages/yoga/src/Input/web/__snapshots__/Email.test.jsx.snap
@@ -122,32 +122,6 @@ exports[`<Input.Email /> Snapshots should match with default input 1`] = `
   border-color: #231B22;
 }
 
-.c4 {
-  position: relative;
-  padding: 0;
-  max-width: 0;
-  width: auto;
-  height: 0;
-  visibility: hidden;
-  -webkit-transition-property: max-width,padding;
-  transition-property: max-width,padding;
-  font-family: Rubik;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  -webkit-letter-spacing: normal;
-  -moz-letter-spacing: normal;
-  -ms-letter-spacing: normal;
-  letter-spacing: normal;
-  -webkit-transition-duration: 100ms;
-  transition-duration: 100ms;
-}
-
-.c5 {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
 .c3 {
   -webkit-letter-spacing: normal;
   -moz-letter-spacing: normal;
@@ -186,31 +160,18 @@ exports[`<Input.Email /> Snapshots should match with default input 1`] = `
   >
     <fieldset
       class="c1"
-      label="Label"
       value=""
     >
       <input
         aria-invalid="false"
-        aria-label="Label"
         class="c2"
-        label="Label"
+        data-testid="input"
         type="email"
         value=""
       />
       <label
         class="c3"
-      >
-        Label
-      </label>
-      <legend
-        class="c4"
-      >
-        <span
-          class="c5"
-        >
-          Label
-        </span>
-      </legend>
+      />
     </fieldset>
   </div>
 </div>