From 1916c9663ac632227e60ebc93cec616b2dd6800d Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 22 Dec 2020 12:05:32 +0100
Subject: Fix some accessibility issues

---
 .../shared-forms/dynamic-form-field.component.html |  2 +-
 .../input-toggle-hidden.component.html             | 13 ++++++++++---
 .../shared-forms/input-toggle-hidden.component.ts  |  2 +-
 .../shared-forms/peertube-checkbox.component.html  |  2 +-
 .../select/select-channel.component.html           |  5 +----
 .../buttons/action-dropdown.component.html         |  2 +-
 .../shared/shared-main/feeds/feed.component.html   |  3 ++-
 .../subscribe-button.component.html                | 22 +++++++++++++---------
 .../live-stream-information.component.html         |  4 ++--
 .../video-actions-dropdown.component.html          |  4 +++-
 10 files changed, 35 insertions(+), 24 deletions(-)

(limited to 'client/src/app/shared')

diff --git a/client/src/app/shared/shared-forms/dynamic-form-field.component.html b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
index 658d8ce5b..cb82ad752 100644
--- a/client/src/app/shared/shared-forms/dynamic-form-field.component.html
+++ b/client/src/app/shared/shared-forms/dynamic-form-field.component.html
@@ -5,7 +5,7 @@
 
   <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" />
 
-  <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [id]="setting.name"></my-input-toggle-hidden>
+  <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-toggle-hidden>
 
   <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea>
 
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
index af7c6650f..e7441e4c1 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.html
@@ -1,12 +1,19 @@
 <div class="input-group input-group-sm">
-  <input [id]="id" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex" [(ngModel)]="value" (ngModelChange)="update()" [ngClass]="{ 'readonly': readonly }" [readonly]="readonly"
-         #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control" />
+  <input
+    [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex"
+    [(ngModel)]="value" (ngModelChange)="update()" [ngClass]="{ 'readonly': readonly }" [readonly]="readonly"
+    #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control"
+  />
 
   <div *ngIf="withToggle || withCopy" class="input-group-append">
     <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle">
       <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span>
     </button>
-    <button *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary" i18n-title title="Copy">
+
+    <button
+      *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button"
+      class="btn btn-outline-secondary" i18n-title title="Copy"
+    >
       <span class="glyphicon glyphicon-copy"></span>
     </button>
   </div>
diff --git a/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts b/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts
index 56e5b9762..e03353fe1 100644
--- a/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts
+++ b/client/src/app/shared/shared-forms/input-toggle-hidden.component.ts
@@ -15,7 +15,7 @@ import { Notifier } from '@app/core'
   ]
 })
 export class InputToggleHiddenComponent implements ControlValueAccessor {
-  @Input() id = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
+  @Input() inputId = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined
   @Input() value = ''
   @Input() autocomplete = 'off'
   @Input() placeholder = ''
diff --git a/client/src/app/shared/shared-forms/peertube-checkbox.component.html b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
index 704f3e696..9d0402224 100644
--- a/client/src/app/shared/shared-forms/peertube-checkbox.component.html
+++ b/client/src/app/shared/shared-forms/peertube-checkbox.component.html
@@ -8,7 +8,7 @@
         [id]="inputName"
         [disabled]="disabled"
       />
-      <span role="checkbox" [attr.aria-checked]="checked"></span>
+      <span role="checkbox" [attr.aria-checked]="checked" [attr.aria-label]="labelText || labelInnerHTML"></span>
       <span *ngIf="labelText">{{ labelText }}</span>
       <span
         *ngIf="!labelText && labelInnerHTML"
diff --git a/client/src/app/shared/shared-forms/select/select-channel.component.html b/client/src/app/shared/shared-forms/select/select-channel.component.html
index 897d13ee7..f83f17a16 100644
--- a/client/src/app/shared/shared-forms/select/select-channel.component.html
+++ b/client/src/app/shared/shared-forms/select/select-channel.component.html
@@ -7,10 +7,7 @@
   [searchable]="searchable"
 >
   <ng-option *ngFor="let channel of channels" [value]="channel.id">
-    <img
-      class="avatar mr-1"
-      [src]="channel.avatarPath"
-    />
+    <img alt="" class="avatar mr-1" [src]="channel.avatarPath" />
     {{ channel.label }}
   </ng-option>
 </ng-select>
diff --git a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
index 8b363b351..d0487f0b8 100644
--- a/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
+++ b/client/src/app/shared/shared-main/buttons/action-dropdown.component.html
@@ -1,7 +1,7 @@
 <div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)">
   <button
     class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }"
-    ngbDropdownToggle role="button"
+    ngbDropdownToggle role="button" aria-label="Open actions" i18n-aria-label
   >
     <my-global-icon *ngIf="!label && buttonDirection === 'horizontal'" class="more-icon" iconName="more-horizontal"></my-global-icon>
     <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon>
diff --git a/client/src/app/shared/shared-main/feeds/feed.component.html b/client/src/app/shared/shared-main/feeds/feed.component.html
index a00011785..914fe6d46 100644
--- a/client/src/app/shared/shared-main/feeds/feed.component.html
+++ b/client/src/app/shared/shared-main/feeds/feed.component.html
@@ -1,7 +1,8 @@
 <div class="feed">
   <my-global-icon
+    role="button" aria-label="Open syndication dropdown" i18n-aria-label
     *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto"
-    class="icon-syndication" role="button" iconName="syndication"
+    class="icon-syndication" iconName="syndication"
   >
   </my-global-icon>
 
diff --git a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
index 85b3d1fdb..d60fd5c5f 100644
--- a/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
+++ b/client/src/app/shared/shared-user-subscription/subscribe-button.component.html
@@ -1,5 +1,7 @@
-<div class="btn-group-subscribe btn-group"
-    [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }">
+<div
+  class="btn-group-subscribe btn-group"
+  [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }"
+>
 
   <ng-template #userLoggedOut>
     <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }">
@@ -18,9 +20,10 @@
   </ng-template>
 
   <ng-template #userLoggedIn>
-    <button *ngIf="!isAllChannelsSubscribed" type="button"
-            class="btn btn-sm" role="button"
-            (click)="subscribe()">
+    <button
+      *ngIf="!isAllChannelsSubscribed" type="button"
+      class="btn btn-sm" (click)="subscribe()"
+    >
       <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template>
     </button>
 
@@ -36,10 +39,11 @@
     *ngIf="isUserLoggedIn(); then userLoggedIn">
   </ng-container>
 
-  <div class="btn-group" ngbDropdown autoClose="outside"
-       placement="bottom-right" role="group"
-       aria-label="Multiple ways to subscribe to the current channel">
-    <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle>
+  <div
+    class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right"
+    role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label
+  >
+    <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label>
       <ng-container
         *ngIf="!isUserLoggedIn(); then userLoggedOut">
       </ng-container>
diff --git a/client/src/app/shared/shared-video-live/live-stream-information.component.html b/client/src/app/shared/shared-video-live/live-stream-information.component.html
index e7b00cd01..57920239d 100644
--- a/client/src/app/shared/shared-video-live/live-stream-information.component.html
+++ b/client/src/app/shared/shared-video-live/live-stream-information.component.html
@@ -17,12 +17,12 @@
 
     <div class="form-group">
       <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
-      <my-input-toggle-hidden id="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
     </div>
 
     <div class="form-group">
       <label for="liveVideoStreamKey" i18n>Live stream key</label>
-      <my-input-toggle-hidden id="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
+      <my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
 
       <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
     </div>
diff --git a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
index 00ee196ac..0cbf05bcc 100644
--- a/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
@@ -1,6 +1,8 @@
 <ng-container *ngIf="videoActions.length !== 0">
 
-  <div class="playlist-dropdown" ngbDropdown #playlistDropdown="ngbDropdown" role="button" autoClose="outside" [placement]="getPlaylistDropdownPlacement()"
+  <div
+    role="button" aria-label="Open video actions" i18n-aria-label
+    class="playlist-dropdown" ngbDropdown #playlistDropdown="ngbDropdown" autoClose="outside" [placement]="getPlaylistDropdownPlacement()"
     *ngIf="isUserLoggedIn() && displayOptions.playlist" (openChange)="playlistAdd.openChange($event)"
   >
     <span class="anchor" ngbDropdownAnchor></span>
-- 
cgit v1.2.3