Modify and improve aria builder utility

Author: Kubit

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

@@ -1,41 +1,22 @@
 import { InputState } from '../types';
-import { buildAriaLabelledBy } from '../utils';
+import { buildAriaDescribedBy } from '../utils';
 
-const extraAriaLabelledBy = '0000';
-const labelId = 'labelId';
 const helpMessage = 'help';
 const helpMessageId = '1234';
 const errorMessage = 'error';
 const errorMessageId = '56789';
 
 describe('Utils aria', () => {
   it('If help message and error', () => {
-    const extraAriaLabelledBy = undefined;
     const state = InputState.ERROR_EMPTY;
     expect(
-      buildAriaLabelledBy({
-        extraAriaLabelledBy,
-        labelId,
+      buildAriaDescribedBy({
         helpMessage,
         helpMessageId,
         errorMessage,
         errorMessageId,
         state,
       })
-    ).toBe('labelId 56789 1234');
-  });
-  it('If help message and extraAriaLabelledBy', () => {
-    const state = InputState.EMPTY;
-    expect(
-      buildAriaLabelledBy({
-        extraAriaLabelledBy,
-        labelId,
-        helpMessage,
-        helpMessageId,
-        errorMessage,
-        errorMessageId,
-        state,
-      })
-    ).toBe('labelId 0000 1234');
+    ).toBe(' 1234 56789');
   });
 });

src/components/input/inputStandAlone.tsx

@@ -31,11 +31,10 @@ import {
   LABEL_TYPE,
   MultipleRef,
 } from './types';
-import { buildAriaDescribedBy, buildAriaLabelledBy, hasError, isDisabled } from './utils';
+import { buildAriaDescribedBy, hasError, isDisabled } from './utils';
 
 const InputStandAloneComponent = (
   {
-    extraAriaLabelledBy,
     styles,
     state,
     helpMessage,
@@ -76,16 +75,12 @@ const InputStandAloneComponent = (
         }
         aria-haspopup={props['aria-haspopup']}
         aria-invalid={hasError(state)}
-        aria-labelledby={buildAriaLabelledBy({
-          labelId,
-          extraAriaLabelledBy,
-          helpMessage: helpMessage?.content as string,
-          helpMessageId,
-          state: state,
-        })}
+        aria-labelledby={props.extraAriaLabelledBy}
         {...ariaProps}
         aria-describedby={buildAriaDescribedBy({
           ariaDescribedBy: props['aria-describedby'],
+          helpMessage: helpMessage?.content as string,
+          helpMessageId,
           errorMessage: errorMessage?.content as string,
           errorMessageId,
           state,

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

@@ -1,53 +1,31 @@
 import { InputState } from '../types';
 import { hasError } from './state.utils';
 
-export const buildAriaLabelledBy = ({
-  extraAriaLabelledBy,
-  labelId,
+export const buildAriaDescribedBy = ({
+  ariaDescribedBy,
   helpMessage,
   helpMessageId,
   errorMessage,
   errorMessageId,
   state,
 }: {
-  labelId: string;
-  extraAriaLabelledBy?: string;
+  ariaDescribedBy?: string;
   helpMessage?: React.ReactNode;
   helpMessageId?: string;
   errorMessage?: string;
   errorMessageId?: string;
   state?: InputState;
-}): string => {
-  let res = labelId;
-  if (extraAriaLabelledBy) {
-    res += ` ${extraAriaLabelledBy}`;
-  }
-  if (errorMessageId && errorMessage && hasError(state)) {
-    res += ` ${errorMessageId}`;
-  }
-  if (helpMessageId && helpMessage) {
-    res += ` ${helpMessageId}`;
-  }
-  return res;
-};
-
-export const buildAriaDescribedBy = ({
-  ariaDescribedBy,
-  errorMessage,
-  errorMessageId,
-  state,
-}: {
-  ariaDescribedBy?: string;
-  errorMessage?: string;
-  errorMessageId?: string;
-  state?: InputState;
 }): string | undefined => {
   if (!ariaDescribedBy && !errorMessage) return;
 
   let res: string = '';
   if (ariaDescribedBy) {
     res += ` ${ariaDescribedBy}`;
   }
+  if (helpMessageId && helpMessage) {
+    res += ` ${helpMessageId}`;
+  }
+
   if (errorMessageId && errorMessage && hasError(state)) {
     res += ` ${errorMessageId}`;
   }