Fix extraAriaLabelledBy prop on Input component

Now, if not have a value, the value will be undefined

Author: Kubit

src/components/input/__tests__/aria.utils.test.ts

@@ -17,6 +17,6 @@ describe('Utils aria', () => {
         errorMessageId,
         state,
       })
-    ).toBe(' 1234 56789');
+    ).toBe(' 56789 1234');
   });
 });

src/components/input/__tests__/input.test.tsx

@@ -56,7 +56,6 @@ function backspace(element) {
 
 const writeText = jest.fn();
 
-// eslint-disable-next-line n/no-unsupported-features/node-builtins
 Object.assign(navigator, {
   clipboard: {
     writeText,
@@ -504,4 +503,13 @@ describe('New Input Component', () => {
     expect(container).toHTMLValidate();
     expect(results).toHaveNoViolations();
   });
+  it('Should  have ariaLabelledby when is set the prop extraAriaLabelledBy', async () => {
+    const extraAriabelledBy = 'extraAriaLabelledBy';
+    const { getByTestId } = renderProvider(
+      <Input {...commonProps} extraAriaLabelledBy={extraAriabelledBy} />
+    );
+
+    const input = getByTestId(`${commonProps.dataTestId}Input`);
+    expect(input).toHaveAttribute('aria-labelledby', extraAriabelledBy);
+  });
 });

src/components/input/inputStandAlone.tsx

@@ -75,7 +75,7 @@ const InputStandAloneComponent = (
         }
         aria-haspopup={props['aria-haspopup']}
         aria-invalid={hasError(state)}
-        aria-labelledby={props.extraAriaLabelledBy}
+        aria-labelledby={props.extraAriaLabelledBy ? props.extraAriaLabelledBy : undefined}
         {...ariaProps}
         aria-describedby={buildAriaDescribedBy({
           ariaDescribedBy: props['aria-describedby'],

src/components/input/utils/aria.utils.ts

@@ -22,12 +22,11 @@ export const buildAriaDescribedBy = ({
   if (ariaDescribedBy) {
     res += ` ${ariaDescribedBy}`;
   }
-  if (helpMessageId && helpMessage) {
-    res += ` ${helpMessageId}`;
-  }
-
   if (errorMessageId && errorMessage && hasError(state)) {
     res += ` ${errorMessageId}`;
   }
+  if (helpMessageId && helpMessage) {
+    res += ` ${helpMessageId}`;
+  }
   return res;
 };