From 5c8448c36e330179c34675407ceec06a563317f0 Mon Sep 17 00:00:00 2001
From: Davide Negretti <davide.negretti@4science.it>
Date: Tue, 5 Oct 2021 16:22:46 +0200
Subject: [PATCH] [CST-4659] Deque accessibility issues - 469993

---
 .../dynamic-scrollable-dropdown.component.html   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
index 0e48b85c78..eb4f60add7 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/scrollable-dropdown/dynamic-scrollable-dropdown.component.html
@@ -1,8 +1,13 @@
 <div #sdRef="ngbDropdown" ngbDropdown display="dynamic" placement="bottom-right" class="w-100">
-  <div class="position-relative right-addon">
+  <div class="position-relative right-addon"
+       role="combobox"
+       [attr.aria-label]="model.label"
+       [attr.aria-owns]="'combobox_' + id + '_listbox'">
     <i ngbDropdownToggle class="position-absolute scrollable-dropdown-toggle"
        aria-hidden="true"></i>
     <input class="form-control"
+           [attr.aria-controls]="'combobox_' + id + '_listbox'"
+           [attr.aria-activedescendant]="'combobox_' + id + '_selected'"
            [attr.aria-label]="model.placeholder"
            [attr.autoComplete]="model.autoComplete"
            [class.is-invalid]="showErrorMessages"
@@ -24,6 +29,8 @@
        aria-expanded="false"
        [attr.aria-label]="model.placeholder">
     <div class="scrollable-menu"
+         role="listbox"
+         [id]="'combobox_' + id + '_listbox'"
          [attr.aria-label]="model.placeholder"
          infiniteScroll
          [infiniteScrollDistance]="2"
@@ -32,7 +39,10 @@
          [scrollWindow]="false">
 
       <button class="dropdown-item disabled" *ngIf="optionsList && optionsList.length == 0">{{'form.no-results' | translate}}</button>
-      <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList" (click)="onSelect(listEntry); sdRef.close()" title="{{ listEntry.display }}">
+      <button class="dropdown-item collection-item text-truncate" *ngFor="let listEntry of optionsList"
+              (click)="onSelect(listEntry); sdRef.close()"
+              title="{{ listEntry.display }}" role="option"
+              [attr.id]="listEntry.display == (currentValue|async) ? ('combobox_' + id + '_selected') : null">
         {{inputFormatter(listEntry)}}
       </button>
       <div class="scrollable-dropdown-loading text-center" *ngIf="loading"><p>{{'form.loading' | translate}}</p></div>
@@ -40,5 +50,3 @@
 
   </div>
 </div>
-
-