Improve simple/advanced search accessibility

client/src/app/shared/shared-forms/advanced-input-filter.component.html

@@ -1,9 +1,8 @@
-<div class="input-group has-clear" ngbDropdown placement="bottom-left auto" container="body">
+<div class="input-group has-clear flex-nowrap" ngbDropdown placement="bottom-left auto" container="body">
 
   <ng-container *ngIf="hasFilters()">
-    <div class="input-group-text c-hand" ngbDropdownToggle>
+    <button class="input-group-text c-hand" title="Open quick filters" i18n-title ngbDropdownToggle>
-      <span class="caret" aria-haspopup="menu" role="button"></span>
+    </button>
-    </div>
 
     <div role="menu" ngbDropdownMenu>
       <ng-container *ngFor="let group of filters">
@@ -23,7 +22,10 @@
     class="last-in-group"
     [(ngModel)]="searchValue"
     (keyup)="onInputSearch($event)"
+    #input
   >
 
-  <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter()"></my-global-icon>
+  <button class="p-0 border-0 form-control-clear" title="Clear filter" i18n-title (click)="onResetTableFilter(); input.focus()">
+    <my-global-icon iconName="cross" ></my-global-icon>
+  </button>
 </div>

client/src/app/shared/shared-forms/advanced-input-filter.component.scss

@@ -1,6 +1,10 @@
 @use '_variables' as *;
 @use '_mixins' as *;
 
+.input-group {
+  width: fit-content;
+}
+
 .dropdown-item {
   font-size: 14px;
 }
@@ -13,15 +17,23 @@ input {
   background-color: transparent;
 }
 
+.form-control-clear my-global-icon {
+  display: block;
+
+  ::ng-deep svg {
+    vertical-align: inherit;
+  }
+}
+
 my-global-icon {
-  $size: 18px;
+  $size: 19px;
   $margin: 2px;
 
   @include margin-right($margin);
 
   opacity: 1;
-  width: 18px;
+  width: $size;
-  height: 18px;
+  height: $size;
 
   &.no-visible {
     @include margin-right($size + $margin);

client/src/app/shared/shared-main/misc/simple-search-input.component.html

@@ -1,13 +1,20 @@
 <div class="root">
-  <div class="input-group has-clear">
+  <div class="input-group has-clear" [hidden]="!inputShown">
-    <input #ref type="text" class="last-in-group"
+    <input
-      [(ngModel)]="value" (keyup.enter)="sendSearch()" [hidden]="!inputShown" [name]="name" [placeholder]="placeholder"
+      #ref type="text" class="last-in-group"
+      [(ngModel)]="value" (keyup.enter)="sendSearch()" [name]="name" [placeholder]="placeholder"
     >
 
-    <my-global-icon iconName="cross" role="button" class="form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()"></my-global-icon>
+    <button class="border-0 p-0 form-control-clear" title="Clear filter" i18n-title (click)="onResetFilter()">
+      <my-global-icon iconName="cross"></my-global-icon>
+    </button>
   </div>
 
-  <my-global-icon iconName="search" aria-label="Search" role="button" (click)="onIconClick()" [title]="iconTitle"></my-global-icon>
+  <button class="border-0 p-0 search-button" [title]="iconTitle" (click)="onIconClick()">
+    <my-global-icon iconName="search"></my-global-icon>
+  </button>
 
-  <my-global-icon *ngIf="!alwaysShow && inputShown" i18n-title title="Close search" iconName="cross" (click)="hideInput()"></my-global-icon>
+  <button *ngIf="!alwaysShow && inputShown" class="border-0 p-0 close-search-button" i18n-title title="Close search" (click)="hideInput()">
+    <my-global-icon iconName="cross"></my-global-icon>
+  </button>
 </div>

client/src/app/shared/shared-main/misc/simple-search-input.component.scss

@@ -5,16 +5,18 @@
   display: flex;
 }
 
-.root > my-global-icon {
+.search-button,
+.close-search-button {
   @include margin-left(10px);
 
-  height: 28px;
+  my-global-icon {
-  width: 28px;
+    height: 28px;
-  cursor: pointer;
+    width: 28px;
-  color: pvar(--mainColor);
+    color: pvar(--mainColor);
 
-  &:hover {
+    &:hover {
-    color: pvar(--mainHoverColor);
+      color: pvar(--mainHoverColor);
+    }
   }
 }
 
@@ -26,6 +28,7 @@ input {
   }
 }
 
-.input-group > my-global-icon {
+.form-control-clear my-global-icon {
   width: 20px;
+  height: 20px;
 }

client/src/app/shared/shared-main/misc/simple-search-input.component.ts

@@ -17,10 +17,9 @@ export class SimpleSearchInputComponent implements OnInit {
   @Output() inputDisplayChanged = new EventEmitter<boolean>()
 
   value = ''
+  lastSearch = ''
   inputShown: boolean
 
-  private hasAlreadySentSearch = false
-
   ngOnInit () {
     if (this.isInputShown()) this.showInput(false)
   }
@@ -64,13 +63,16 @@ export class SimpleSearchInputComponent implements OnInit {
   }
 
   sendSearch () {
-    this.hasAlreadySentSearch = true
+    if (this.lastSearch === this.value) return
+
+    this.lastSearch = this.value
     this.searchChanged.emit(this.value)
   }
 
   onResetFilter () {
     this.value = ''
+    this.input.nativeElement.focus()
 
-    if (this.hasAlreadySentSearch) this.sendSearch()
+    this.sendSearch()
   }
 }

client/src/app/shared/shared-video-miniature/videos-list.component.ts

@@ -113,6 +113,8 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
 
   private videoRequests = new Subject<{ reset: boolean, obs: Observable<ResultList<Video>> }>()
 
+  private alreadyDoneSearch = false
+
   constructor (
     private notifier: Notifier,
     private authService: AuthService,
@@ -403,8 +405,9 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
 
   private subscribeToSearchChange () {
     this.routeSub = this.route.queryParams.subscribe(param => {
-      if (!param['search']) return
+      if (!this.alreadyDoneSearch && !param['search']) return
 
+      this.alreadyDoneSearch = true
       this.filters.load({ search: param['search'] })
       this.onFiltersChanged(true)
     })

client/src/sass/bootstrap.scss

@@ -355,17 +355,14 @@ body {
 
 .has-clear {
   input {
-    @include padding-right(1.5rem !important);
+    padding-inline-end: 30px !important;
   }
 
   .form-control-clear {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 95%;
-    font-size: 14px;
     position: absolute;
     right: .5rem;
+    top: 0;
+    bottom: 0;
     opacity: 0.4;
 
     &:hover {