From 5459364b192fcd2683f188d16675629546517e3a Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Thu, 19 Sep 2024 15:35:02 +0200
Subject: [PATCH] Fix share and download input URL accessibility

---
 .../shared/shared-forms/input-text.component.html    |  1 +
 .../app/shared/shared-forms/input-text.component.ts  |  1 +
 .../shared-share-modal/video-share.component.html    | 12 ++++++++++--
 .../download/subtitle-files-download.component.html  |  5 ++++-
 .../download/video-files-download.component.html     |  6 +++++-
 5 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/client/src/app/shared/shared-forms/input-text.component.html b/client/src/app/shared/shared-forms/input-text.component.html
index 4ea382bee..dbffcc250 100644
--- a/client/src/app/shared/shared-forms/input-text.component.html
+++ b/client/src/app/shared/shared-forms/input-text.component.html
@@ -4,6 +4,7 @@
     [(ngModel)]="value" (ngModelChange)="update()" [readonly]="readonly"
     #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
     [ngClass]="{ 'input-error': formError }"
+    [attr.aria-label]="ariaLabel"
   />
 
   <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
diff --git a/client/src/app/shared/shared-forms/input-text.component.ts b/client/src/app/shared/shared-forms/input-text.component.ts
index b07708d78..aa4f06f21 100644
--- a/client/src/app/shared/shared-forms/input-text.component.ts
+++ b/client/src/app/shared/shared-forms/input-text.component.ts
@@ -34,6 +34,7 @@ export class InputTextComponent implements ControlValueAccessor, AfterViewInit {
   @Input() show = false
   @Input() formError: string | FormReactiveErrors | FormReactiveErrors[]
   @Input() autofocus = false
+  @Input() ariaLabel: string
 
   get inputType () {
     return this.show
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index c724342b3..64e7a218c 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -28,7 +28,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-text [value]="playlistUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
+              <my-input-text
+                inputId="playlist-url" i18n-ariaLabel ariaLabel="Playlist URL"
+                [value]="playlistUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
+              ></my-input-text>
             </div>
           </ng-template>
         </ng-container>
@@ -49,6 +52,7 @@
           <ng-template ngbNavContent>
             <div class="nav-content">
               <my-input-text
+                inputId="playlist-embed-url" i18n-ariaLabel ariaLabel="Playlist embed URL"
                 [value]="customizations.onlyEmbedUrl ? playlistEmbedUrl : playlistEmbedHTML" (change)="onUpdate()"
                 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
               ></my-input-text>
@@ -118,7 +122,10 @@
 
           <ng-template ngbNavContent>
             <div class="nav-content">
-              <my-input-text [value]="videoUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-text>
+              <my-input-text
+                inputId="video-url" i18n-ariaLabel ariaLabel="Video URL"
+                [value]="videoUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
+              ></my-input-text>
             </div>
           </ng-template>
         </ng-container>
@@ -139,6 +146,7 @@
           <ng-template ngbNavContent>
             <div class="nav-content">
               <my-input-text
+                inputId="video-embed-url" i18n-ariaLabel ariaLabel="Video embed URL"
                 [value]="customizations.onlyEmbedUrl ? videoEmbedUrl : videoEmbedHTML" (ngModelChange)="onUpdate()"
                 [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"
               ></my-input-text>
diff --git a/client/src/app/shared/shared-video-miniature/download/subtitle-files-download.component.html b/client/src/app/shared/shared-video-miniature/download/subtitle-files-download.component.html
index 5f9a3d3e0..0780eece4 100644
--- a/client/src/app/shared/shared-video-miniature/download/subtitle-files-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/download/subtitle-files-download.component.html
@@ -9,7 +9,10 @@
 
     <ng-template ngbNavContent>
       <div class="nav-content">
-        <my-input-text [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getCaptionLink()"></my-input-text>
+        <my-input-text
+          inputId="subtitle-url" i18n-ariaLabel ariaLabel="Subtitle URL"
+          [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getCaptionLink()"
+        ></my-input-text>
       </div>
     </ng-template>
   </li>
diff --git a/client/src/app/shared/shared-video-miniature/download/video-files-download.component.html b/client/src/app/shared/shared-video-miniature/download/video-files-download.component.html
index 34986c820..53cbd2201 100644
--- a/client/src/app/shared/shared-video-miniature/download/video-files-download.component.html
+++ b/client/src/app/shared/shared-video-miniature/download/video-files-download.component.html
@@ -6,7 +6,11 @@
 
   <ng-template #rootNavContent>
     <div class="nav-content">
-      <my-input-text [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getVideoFileLink()"></my-input-text>
+      <my-input-text
+        inputId="video-file-link"
+        i18n-ariaLabel ariaLabel="Video file link"
+        [show]="true" [readonly]="true" [withCopy]="true" [withToggle]="false" [value]="getVideoFileLink()"
+      ></my-input-text>
     </div>
   </ng-template>