From f9ad862af44fe1c88a621ce384cb5c3fdbc09503 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Thu, 27 Jul 2023 15:53:42 +0200
Subject: [PATCH] feat: improve accessibility

---
 .../dropdown-multiselect.component.html          | 16 ++++++++--------
 .../dropdown-multiselect.component.ts            | 15 +++++++++++----
 libs/ui/inputs/src/lib/ui-inputs.module.ts       |  2 --
 3 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html b/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html
index b77d0c6061..beb7d17f59 100644
--- a/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html
+++ b/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html
@@ -59,16 +59,18 @@
     #overlayContainer
   >
     <div
-      class="border border-gray-300 rounded mb-2 mx-2 p-2 min-h-[44px] flex flex-row flex-wrap gap-2"
+      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
     >
       <button
         type="button"
         *ngFor="let selected of selectedChoices"
         [title]="selected.label"
-        class="max-w-full bg-main text-white rounded pr-[7px] pl-2.5 flex gap-2 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity"
+        class="max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1"
         (click)="select(selected, false)"
       >
-        <div class="text-sm truncate leading-[26px]">{{ selected.label }}</div>
+        <div class="text-sm truncate leading-[26px] px-2">
+          {{ selected.label }}
+        </div>
         <div
           class="flex items-center justify-center rounded-full bg-white text-main h-[13px] w-[13px] pt-px -mt-px shrink-0"
         >
@@ -78,16 +80,14 @@
 
       <div *ngIf="allowSearch" class="w-[50%] relative grow shrink">
         <input
-          class="w-full px-1 truncate text-[14px] outline-0 overlaySearchInput"
-          cdkTrapFocus
-          [cdkTrapFocusAutoCapture]="true"
-          (focus)="scrollToTopOfModal()"
+          #searchFieldInput
+          class="w-full px-2 truncate text-[14px] h-full overlaySearchInput focus:outline-none"
           [(ngModel)]="searchInputValue"
           [placeholder]="'multiselect.filter.placeholder' | translate"
         />
         <button
           *ngIf="!!searchInputValue"
-          class="absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input"
+          class="absolute top-1/2 -translate-y-1/2 right-0 px-[7px] leading-tight clear-search-input mr-2"
           (click)="clearSearchInputValue($event)"
         >
           <mat-icon class="!h-[10px] !w-[12px] text-[12px]"> close </mat-icon>
diff --git a/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.ts b/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.ts
index c6cef4f83a..9ff6a134d1 100644
--- a/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.ts
+++ b/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.ts
@@ -36,6 +36,8 @@ export class DropdownMultiselectComponent {
   @ViewChild(CdkConnectedOverlay) overlay: CdkConnectedOverlay
   @ViewChild('overlayContainer', { read: ElementRef })
   overlayContainer: ElementRef
+  @ViewChild('searchFieldInput')
+  searchFieldInput: ElementRef<HTMLInputElement>
   @ViewChildren('checkBox', { read: ElementRef })
   checkboxes: QueryList<ElementRef>
   overlayPositions: ConnectedPosition[] = [
@@ -86,6 +88,12 @@ export class DropdownMultiselectComponent {
 
   constructor(private scrollStrategies: ScrollStrategyOptions) {}
 
+  private setFocus() {
+    setTimeout(() => {
+      this.searchFieldInput.nativeElement.focus()
+    }, 0)
+  }
+
   openOverlay() {
     this.overlayWidth =
       this.overlayOrigin.elementRef.nativeElement.getBoundingClientRect()
@@ -94,6 +102,8 @@ export class DropdownMultiselectComponent {
       ? `${this.maxRows * 29 + 60}px`
       : 'none'
     this.overlayOpen = true
+    this.setFocus()
+
     // this will wait for the checkboxes to be referenced and the overlay to be attached
     return Promise.all([
       this.overlay.attach.pipe(take(1)).toPromise(),
@@ -182,9 +192,6 @@ export class DropdownMultiselectComponent {
   clearSearchInputValue(event: Event) {
     this.searchInputValue = ''
     event.stopPropagation()
-  }
-
-  scrollToTopOfModal() {
-    this.overlayContainer.nativeElement.scroll(0, -40)
+    this.setFocus()
   }
 }
diff --git a/libs/ui/inputs/src/lib/ui-inputs.module.ts b/libs/ui/inputs/src/lib/ui-inputs.module.ts
index 72010c7476..1aeb758cc5 100644
--- a/libs/ui/inputs/src/lib/ui-inputs.module.ts
+++ b/libs/ui/inputs/src/lib/ui-inputs.module.ts
@@ -35,7 +35,6 @@ import {
 import { CheckToggleComponent } from './check-toggle/check-toggle.component'
 import { CopyTextButtonComponent } from './copy-text-button/copy-text-button.component'
 import { MatTooltipModule } from '@angular/material/tooltip'
-import { A11yModule } from '@angular/cdk/a11y'
 
 @NgModule({
   declarations: [
@@ -76,7 +75,6 @@ import { A11yModule } from '@angular/cdk/a11y'
     OverlayModule,
     MatCheckboxModule,
     MatTooltipModule,
-    A11yModule,
   ],
   exports: [
     DropdownSelectorComponent,