Improve frontend accessibility

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

1 files changed, 45 insertions, 0 deletions

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