Accessibility fixes for #2149

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">

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">

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">

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">

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 })
                  })
                )
   }

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>

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>

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),

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>

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">

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 },

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">

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,

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}`