Improve frontend accessibility

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

1 files changed, 19 insertions, 31 deletions

diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
index 97900e523..6e3f83ccf 100644
--- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
+++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html
@@ -85,12 +85,10 @@
 
       <div i18n class="inner-form-title">Signup</div>
 
-      <div class="form-group">
-        <input type="checkbox" id="signupEnabled" formControlName="signupEnabled">
-
-        <label for="signupEnabled"></label>
-        <label i18n for="signupEnabled">Signup enabled</label>
-      </div>
+      <my-peertube-checkbox
+        inputName="signupEnabled" formControlName="signupEnabled"
+        i18n-labelText labelText="Signup enabled"
+      ></my-peertube-checkbox>
 
       <div *ngIf="isSignupEnabled()" class="form-group">
         <label i18n for="signupLimit">Signup limit</label>
@@ -152,33 +150,24 @@
         </div>
       </div>
 
-      <div class="form-group">
-        <input type="checkbox" id="servicesTwitterWhitelisted" formControlName="servicesTwitterWhitelisted">
-
-        <label for="servicesTwitterWhitelisted"></label>
-        <label i18n for="servicesTwitterWhitelisted">Instance whitelisted by Twitter</label>
-        <my-help
-          helpType="custom" i18n-customHtml
-          customHtml="If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
+      <my-peertube-checkbox
+        inputName="servicesTwitterWhitelisted" formControlName="servicesTwitterWhitelisted"
+        i18n-labelText labelText="Instance whitelisted by Twitter"
+        i18n-helpHtml helpHtml="If your instance is whitelisted by Twitter, a video player will be embedded in the Twitter feed on PeerTube video share.<br />
 If the instance is not whitelisted, we use an image link card that will redirect on your PeerTube instance.<br /><br />
 Check this checkbox, save the configuration and test with a video URL of your instance (https://example.com/videos/watch/blabla) on <a target='_blank' rel='noopener noreferrer' href='https://cards-dev.twitter.com/validator'>https://cards-dev.twitter.com/validator</a> to see if you instance is whitelisted."
-        ></my-help>
-
-      </div>
+      ></my-peertube-checkbox>
     </tab>
 
     <tab i18n-heading heading="Advanced configuration">
 
       <div i18n class="inner-form-title">Transcoding</div>
 
-      <div class="form-group">
-        <input type="checkbox" id="transcodingEnabled" formControlName="transcodingEnabled">
-
-        <label for="transcodingEnabled"></label>
-        <label i18n for="transcodingEnabled">Transcoding enabled</label>
-
-        <my-help helpType="custom" i18n-customHtml customHtml="If you disable transcoding, many videos from your users will not work!"></my-help>
-      </div>
+      <my-peertube-checkbox
+        inputName="transcodingEnabled" formControlName="transcodingEnabled"
+        i18n-labelText labelText="Transcoding enabled"
+        i18n-helpHtml helpHtml="If you disable transcoding, many videos from your users will not work!"
+      ></my-peertube-checkbox>
 
       <ng-template [ngIf]="isTranscodingEnabled()">
 
@@ -197,12 +186,11 @@ Check this checkbox, save the configuration and test with a video URL of your in
         </div>
 
         <div class="form-group" *ngFor="let resolution of resolutions">
-          <input
-              type="checkbox" [id]="getResolutionKey(resolution)"
-              [formControlName]="getResolutionKey(resolution)"
-          >
-          <label [for]="getResolutionKey(resolution)"></label>
-          <label i18n [for]="getResolutionKey(resolution)">Resolution {{ resolution }} enabled</label>
+          <my-peertube-checkbox
+            [inputName]="getResolutionKey(resolution)" [formControlName]="getResolutionKey(resolution)"
+            i18n-labelText labelText="Resolution {{resolution}} enabled"
+          ></my-peertube-checkbox>
+
         </div>
       </ng-template>