diff options
author | Chocobozzz <me@florianbigard.com> | 2020-12-22 12:05:32 +0100 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2020-12-22 12:05:32 +0100 |
commit | 1916c9663ac632227e60ebc93cec616b2dd6800d (patch) | |
tree | 606b753ed93aeec5d4232925c55642bd8d43c000 /client/src | |
parent | 2b6c55528d252be180a9b206b9de01c44e67b24f (diff) | |
download | PeerTube-1916c9663ac632227e60ebc93cec616b2dd6800d.tar.gz PeerTube-1916c9663ac632227e60ebc93cec616b2dd6800d.tar.zst PeerTube-1916c9663ac632227e60ebc93cec616b2dd6800d.zip |
Fix some accessibility issues
Diffstat (limited to 'client/src')
23 files changed, 64 insertions, 45 deletions
diff --git a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html index 8c68b0abf..fa4a8edfd 100644 --- a/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html +++ b/client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html | |||
@@ -52,7 +52,7 @@ | |||
52 | <ng-template pTemplate="header"> | 52 | <ng-template pTemplate="header"> |
53 | <tr> | 53 | <tr> |
54 | <th style="width: 40px"> | 54 | <th style="width: 40px"> |
55 | <p-tableHeaderCheckbox></p-tableHeaderCheckbox> | 55 | <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox> |
56 | </th> | 56 | </th> |
57 | <th style="width: 40px"></th> | 57 | <th style="width: 40px"></th> |
58 | <th style="width: 150px;"></th> | 58 | <th style="width: 150px;"></th> |
@@ -67,7 +67,7 @@ | |||
67 | <tr [pSelectableRow]="videoComment"> | 67 | <tr [pSelectableRow]="videoComment"> |
68 | 68 | ||
69 | <td class="checkbox-cell"> | 69 | <td class="checkbox-cell"> |
70 | <p-tableCheckbox [value]="videoComment"></p-tableCheckbox> | 70 | <p-tableCheckbox [value]="videoComment" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox> |
71 | </td> | 71 | </td> |
72 | 72 | ||
73 | <td class="expand-cell c-hand" [pRowToggler]="videoComment" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body"> | 73 | <td class="expand-cell c-hand" [pRowToggler]="videoComment" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body"> |
diff --git a/client/src/app/+admin/users/user-edit/user-edit.component.html b/client/src/app/+admin/users/user-edit/user-edit.component.html index e1260c123..78c92227f 100644 --- a/client/src/app/+admin/users/user-edit/user-edit.component.html +++ b/client/src/app/+admin/users/user-edit/user-edit.component.html | |||
@@ -124,7 +124,7 @@ | |||
124 | </my-help> | 124 | </my-help> |
125 | 125 | ||
126 | <my-input-toggle-hidden | 126 | <my-input-toggle-hidden |
127 | formControlName="password" id="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password" | 127 | formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password" |
128 | ></my-input-toggle-hidden> | 128 | ></my-input-toggle-hidden> |
129 | 129 | ||
130 | <div *ngIf="formErrors.password" class="form-error"> | 130 | <div *ngIf="formErrors.password" class="form-error"> |
diff --git a/client/src/app/+admin/users/user-list/user-list.component.html b/client/src/app/+admin/users/user-list/user-list.component.html index 38445cee7..b02faef5d 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.html +++ b/client/src/app/+admin/users/user-list/user-list.component.html | |||
@@ -47,7 +47,7 @@ | |||
47 | <ng-template pTemplate="header"> | 47 | <ng-template pTemplate="header"> |
48 | <tr> | 48 | <tr> |
49 | <th style="width: 40px"> | 49 | <th style="width: 40px"> |
50 | <p-tableHeaderCheckbox></p-tableHeaderCheckbox> | 50 | <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox> |
51 | </th> | 51 | </th> |
52 | <th style="width: 40px"></th> | 52 | <th style="width: 40px"></th> |
53 | <th style="width: 60px;"> | 53 | <th style="width: 60px;"> |
@@ -87,7 +87,7 @@ | |||
87 | 87 | ||
88 | <tr [pSelectableRow]="user" [ngClass]="{ banned: highlightBannedUsers && user.blocked }"> | 88 | <tr [pSelectableRow]="user" [ngClass]="{ banned: highlightBannedUsers && user.blocked }"> |
89 | <td class="checkbox-cell"> | 89 | <td class="checkbox-cell"> |
90 | <p-tableCheckbox [value]="user"></p-tableCheckbox> | 90 | <p-tableCheckbox [value]="user" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox> |
91 | </td> | 91 | </td> |
92 | 92 | ||
93 | <td class="expand-cell"> | 93 | <td class="expand-cell"> |
diff --git a/client/src/app/+login/login.component.html b/client/src/app/+login/login.component.html index e0be3b415..f4bb6215b 100644 --- a/client/src/app/+login/login.component.html +++ b/client/src/app/+login/login.component.html | |||
@@ -32,7 +32,7 @@ | |||
32 | 32 | ||
33 | <div class="form-group"> | 33 | <div class="form-group"> |
34 | <label i18n for="password">Password</label> | 34 | <label i18n for="password">Password</label> |
35 | <my-input-toggle-hidden formControlName="password" id="password" | 35 | <my-input-toggle-hidden formControlName="password" inputId="password" |
36 | i18n-placeholder placeholder="Password" | 36 | i18n-placeholder placeholder="Password" |
37 | [ngClass]="{ 'input-error': formErrors['password'] }" | 37 | [ngClass]="{ 'input-error': formErrors['password'] }" |
38 | autocomplete="current-password" [tabindex]="2"></my-input-toggle-hidden> | 38 | autocomplete="current-password" [tabindex]="2"></my-input-toggle-hidden> |
@@ -42,7 +42,7 @@ | |||
42 | </div> | 42 | </div> |
43 | 43 | ||
44 | <input type="submit" i18n-value value="Login" [disabled]="!form.valid"> | 44 | <input type="submit" i18n-value value="Login" [disabled]="!form.valid"> |
45 | 45 | ||
46 | <div class="additionnal-links"> | 46 | <div class="additionnal-links"> |
47 | <a class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a> | 47 | <a class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a> |
48 | <div *ngIf="signupAllowed" class="signup-link"> | 48 | <div *ngIf="signupAllowed" class="signup-link"> |
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html index f1127b6a1..43facb7ed 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html +++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html | |||
@@ -4,7 +4,7 @@ | |||
4 | 4 | ||
5 | <label i18n for="current-password">Change password</label> | 5 | <label i18n for="current-password">Change password</label> |
6 | <my-input-toggle-hidden formControlName="current-password" | 6 | <my-input-toggle-hidden formControlName="current-password" |
7 | id="current-password" | 7 | inputId="current-password" |
8 | i18n-placeholder placeholder="Current password" | 8 | i18n-placeholder placeholder="Current password" |
9 | [ngClass]="{ 'input-error': formErrors['current-password'] }" | 9 | [ngClass]="{ 'input-error': formErrors['current-password'] }" |
10 | autocomplete="current-password"></my-input-toggle-hidden> | 10 | autocomplete="current-password"></my-input-toggle-hidden> |
@@ -13,7 +13,7 @@ | |||
13 | </div> | 13 | </div> |
14 | 14 | ||
15 | <my-input-toggle-hidden formControlName="new-password" | 15 | <my-input-toggle-hidden formControlName="new-password" |
16 | id="new-password" | 16 | inputId="new-password" |
17 | i18n-placeholder placeholder="New password" | 17 | i18n-placeholder placeholder="New password" |
18 | [ngClass]="{ 'input-error': formErrors['new-password'] }" | 18 | [ngClass]="{ 'input-error': formErrors['new-password'] }" |
19 | autocomplete="new-password"></my-input-toggle-hidden> | 19 | autocomplete="new-password"></my-input-toggle-hidden> |
@@ -22,7 +22,7 @@ | |||
22 | </div> | 22 | </div> |
23 | 23 | ||
24 | <my-input-toggle-hidden formControlName="new-confirmed-password" | 24 | <my-input-toggle-hidden formControlName="new-confirmed-password" |
25 | id="new-confirmed-password" | 25 | inputId="new-confirmed-password" |
26 | i18n-placeholder placeholder="Confirm new password" | 26 | i18n-placeholder placeholder="Confirm new password" |
27 | [ngClass]="{ 'input-error': formErrors['new-confirmed-password'] }" | 27 | [ngClass]="{ 'input-error': formErrors['new-confirmed-password'] }" |
28 | autocomplete="new-password"></my-input-toggle-hidden> | 28 | autocomplete="new-password"></my-input-toggle-hidden> |
diff --git a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss index 0d1f3094a..4e3fda587 100644 --- a/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss +++ b/client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss | |||
@@ -11,8 +11,7 @@ my-input-toggle-hidden { | |||
11 | display: block; | 11 | display: block; |
12 | } | 12 | } |
13 | 13 | ||
14 | #new-password, | 14 | my-input-toggle-hidden + my-input-toggle-hidden { |
15 | #new-confirmed-password { | ||
16 | margin-top: 15px; | 15 | margin-top: 15px; |
17 | } | 16 | } |
18 | 17 | ||
diff --git a/client/src/app/+reset-password/reset-password.component.html b/client/src/app/+reset-password/reset-password.component.html index db9c74f89..143f426ec 100644 --- a/client/src/app/+reset-password/reset-password.component.html +++ b/client/src/app/+reset-password/reset-password.component.html | |||
@@ -6,7 +6,7 @@ | |||
6 | <form role="form" (ngSubmit)="resetPassword()" [formGroup]="form"> | 6 | <form role="form" (ngSubmit)="resetPassword()" [formGroup]="form"> |
7 | <div class="form-group"> | 7 | <div class="form-group"> |
8 | <label i18n for="password">Password</label> | 8 | <label i18n for="password">Password</label> |
9 | <my-input-toggle-hidden formControlName="password" id="password" | 9 | <my-input-toggle-hidden formControlName="password" inputId="password" |
10 | i18n-placeholder placeholder="Password" | 10 | i18n-placeholder placeholder="Password" |
11 | [ngClass]="{ 'input-error': formErrors['password'] }" | 11 | [ngClass]="{ 'input-error': formErrors['password'] }" |
12 | autocomplete="new-password"></my-input-toggle-hidden> | 12 | autocomplete="new-password"></my-input-toggle-hidden> |
@@ -17,7 +17,7 @@ | |||
17 | 17 | ||
18 | <div class="form-group"> | 18 | <div class="form-group"> |
19 | <label i18n for="password-confirm">Confirm password</label> | 19 | <label i18n for="password-confirm">Confirm password</label> |
20 | <my-input-toggle-hidden formControlName="password-confirm" id="password-confirm" | 20 | <my-input-toggle-hidden formControlName="password-confirm" inputId="password-confirm" |
21 | i18n-placeholder placeholder="Confirmed password" | 21 | i18n-placeholder placeholder="Confirmed password" |
22 | [ngClass]="{ 'input-error': formErrors['password-confirm'] }" | 22 | [ngClass]="{ 'input-error': formErrors['password-confirm'] }" |
23 | autocomplete="new-password"></my-input-toggle-hidden> | 23 | autocomplete="new-password"></my-input-toggle-hidden> |
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html index ac341666b..cab21c655 100644 --- a/client/src/app/+signup/+register/register-step-user.component.html +++ b/client/src/app/+signup/+register/register-step-user.component.html | |||
@@ -54,7 +54,7 @@ | |||
54 | 54 | ||
55 | <div class="form-group"> | 55 | <div class="form-group"> |
56 | <label for="password" i18n>Password</label> | 56 | <label for="password" i18n>Password</label> |
57 | <my-input-toggle-hidden formControlName="password" id="password" | 57 | <my-input-toggle-hidden formControlName="password" inputId="password" |
58 | i18n-placeholder placeholder="Password" | 58 | i18n-placeholder placeholder="Password" |
59 | [ngClass]="{ 'input-error': formErrors['password'] }" | 59 | [ngClass]="{ 'input-error': formErrors['password'] }" |
60 | autocomplete="new-password"></my-input-toggle-hidden> | 60 | autocomplete="new-password"></my-input-toggle-hidden> |
diff --git a/client/src/app/+videos/+video-edit/shared/video-edit.component.html b/client/src/app/+videos/+video-edit/shared/video-edit.component.html index d75f37074..9c2aea526 100644 --- a/client/src/app/+videos/+video-edit/shared/video-edit.component.html +++ b/client/src/app/+videos/+video-edit/shared/video-edit.component.html | |||
@@ -216,12 +216,12 @@ | |||
216 | 216 | ||
217 | <div class="form-group"> | 217 | <div class="form-group"> |
218 | <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label> | 218 | <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label> |
219 | <my-input-toggle-hidden id="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden> | 219 | <my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden> |
220 | </div> | 220 | </div> |
221 | 221 | ||
222 | <div class="form-group"> | 222 | <div class="form-group"> |
223 | <label for="liveVideoStreamKey" i18n>Live stream key</label> | 223 | <label for="liveVideoStreamKey" i18n>Live stream key</label> |
224 | <my-input-toggle-hidden id="liveVideoStreamKey" [value]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden> | 224 | <my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden> |
225 | 225 | ||
226 | <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div> | 226 | <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div> |
227 | </div> | 227 | </div> |
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html index 785514c76..211acc6f6 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html +++ b/client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html | |||
@@ -4,7 +4,10 @@ | |||
4 | 4 | ||
5 | <div class="button-file form-control" [ngbTooltip]="'(extensions: .torrent)'"> | 5 | <div class="button-file form-control" [ngbTooltip]="'(extensions: .torrent)'"> |
6 | <span i18n>Select the torrent to import</span> | 6 | <span i18n>Select the torrent to import</span> |
7 | <input #torrentfileInput type="file" name="torrentfile" id="torrentfile" accept=".torrent" (change)="fileChange()" /> | 7 | <input |
8 | aria-label="Select the torrent to import" i18n-aria-label | ||
9 | #torrentfileInput type="file" name="torrentfile" id="torrentfile" accept=".torrent" (change)="fileChange()" | ||
10 | /> | ||
8 | </div> | 11 | </div> |
9 | 12 | ||
10 | <div class="torrent-or-magnet" i18n-data-content data-content="OR"></div> | 13 | <div class="torrent-or-magnet" i18n-data-content data-content="OR"></div> |
diff --git a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html index 88ee4e32a..51e16150e 100644 --- a/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html +++ b/client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html | |||
@@ -4,7 +4,10 @@ | |||
4 | 4 | ||
5 | <div class="button-file form-control" [ngbTooltip]="'(extensions: ' + videoExtensions + ')'"> | 5 | <div class="button-file form-control" [ngbTooltip]="'(extensions: ' + videoExtensions + ')'"> |
6 | <span i18n>Select the file to upload</span> | 6 | <span i18n>Select the file to upload</span> |
7 | <input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus /> | 7 | <input |
8 | aria-label="Select the file to upload" i18n-aria-label | ||
9 | #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus | ||
10 | /> | ||
8 | </div> | 11 | </div> |
9 | 12 | ||
10 | <div class="form-group form-group-channel"> | 13 | <div class="form-group form-group-channel"> |
diff --git a/client/src/app/header/search-typeahead.component.html b/client/src/app/header/search-typeahead.component.html index 548da59bb..03e86b8e6 100644 --- a/client/src/app/header/search-typeahead.component.html +++ b/client/src/app/header/search-typeahead.component.html | |||
@@ -4,7 +4,10 @@ | |||
4 | [(ngModel)]="search" (ngModelChange)="onSearchChange()" (keydown)="handleKey($event)" (keydown.enter)="doSearch()" | 4 | [(ngModel)]="search" (ngModelChange)="onSearchChange()" (keydown)="handleKey($event)" (keydown.enter)="doSearch()" |
5 | aria-label="Search" autocomplete="off" | 5 | aria-label="Search" autocomplete="off" |
6 | > | 6 | > |
7 | <my-global-icon iconName="search" class="icon icon-search" role="button" (click)="doSearch()" (keydown.enter)="doSearch()"></my-global-icon> | 7 | <my-global-icon |
8 | title="Search" i18n-title role="button" | ||
9 | iconName="search" class="icon icon-search" (click)="doSearch()" (keydown.enter)="doSearch()" | ||
10 | ></my-global-icon> | ||
8 | 11 | ||
9 | <div class="position-absolute jump-to-suggestions"> | 12 | <div class="position-absolute jump-to-suggestions"> |
10 | 13 | ||
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 @@ | |||
5 | 5 | ||
6 | <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" /> | 6 | <input *ngIf="setting.type === 'input'" type="text" [id]="setting.name" [formControlName]="setting.name" /> |
7 | 7 | ||
8 | <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [id]="setting.name"></my-input-toggle-hidden> | 8 | <my-input-toggle-hidden *ngIf="setting.type === 'input-password'" [formControlName]="setting.name" [inputId]="setting.name"></my-input-toggle-hidden> |
9 | 9 | ||
10 | <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea> | 10 | <textarea *ngIf="setting.type === 'input-textarea'" type="text" [id]="setting.name" [formControlName]="setting.name"></textarea> |
11 | 11 | ||
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 @@ | |||
1 | <div class="input-group input-group-sm"> | 1 | <div class="input-group input-group-sm"> |
2 | <input [id]="id" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex" [(ngModel)]="value" (ngModelChange)="update()" [ngClass]="{ 'readonly': readonly }" [readonly]="readonly" | 2 | <input |
3 | #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control" /> | 3 | [id]="inputId" [autocomplete]="autocomplete" [value]="value" [placeholder]="placeholder" [tabindex]="tabindex" |
4 | [(ngModel)]="value" (ngModelChange)="update()" [ngClass]="{ 'readonly': readonly }" [readonly]="readonly" | ||
5 | #input (click)="input.select()" (input)="update()" (change)="update()" [type]="inputType" class="form-control" | ||
6 | /> | ||
4 | 7 | ||
5 | <div *ngIf="withToggle || withCopy" class="input-group-append"> | 8 | <div *ngIf="withToggle || withCopy" class="input-group-append"> |
6 | <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle"> | 9 | <button *ngIf="withToggle" (click)="toggle()" type="button" class="btn btn-outline-secondary" [title]="toggleTitle"> |
7 | <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span> | 10 | <span class="glyphicon glyphicon-eye-{{ show ? 'open' : 'close' }}"></span> |
8 | </button> | 11 | </button> |
9 | <button *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button" class="btn btn-outline-secondary" i18n-title title="Copy"> | 12 | |
13 | <button | ||
14 | *ngIf="withCopy" [cdkCopyToClipboard]="input.value" (click)="activateCopiedMessage()" type="button" | ||
15 | class="btn btn-outline-secondary" i18n-title title="Copy" | ||
16 | > | ||
10 | <span class="glyphicon glyphicon-copy"></span> | 17 | <span class="glyphicon glyphicon-copy"></span> |
11 | </button> | 18 | </button> |
12 | </div> | 19 | </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' | |||
15 | ] | 15 | ] |
16 | }) | 16 | }) |
17 | export class InputToggleHiddenComponent implements ControlValueAccessor { | 17 | export class InputToggleHiddenComponent implements ControlValueAccessor { |
18 | @Input() id = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined | 18 | @Input() inputId = Math.random().toString(11).slice(2, 8) // id cannot be left empty or undefined |
19 | @Input() value = '' | 19 | @Input() value = '' |
20 | @Input() autocomplete = 'off' | 20 | @Input() autocomplete = 'off' |
21 | @Input() placeholder = '' | 21 | @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 @@ | |||
8 | [id]="inputName" | 8 | [id]="inputName" |
9 | [disabled]="disabled" | 9 | [disabled]="disabled" |
10 | /> | 10 | /> |
11 | <span role="checkbox" [attr.aria-checked]="checked"></span> | 11 | <span role="checkbox" [attr.aria-checked]="checked" [attr.aria-label]="labelText || labelInnerHTML"></span> |
12 | <span *ngIf="labelText">{{ labelText }}</span> | 12 | <span *ngIf="labelText">{{ labelText }}</span> |
13 | <span | 13 | <span |
14 | *ngIf="!labelText && labelInnerHTML" | 14 | *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 @@ | |||
7 | [searchable]="searchable" | 7 | [searchable]="searchable" |
8 | > | 8 | > |
9 | <ng-option *ngFor="let channel of channels" [value]="channel.id"> | 9 | <ng-option *ngFor="let channel of channels" [value]="channel.id"> |
10 | <img | 10 | <img alt="" class="avatar mr-1" [src]="channel.avatarPath" /> |
11 | class="avatar mr-1" | ||
12 | [src]="channel.avatarPath" | ||
13 | /> | ||
14 | {{ channel.label }} | 11 | {{ channel.label }} |
15 | </ng-option> | 12 | </ng-option> |
16 | </ng-select> | 13 | </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 @@ | |||
1 | <div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)"> | 1 | <div class="dropdown-root" ngbDropdown [placement]="placement" [container]="container" *ngIf="areActionsDisplayed(actions, entry)"> |
2 | <button | 2 | <button |
3 | class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }" | 3 | class="action-button" [ngClass]="{ small: buttonSize === 'small', grey: theme === 'grey', orange: theme === 'orange', 'button-styled': buttonStyled }" |
4 | ngbDropdownToggle role="button" | 4 | ngbDropdownToggle role="button" aria-label="Open actions" i18n-aria-label |
5 | > | 5 | > |
6 | <my-global-icon *ngIf="!label && buttonDirection === 'horizontal'" class="more-icon" iconName="more-horizontal"></my-global-icon> | 6 | <my-global-icon *ngIf="!label && buttonDirection === 'horizontal'" class="more-icon" iconName="more-horizontal"></my-global-icon> |
7 | <my-global-icon *ngIf="!label && buttonDirection === 'vertical'" class="more-icon" iconName="more-vertical"></my-global-icon> | 7 | <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 @@ | |||
1 | <div class="feed"> | 1 | <div class="feed"> |
2 | <my-global-icon | 2 | <my-global-icon |
3 | role="button" aria-label="Open syndication dropdown" i18n-aria-label | ||
3 | *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto" | 4 | *ngIf="syndicationItems.length !== 0" [ngbPopover]="feedsList" [autoClose]="true" placement="bottom left auto" |
4 | class="icon-syndication" role="button" iconName="syndication" | 5 | class="icon-syndication" iconName="syndication" |
5 | > | 6 | > |
6 | </my-global-icon> | 7 | </my-global-icon> |
7 | 8 | ||
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 @@ | |||
1 | <div class="btn-group-subscribe btn-group" | 1 | <div |
2 | [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }"> | 2 | class="btn-group-subscribe btn-group" |
3 | [ngClass]="{'subscribe-button': !isAllChannelsSubscribed, 'unsubscribe-button': isAllChannelsSubscribed, 'big': isBigButton }" | ||
4 | > | ||
3 | 5 | ||
4 | <ng-template #userLoggedOut> | 6 | <ng-template #userLoggedOut> |
5 | <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }"> | 7 | <span [ngClass]="{ 'extra-text': isAtLeastOneChannelSubscribed }"> |
@@ -18,9 +20,10 @@ | |||
18 | </ng-template> | 20 | </ng-template> |
19 | 21 | ||
20 | <ng-template #userLoggedIn> | 22 | <ng-template #userLoggedIn> |
21 | <button *ngIf="!isAllChannelsSubscribed" type="button" | 23 | <button |
22 | class="btn btn-sm" role="button" | 24 | *ngIf="!isAllChannelsSubscribed" type="button" |
23 | (click)="subscribe()"> | 25 | class="btn btn-sm" (click)="subscribe()" |
26 | > | ||
24 | <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template> | 27 | <ng-template [ngTemplateOutlet]="userLoggedOut"></ng-template> |
25 | </button> | 28 | </button> |
26 | 29 | ||
@@ -36,10 +39,11 @@ | |||
36 | *ngIf="isUserLoggedIn(); then userLoggedIn"> | 39 | *ngIf="isUserLoggedIn(); then userLoggedIn"> |
37 | </ng-container> | 40 | </ng-container> |
38 | 41 | ||
39 | <div class="btn-group" ngbDropdown autoClose="outside" | 42 | <div |
40 | placement="bottom-right" role="group" | 43 | class="btn-group" ngbDropdown autoClose="outside" placement="bottom-right" |
41 | aria-label="Multiple ways to subscribe to the current channel"> | 44 | role="group" aria-label="Multiple ways to subscribe to the current channel" i18n-aria-label |
42 | <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle> | 45 | > |
46 | <button class="btn btn-sm dropdown-toggle-split" ngbDropdownToggle aria-label="Open subscription dropdown" i18n-aria-label> | ||
43 | <ng-container | 47 | <ng-container |
44 | *ngIf="!isUserLoggedIn(); then userLoggedOut"> | 48 | *ngIf="!isUserLoggedIn(); then userLoggedOut"> |
45 | </ng-container> | 49 | </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 @@ | |||
17 | 17 | ||
18 | <div class="form-group"> | 18 | <div class="form-group"> |
19 | <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label> | 19 | <label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label> |
20 | <my-input-toggle-hidden id="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden> | 20 | <my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="live.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden> |
21 | </div> | 21 | </div> |
22 | 22 | ||
23 | <div class="form-group"> | 23 | <div class="form-group"> |
24 | <label for="liveVideoStreamKey" i18n>Live stream key</label> | 24 | <label for="liveVideoStreamKey" i18n>Live stream key</label> |
25 | <my-input-toggle-hidden id="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden> | 25 | <my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="live.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden> |
26 | 26 | ||
27 | <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div> | 27 | <div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div> |
28 | </div> | 28 | </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 @@ | |||
1 | <ng-container *ngIf="videoActions.length !== 0"> | 1 | <ng-container *ngIf="videoActions.length !== 0"> |
2 | 2 | ||
3 | <div class="playlist-dropdown" ngbDropdown #playlistDropdown="ngbDropdown" role="button" autoClose="outside" [placement]="getPlaylistDropdownPlacement()" | 3 | <div |
4 | role="button" aria-label="Open video actions" i18n-aria-label | ||
5 | class="playlist-dropdown" ngbDropdown #playlistDropdown="ngbDropdown" autoClose="outside" [placement]="getPlaylistDropdownPlacement()" | ||
4 | *ngIf="isUserLoggedIn() && displayOptions.playlist" (openChange)="playlistAdd.openChange($event)" | 6 | *ngIf="isUserLoggedIn() && displayOptions.playlist" (openChange)="playlistAdd.openChange($event)" |
5 | > | 7 | > |
6 | <span class="anchor" ngbDropdownAnchor></span> | 8 | <span class="anchor" ngbDropdownAnchor></span> |
diff --git a/client/src/index.html b/client/src/index.html index 1136ecdaf..c81ef8c2e 100644 --- a/client/src/index.html +++ b/client/src/index.html | |||
@@ -65,7 +65,7 @@ | |||
65 | } | 65 | } |
66 | </script> | 66 | </script> |
67 | 67 | ||
68 | <my-app> | 68 | <my-app role="main"> |
69 | </my-app> | 69 | </my-app> |
70 | 70 | ||
71 | </body> | 71 | </body> |