fix: change aria-invalid to only show up when it's true

Author: HedwigJDoets

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

@@ -141,7 +141,7 @@ export function MultiSelection({
                         {...inputProps}
                         aria-labelledby={hasLabel ? inputProps["aria-labelledby"] : undefined}
                         aria-describedby={selector.validation ? options.inputId + "-error" : undefined}
-                        aria-invalid={!!selector.validation}
+                        aria-invalid={selector.validation ? true : undefined}
                     />
                     <InputPlaceholder isEmpty={selectedItems.length <= 0}>{memoizedselectedCaptions}</InputPlaceholder>
                 </div>

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

@@ -94,7 +94,7 @@ export function SingleSelection({
                         placeholder=" "
                         aria-labelledby={hasLabel ? inputProps["aria-labelledby"] : undefined}
                         aria-describedby={selector.validation ? options.inputId + "-error" : undefined}
-                        aria-invalid={!!selector.validation}
+                        aria-invalid={selector.validation ? true : undefined}
                     />
                     <InputPlaceholder
                         isEmpty={!selector.currentId || !selector.caption.render(selectedItem, "label")}