From 7738273b808f0ff1494f18c4cc13553505e6ac6d Mon Sep 17 00:00:00 2001
From: Rigel Kent <sendmemail@rigelk.eu>
Date: Fri, 10 Jan 2020 19:50:48 +0100
Subject: [PATCH] Accessibility fixes for #2149

---
 .../+admin/users/user-edit/user-edit.component.html   |  2 +-
 .../my-account-change-email.component.html            |  2 +-
 .../my-account-change-password.component.html         |  6 +++---
 .../+register/register-step-user.component.html       |  2 +-
 .../video-channel-videos.component.ts                 |  2 +-
 .../app/+video-channels/video-channels.component.html |  2 +-
 client/src/app/header/header.component.html           |  2 +-
 client/src/app/header/header.component.ts             |  7 ++++++-
 client/src/app/login/login.component.html             |  2 +-
 .../app/reset-password/reset-password.component.html  |  4 ++--
 client/src/app/shared/images/global-icon.component.ts |  4 ++--
 .../app/shared/video/video-thumbnail.component.html   |  4 ++--
 client/src/sass/primeng-custom.scss                   |  1 +
 server/lib/client-html.ts                             | 11 +++++++++--
 14 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html
index 6282d48a4..4ff4d0d12 100644
--- a/client/src/app/+admin/users/user-edit/user-edit.component.html
+++ b/client/src/app/+admin/users/user-edit/user-edit.component.html
@@ -30,7 +30,7 @@
   <div class="form-group" *ngIf="isCreation()">
     <label i18n for="password">Password</label>
     <input
-      type="password" id="password"
+      type="password" id="password" autocomplete="new-password"
       formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
     >
     <div *ngIf="formErrors.password" class="form-error">
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
index 5492cdf22..76886c73e 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-email/my-account-change-email.component.html
@@ -24,7 +24,7 @@
 
   <div class="form-group">
     <input
-      type="password" id="password" i18n-placeholder placeholder="Your password"
+      type="password" id="password" i18n-placeholder placeholder="Your password" autocomplete="off"
       formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
     >
     <div *ngIf="formErrors['password']" class="form-error">
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
index a39061ee3..cec70c6b5 100644
--- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
+++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
@@ -4,7 +4,7 @@
 
   <label i18n for="current-password">Change password</label>
   <input
-    type="password" id="current-password" i18n-placeholder placeholder="Current password"
+    type="password" id="current-password" i18n-placeholder placeholder="Current password" autocomplete="current-password"
     formControlName="current-password" [ngClass]="{ 'input-error': formErrors['current-password'] }"
   >
   <div *ngIf="formErrors['current-password']" class="form-error">
@@ -12,7 +12,7 @@
   </div>
 
   <input
-    type="password" id="new-password" i18n-placeholder placeholder="New password"
+    type="password" id="new-password" i18n-placeholder placeholder="New password" autocomplete="new-password"
     formControlName="new-password" [ngClass]="{ 'input-error': formErrors['new-password'] }"
   >
   <div *ngIf="formErrors['new-password']" class="form-error">
@@ -20,7 +20,7 @@
   </div>
 
   <input
-    type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password"
+    type="password" id="new-confirmed-password" i18n-placeholder placeholder="Confirm new password" autocomplete="new-password"
     formControlName="new-confirmed-password"
   >
   <div *ngIf="formErrors['new-confirmed-password']" class="form-error">
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index 4381702ae..a2a657660 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -51,7 +51,7 @@
   <div class="form-group">
     <label for="password" i18n>Password</label>
     <input
-      type="password" id="password" i18n-placeholder placeholder="Password"
+      type="password" id="password" i18n-placeholder placeholder="Password" autocomplete="new-password"
       formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
     >
     <div *ngIf="formErrors.password" class="form-error">
diff --git a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
index c1dc25aaf..f4fe14662 100644
--- a/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
+++ b/client/src/app/+video-channels/video-channel-videos/video-channel-videos.component.ts
@@ -72,7 +72,7 @@ export class VideoChannelVideosComponent extends AbstractVideoList implements On
                .getVideoChannelVideos(this.videoChannel, newPagination, this.sort)
                .pipe(
                  tap(({ total }) => {
-                   this.titlePage = this.i18n('Published {{total}} videos', { total })
+                   this.titlePage = this.i18n(`{total, plural, =1 {Published 1 video} other {Published ${total} videos}}`, { total })
                  })
                )
   }
diff --git a/client/src/app/+video-channels/video-channels.component.html b/client/src/app/+video-channels/video-channels.component.html
index 8ab79526d..065fc2c04 100644
--- a/client/src/app/+video-channels/video-channels.component.html
+++ b/client/src/app/+video-channels/video-channels.component.html
@@ -20,7 +20,7 @@
             <my-subscribe-button #subscribeButton [videoChannels]="[videoChannel]"></my-subscribe-button>
           </div>
         </div>
-        <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>
+        <div class="actor-followers" i18n>{videoChannel.followersCount, plural, =1 {1 subscriber} other {{{ videoChannel.followersCount }} subscribers}}</div>
 
         <a [routerLink]="[ '/accounts', videoChannel.ownerBy ]" i18n-title title="Go the owner account page" class="actor-owner">
           <span i18n>Created by {{ videoChannel.ownerBy }}</span>
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),
diff --git a/client/src/app/login/login.component.html b/client/src/app/login/login.component.html
index 162f44ded..6c6a41c4a 100644
--- a/client/src/app/login/login.component.html
+++ b/client/src/app/login/login.component.html
@@ -51,7 +51,7 @@
       <label i18n for="password">Password</label>
       <div>
         <input
-          type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2"
+          type="password" name="password" id="password" i18n-placeholder placeholder="Password" required tabindex="2" autocomplete="current-password"
           formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
         >
         <a i18n class="forgot-password-button" (click)="openForgotPasswordModal()" title="Click here to reset your password">I forgot my password</a>
diff --git a/client/src/app/reset-password/reset-password.component.html b/client/src/app/reset-password/reset-password.component.html
index 8398be091..af30af4a0 100644
--- a/client/src/app/reset-password/reset-password.component.html
+++ b/client/src/app/reset-password/reset-password.component.html
@@ -7,7 +7,7 @@
     <div class="form-group">
       <label i18n for="password">Password</label>
       <input
-        type="password" name="password" id="password" i18n-placeholder placeholder="Password" required
+        type="password" name="password" id="password" i18n-placeholder placeholder="Password" required autocomplete="new-password"
         formControlName="password" [ngClass]="{ 'input-error': formErrors['password'] }"
       >
       <div *ngIf="formErrors.password" class="form-error">
@@ -18,7 +18,7 @@
     <div class="form-group">
       <label i18n for="password-confirm">Confirm password</label>
       <input
-        type="password" name="password-confirm" id="password-confirm" i18n-placeholder placeholder="Confirmed password" required
+        type="password" name="password-confirm" id="password-confirm" i18n-placeholder placeholder="Confirmed password" required autocomplete="new-password"
         formControlName="password-confirm" [ngClass]="{ 'input-error': formErrors['password-confirm'] }"
       >
       <div *ngIf="formErrors['password-confirm']" class="form-error">
diff --git a/client/src/app/shared/images/global-icon.component.ts b/client/src/app/shared/images/global-icon.component.ts
index 17186cff4..806aca347 100644
--- a/client/src/app/shared/images/global-icon.component.ts
+++ b/client/src/app/shared/images/global-icon.component.ts
@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, ElementRef, Input, OnInit } from '@angular/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
+import { I18n } from '@ngx-translate/i18n-polyfill'
 
 const icons = {
   'add': require('!!raw-loader?!../../../assets/images/global/add.svg'),
@@ -70,8 +71,7 @@ export class GlobalIconComponent implements OnInit {
   ) { }
 
   async ngOnInit () {
-    const nativeElement = this.el.nativeElement
-
+    const nativeElement = this.el.nativeElement as HTMLElement
     nativeElement.innerHTML = await this.hooks.wrapFun(
       this.getSVGContent.bind(this),
       { name: this.iconName },
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index 7e71a390b..b63085b81 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,8 +1,8 @@
 <a
-  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
+  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [title]="video.name"
   class="video-thumbnail"
 >
-  <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
+  <img alt="" [attr.aria-label]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
 
   <div *ngIf="displayWatchLaterPlaylist" class="video-thumbnail-actions-overlay">
     <ng-container *ngIf="inWatchLaterPlaylist !== true">
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 9aa4d980c..238cb8454 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -8,6 +8,7 @@
   font-family: 'Glyphicons Halflings';
   text-decoration: none !important;
   color: var(--mainForegroundColor) !important;
+  font-display: swap;
 }
 
 my-edit-button,
diff --git a/server/lib/client-html.ts b/server/lib/client-html.ts
index e59505614..1d8a08ed0 100644
--- a/server/lib/client-html.ts
+++ b/server/lib/client-html.ts
@@ -26,7 +26,9 @@ export class ClientHtml {
   }
 
   static async getDefaultHTMLPage (req: express.Request, res: express.Response, paramLang?: string) {
-    const html = await ClientHtml.getIndexHTML(req, res, paramLang)
+    const html = paramLang
+      ? await ClientHtml.getIndexHTML(req, res, paramLang)
+      : await ClientHtml.getIndexHTML(req, res)
 
     let customHtml = ClientHtml.addTitleTag(html)
     customHtml = ClientHtml.addDescriptionTag(customHtml)
@@ -98,6 +100,7 @@ export class ClientHtml {
 
     let html = buffer.toString()
 
+    if (paramLang) html = ClientHtml.addHtmlLang(html, paramLang)
     html = ClientHtml.addCustomCSS(html)
     html = await ClientHtml.addAsyncPluginCSS(html)
 
@@ -106,7 +109,7 @@ export class ClientHtml {
     return html
   }
 
-  private static getIndexPath (req: express.Request, res: express.Response, paramLang?: string) {
+  private static getIndexPath (req: express.Request, res: express.Response, paramLang: string) {
     let lang: string
 
     // Check param lang validity
@@ -129,6 +132,10 @@ export class ClientHtml {
     return join(__dirname, '../../../client/dist/' + buildFileLocale(lang) + '/index.html')
   }
 
+  private static addHtmlLang (htmlStringPage: string, paramLang: string) {
+    return htmlStringPage.replace('<html>', `<html lang="${paramLang}">`)
+  }
+
   private static addTitleTag (htmlStringPage: string, title?: string) {
     let text = title || CONFIG.INSTANCE.NAME
     if (title) text += ` - ${CONFIG.INSTANCE.NAME}`