Improve frontend accessibility

In particular checkboxes, likes/dislikes, share button, video thumbnails
and help buttons

8 files changed, 97 insertions, 4 deletions

diff --git a/client/src/app/shared/forms/peertube-checkbox.component.html b/client/src/app/shared/forms/peertube-checkbox.component.html
new file mode 100644
index 000000000..820e7a621
--- /dev/null
+++ b/client/src/app/shared/forms/peertube-checkbox.component.html
@@ -0,0 +1,9 @@
+<div class="form-group">
+  <label class="form-group-checkbox">
+    <input type="checkbox" [(ngModel)]="checked" (ngModelChange)="onModelChange()" [id]="inputName" [disabled]="isDisabled" />
+    <span role="checkbox" [attr.aria-checked]="checked"></span>
+    <span *ngIf="labelText">{{ labelText }}</span>
+  </label>
+
+  <my-help *ngIf="helpHtml" tooltipPlacement="top" helpType="custom" i18n-customHtml [customHtml]="helpHtml"></my-help>
+</div>
\ No newline at end of file
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.scss b/client/src/app/shared/forms/peertube-checkbox.component.scss
new file mode 100644
index 000000000..cbc50dc96
--- /dev/null
+++ b/client/src/app/shared/forms/peertube-checkbox.component.scss
@@ -0,0 +1,23 @@
+@import '_variables';
+@import '_mixins';
+
+.form-group {
+  display: flex;
+  align-items: center;
+
+  .form-group-checkbox {
+    display: flex;
+
+    span {
+      font-weight: $font-regular;
+      margin: 0;
+    }
+
+    input {
+      @include peertube-checkbox(1px);
+
+      width: 10px;
+      margin-right: 10px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/client/src/app/shared/forms/peertube-checkbox.component.ts b/client/src/app/shared/forms/peertube-checkbox.component.ts
new file mode 100644
index 000000000..c626c4c5d
--- /dev/null
+++ b/client/src/app/shared/forms/peertube-checkbox.component.ts
@@ -0,0 +1,45 @@
+import { Component, forwardRef, Input } from '@angular/core'
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
+
+@Component({
+  selector: 'my-peertube-checkbox',
+  styleUrls: [ './peertube-checkbox.component.scss' ],
+  templateUrl: './peertube-checkbox.component.html',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => PeertubeCheckboxComponent),
+      multi: true
+    }
+  ]
+})
+export class PeertubeCheckboxComponent implements ControlValueAccessor {
+  @Input() checked = false
+  @Input() inputName: string
+  @Input() labelText: string
+  @Input() helpHtml: string
+
+  isDisabled = false
+
+  propagateChange = (_: any) => { /* empty */ }
+
+  writeValue (checked: boolean) {
+    this.checked = checked
+  }
+
+  registerOnChange (fn: (_: any) => void) {
+    this.propagateChange = fn
+  }
+
+  registerOnTouched () {
+    // Unused
+  }
+
+  onModelChange () {
+    this.propagateChange(this.checked)
+  }
+
+  setDisabledState (isDisabled: boolean) {
+    this.isDisabled = isDisabled
+  }
+}
diff --git a/client/src/app/shared/misc/help.component.html b/client/src/app/shared/misc/help.component.html
index f2b6eca33..1c3863e52 100644
--- a/client/src/app/shared/misc/help.component.html
+++ b/client/src/app/shared/misc/help.component.html
@@ -13,10 +13,14 @@
 </ng-template>
 
 <span
+  role="button"
   class="help-tooltip-button"
   title="Get help"
   i18n-title
+  [attr.aria-pressed]="isPopoverOpened"
   [popover]="tooltipTemplate"
   [placement]="tooltipPlacement"
   [outsideClick]="true"
+  (onHidden)="onPopoverHidden()"
+  (onShown)="onPopoverShown()"
 ></span>
diff --git a/client/src/app/shared/misc/help.component.ts b/client/src/app/shared/misc/help.component.ts
index e7af61b4a..ba0452e77 100644
--- a/client/src/app/shared/misc/help.component.ts
+++ b/client/src/app/shared/misc/help.component.ts
@@ -15,6 +15,7 @@ export class HelpComponent implements OnInit, OnChanges {
   @Input() helpType: 'custom' | 'markdownText' | 'markdownEnhanced' = 'custom'
   @Input() tooltipPlacement = 'right'
 
+  isPopoverOpened = false
   mainHtml = ''
 
   constructor (private i18n: I18n) { }
@@ -27,6 +28,14 @@ export class HelpComponent implements OnInit, OnChanges {
     this.init()
   }
 
+  onPopoverHidden () {
+    this.isPopoverOpened = false
+  }
+
+  onPopoverShown () {
+    this.isPopoverOpened = true
+  }
+
   private init () {
     if (this.helpType === 'custom') {
       this.mainHtml = this.customHtml
diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts
index c3f4bf88b..fdfb90600 100644
--- a/client/src/app/shared/shared.module.ts
+++ b/client/src/app/shared/shared.module.ts
@@ -45,6 +45,7 @@ import { I18nPrimengCalendarService } from '@app/shared/i18n/i18n-primeng-calend
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { VideoCaptionsValidatorsService } from '@app/shared/forms/form-validators/video-captions-validators.service'
 import { VideoCaptionService } from '@app/shared/video-caption'
+import { PeertubeCheckboxComponent } from '@app/shared/forms/peertube-checkbox.component'
 
 @NgModule({
   imports: [
@@ -77,7 +78,8 @@ import { VideoCaptionService } from '@app/shared/video-caption'
     MarkdownTextareaComponent,
     InfiniteScrollerDirective,
     HelpComponent,
-    ReactiveFileComponent
+    ReactiveFileComponent,
+    PeertubeCheckboxComponent
   ],
 
   exports: [
@@ -106,6 +108,7 @@ import { VideoCaptionService } from '@app/shared/video-caption'
     InfiniteScrollerDirective,
     HelpComponent,
     ReactiveFileComponent,
+    PeertubeCheckboxComponent,
 
     NumberFormatterPipe,
     ObjectLengthPipe,
diff --git a/client/src/app/shared/video-caption/video-caption.service.ts b/client/src/app/shared/video-caption/video-caption.service.ts
index d1444902d..e835981dd 100644
--- a/client/src/app/shared/video-caption/video-caption.service.ts
+++ b/client/src/app/shared/video-caption/video-caption.service.ts
@@ -42,8 +42,6 @@ export class VideoCaptionService {
   }
 
   updateCaptions (videoId: number | string, videoCaptions: VideoCaptionEdit[]) {
-    if (videoCaptions.length === 0) return of(true)
-
     const observables: Observable<any>[] = []
 
     for (const videoCaption of videoCaptions) {
@@ -58,6 +56,8 @@ export class VideoCaptionService {
       }
     }
 
+    if (observables.length === 0) return of(true)
+
     return forkJoin(observables)
   }
 }
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 3010e5ccc..20020e2a8 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -3,7 +3,7 @@
 
   <div class="video-miniature-information">
     <a
-      class="video-miniature-name"
+      class="video-miniature-name" alt=""
       [routerLink]="[ '/videos/watch', video.uuid ]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur() }"
     >
       {{ video.name }}