119915: Fixed bootstrap 5 issues

- Replaced the dropdown icon from DsoEditMetadataEntityFieldComponent from a triangle to an arrow again
- Fixed background color of scrollable select fields always being white, was the only field where this was hardcoded
- Added missing translate pipes on the aria-label attributes from the selectable dropdowns

Author: alexandrevryghem

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-field/dso-edit-metadata-authority-field/dso-edit-metadata-authority-field.component.html

@@ -20,7 +20,7 @@
     </ds-dynamic-onebox>
   }
   @if ((isHierarchicalVocabulary$ | async) || (isScrollableVocabulary$ | async)) {
-    <button class="btn btn-secondary mt-2"
+    <button class="btn btn-secondary w-100 mt-2"
             [title]="enabledFreeTextEditing ? dsoType + '.edit.metadata.edit.buttons.disable-free-text-editing' : dsoType + '.edit.metadata.edit.buttons.enable-free-text-editing' | translate"
             (click)="toggleFreeTextEdition()">
       <i class="fas fa-fw" [ngClass]="enabledFreeTextEditing ? 'fa-lock' : 'fa-unlock'"></i>
@@ -31,7 +31,7 @@
     <div class="mt-2">
       <div class="btn-group w-75">
         <i dsAuthorityConfidenceState
-           class="fas fa-fw p-0 mr-1 mt-auto mb-auto"
+           class="fas fa-fw p-0 me-1 mt-auto mb-auto"
            aria-hidden="true"
            [authorityValue]="mdValue.newValue.confidence"
            [iconMode]="true"

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value-field/dso-edit-metadata-entity-field/dso-edit-metadata-entity-field.component.html

@@ -1,4 +1,4 @@
-<select class="form-control" [(ngModel)]="mdValue?.newValue.value" (ngModelChange)="confirm.emit(false)"
+<select class="form-select" [(ngModel)]="mdValue?.newValue.value" (ngModelChange)="confirm.emit(false)"
         [attr.aria-label]="(dsoType + '.edit.metadata.edit.value') | translate">
   <option *ngFor="let entity of (entities$ | async)" [value]="entity.label === 'none' ? undefined : entity.label">
     {{ entity.label }}

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html

@@ -1,7 +1,7 @@
 <div #sdRef="ngbDropdown" ngbDropdown display="dynamic" placement="bottom-right" class="w-100">
   <div class="position-relative right-addon"
        role="combobox"
-       [attr.aria-label]="model.label"
+       [attr.aria-label]="model.label | translate"
        [attr.aria-owns]="'combobox_' + id + '_listbox'"
        [attr.aria-expanded]="sdRef.isOpen()"
        [attr.aria-activedescendant]="(currentValue | async) ? 'combobox_' + id + '_selected' : null">
@@ -29,11 +29,11 @@
 
   <div #dropdownMenu ngbDropdownMenu
        class="dropdown-menu scrollable-dropdown-menu w-100"
-       [attr.aria-label]="model.placeholder">
+       [attr.aria-label]="model.placeholder | translate">
     <div class="scrollable-menu"
          role="listbox"
          [id]="'combobox_' + id + '_listbox'"
-         [attr.aria-label]="model.placeholder"
+         [attr.aria-label]="model.placeholder | translate"
          infiniteScroll
          [infiniteScrollDistance]="2"
          [infiniteScrollThrottle]="50"

src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.scss

@@ -29,10 +29,6 @@
   padding:  0.70rem 0.70rem 0 0.70rem ;
 }
 
-.scrollable-dropdown-input[readonly]{
-  background-color: #fff;
-}
-
 .toggle-icon {
   padding: 0.7rem 0.7rem 0 0.7rem;
 }