[Select, Multiselect]: Add filter help text features and update tests

ngx-fudis/projects/dev/tsconfig.app.json

@@ -2,8 +2,7 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../../out-tsc/app",
-    "types": []
+    "outDir": "../../out-tsc/app"
   },
   "files": ["src/main.ts", "src/polyfills.ts", "src/app/transloco-loader.ts"],
   "include": ["src/**/*.d.ts"]

ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/common/autocomplete/autocomplete.component.html

@@ -1,8 +1,7 @@
 <input
   #inputRef
   type="text"
-  aria-required="true"
-  class="fudis-form-input fudis-select-autocomplete"
+  class="fudis-select-autocomplete fudis-form-input"
   role="combobox"
   [attr.value]="selectedLabel || null"
   [attr.aria-controls]="id + '-dropdown'"
@@ -11,19 +10,18 @@
   (focus)="_inputFocus($event)"
   (blur)="_inputBlur($event)"
   (click)="_inputClick($event)"
-  (keyup)="!disabled && !control.disabled && _keyUp($event)"
-  (keypress)="!disabled && !control.disabled && _keyPress()"
-  (keydown)="!disabled && !control.disabled && _keyDown($event)"
+  (keyup)="!disabled && _keyUp($event)"
+  (keypress)="!disabled && _keyPress()"
+  (keydown)="!disabled && _keyDown($event)"
   [attr.id]="id"
   autocomplete="off"
   [attr.aria-autocomplete]="'list'"
   [attr.aria-expanded]="dropdownOpen"
-  [attr.aria-disabled]="control.disabled || disabled"
+  [attr.aria-disabled]="disabled || null"
   [attr.placeholder]="placeholder"
-  [attr.required]="required ? true : null"
+  [attr.required]="required || null"
+  [attr.aria-required]="required || null"
   [attr.aria-labelledby]="id + '-label'"
   [attr.aria-describedby]="id + '_guidance'"
-  [attr.aria-invalid]="
-    (control.touched && control.invalid) || (control.touched && invalidState) ? true : null
-  "
+  [attr.aria-invalid]="invalidState || null"
 />

ngx-fudis/projects/ngx-fudis/src/lib/components/form/select/common/autocomplete/autocomplete.component.scss

@@ -6,12 +6,11 @@
 
 .fudis-select-autocomplete {
   @include typography.text-field-input;
-  @include borders.border("1px", "solid", "gray-dark");
   @include borders.border-radius("2px");
 
   box-sizing: border-box;
   display: flex;
-  align-items: baseline;
+  align-items: center;
   justify-content: flex-start;
   padding: spacing.$spacing-xxs spacing.$spacing-lg spacing.$spacing-xxs spacing.$spacing-sm;
   width: 100%;
@@ -28,4 +27,14 @@
   &:focus-visible {
     @include focus.focus-form-field;
   }
+
+  &:not([aria-invalid="true"], [aria-disabled="true"]) {
+    @include borders.border("1px", "solid", "gray-dark");
+  }
+
+  &[aria-disabled="true"] {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }