refactor: rewrite validation id handling to be less tightly coupled

Author: HedwigJDoets

packages/pluggableWidgets/combobox-web/src/components/ComboboxWrapper.tsx

@@ -14,7 +14,7 @@ interface ComboboxWrapperProps extends PropsWithChildren {
     validation?: string;
     isLoading: boolean;
     isMultiselectActive?: boolean;
-    inputId: string;
+    errorId?: string;
 }
 export const ComboboxWrapper = forwardRef(
     (props: ComboboxWrapperProps, ref: RefObject<HTMLDivElement>): ReactElement => {
@@ -27,7 +27,7 @@ export const ComboboxWrapper = forwardRef(
             children,
             isLoading,
             isMultiselectActive,
-            inputId
+            errorId
         } = props;
         const { id, onClick } = getToggleButtonProps();
 
@@ -57,7 +57,7 @@ export const ComboboxWrapper = forwardRef(
                         </div>
                     )}
                 </div>
-                {validation && <ValidationAlert referenceId={inputId + "-error"}>{validation}</ValidationAlert>}
+                {validation && <ValidationAlert referenceId={errorId}>{validation}</ValidationAlert>}
             </Fragment>
         );
     }

packages/pluggableWidgets/combobox-web/src/components/MultiSelection/MultiSelection.tsx

@@ -86,6 +86,7 @@ export function MultiSelection({
         readOnly: selector.readOnly
     });
 
+    const errorId = options.inputId ? options.inputId + "-validation-message" : undefined;
     return (
         <Fragment>
             <ComboboxWrapper
@@ -96,7 +97,7 @@ export function MultiSelection({
                 validation={selector.validation}
                 isLoading={lazyLoading && selector.options.isLoading}
                 isMultiselectActive={selectedItems?.length > 0}
-                inputId={options.inputId}
+                errorId={errorId}
             >
                 <div
                     className={classNames(
@@ -140,7 +141,7 @@ export function MultiSelection({
                         placeholder=" "
                         {...inputProps}
                         aria-labelledby={hasLabel ? inputProps["aria-labelledby"] : undefined}
-                        aria-describedby={selector.validation ? options.inputId + "-error" : undefined}
+                        aria-describedby={selector.validation ? errorId : undefined}
                         aria-invalid={selector.validation ? true : undefined}
                     />
                     <InputPlaceholder isEmpty={selectedItems.length <= 0}>{memoizedselectedCaptions}</InputPlaceholder>

packages/pluggableWidgets/combobox-web/src/components/SingleSelection/SingleSelection.tsx

@@ -29,6 +29,7 @@ export function SingleSelection({
         highlightedIndex
     } = useDownshiftSingleSelectProps(selector, options, a11yConfig.a11yStatusMessage);
     const inputRef = useRef<HTMLInputElement>(null);
+    const errorId = options.inputId ? options.inputId + "-validation-message" : undefined;
     const lazyLoading = selector.lazyLoading ?? false;
     const { onScroll } = useLazyLoading({
         hasMoreItems: selector.options.hasMore ?? false,
@@ -78,7 +79,7 @@ export function SingleSelection({
                 getToggleButtonProps={getToggleButtonProps}
                 validation={selector.validation}
                 isLoading={lazyLoading && selector.options.isLoading}
-                inputId={options.inputId}
+                errorId={errorId}
             >
                 <div
                     className={classNames("widget-combobox-selected-items", {
@@ -93,7 +94,7 @@ export function SingleSelection({
                         {...inputProps}
                         placeholder=" "
                         aria-labelledby={hasLabel ? inputProps["aria-labelledby"] : undefined}
-                        aria-describedby={selector.validation ? options.inputId + "-error" : undefined}
+                        aria-describedby={selector.validation ? errorId : undefined}
                         aria-invalid={selector.validation ? true : undefined}
                     />
                     <InputPlaceholder