Accessibility fixes for #2149

2 files changed, 7 insertions, 2 deletions

diff --git a/client/src/app/header/header.component.html b/client/src/app/header/header.component.html
index 599861817..1bdfe9858 100644
--- a/client/src/app/header/header.component.html
+++ b/client/src/app/header/header.component.html
@@ -1,5 +1,5 @@
 <input
-  type="text" id="search-video" name="search-video" i18n-placeholder placeholder="Search videos, channels…"
+  type="text" id="search-video" name="search-video" [attr.aria-label]="ariaLabelTextForSearch" i18n-placeholder placeholder="Search videos, channels…"
   [(ngModel)]="searchValue" (keyup.enter)="doSearch()"
 >
 <span (click)="doSearch()" class="icon icon-search"></span>
diff --git a/client/src/app/header/header.component.ts b/client/src/app/header/header.component.ts
index 580535669..5fd122930 100644
--- a/client/src/app/header/header.component.ts
+++ b/client/src/app/header/header.component.ts
@@ -5,6 +5,7 @@ import { getParameterByName } from '../shared/misc/utils'
 import { AuthService, ServerService, Notifier } from '@app/core'
 import { of } from 'rxjs'
 import { ServerConfig } from '@shared/models'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 @Component({
   selector: 'my-header',
@@ -14,6 +15,7 @@ import { ServerConfig } from '@shared/models'
 
 export class HeaderComponent implements OnInit {
   searchValue = ''
+  ariaLabelTextForSearch = ''
 
   private serverConfig: ServerConfig
 
@@ -23,10 +25,13 @@ export class HeaderComponent implements OnInit {
     private auth: AuthService,
     private serverService: ServerService,
     private authService: AuthService,
-    private notifier: Notifier
+    private notifier: Notifier,
+    private i18n: I18n
   ) {}
 
   ngOnInit () {
+    this.ariaLabelTextForSearch = this.i18n('Search videos, channels')
+
     this.router.events
         .pipe(
           filter(e => e instanceof NavigationEnd),