OpenCloud
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix some accessibility issues

pull/3508/head
Chocobozzz 2020-12-22 12:05:32 +01:00
parent 2b6c55528d
commit 1916c9663a
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
23 changed files with 64 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.html
View File

@ -52,7 +52,7 @@
<ng-template pTemplate="header">
<tr>
<th style="width: 40px">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
<p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
</th>
<th style="width: 40px"></th>
<th style="width: 150px;"></th>
@ -67,7 +67,7 @@
<tr [pSelectableRow]="videoComment">
<td class="checkbox-cell">
<p-tableCheckbox [value]="videoComment"></p-tableCheckbox>
<p-tableCheckbox [value]="videoComment" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
</td>
<td class="expand-cell c-hand" [pRowToggler]="videoComment" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">

2
client/src/app/+admin/users/user-edit/user-edit.component.html
View File

@ -124,7 +124,7 @@
</my-help>
<my-input-toggle-hidden
formControlName="password" id="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
formControlName="password" inputId="password" [ngClass]="{ 'input-error': formErrors['password'] }" autocomplete="new-password"
></my-input-toggle-hidden>
<div *ngIf="formErrors.password" class="form-error">

4
client/src/app/+admin/users/user-list/user-list.component.html
View File

@ -47,7 +47,7 @@
<ng-template pTemplate="header">
<tr>
<th style="width: 40px">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
<p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
</th>
<th style="width: 40px"></th>
<th style="width: 60px;">
@ -87,7 +87,7 @@
<tr [pSelectableRow]="user" [ngClass]="{ banned: highlightBannedUsers && user.blocked }">
<td class="checkbox-cell">
<p-tableCheckbox [value]="user"></p-tableCheckbox>
<p-tableCheckbox [value]="user" ariaLabel="Select this row" i18n-ariaLabel></p-tableCheckbox>
</td>
<td class="expand-cell">

4
client/src/app/+login/login.component.html
View File

@ -32,7 +32,7 @@
<div class="form-group">
<label i18n for="password">Password</label>
<my-input-toggle-hidden formControlName="password" id="password"
<my-input-toggle-hidden formControlName="password" inputId="password"
i18n-placeholder placeholder="Password"
[ngClass]="{ 'input-error': formErrors['password'] }"
autocomplete="current-password" [tabindex]="2"></my-input-toggle-hidden>
@ -42,7 +42,7 @@
</div>
<input type="submit" i18n-value value="Login" [disabled]="!form.valid">
<div class="additionnal-links">
<a class="forgot-password-button" (click)="openForgotPasswordModal()" i18n-title title="Click here to reset your password">I forgot my password</a>
<div *ngIf="signupAllowed" class="signup-link">

6
client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.html
View File

@ -4,7 +4,7 @@
<label i18n for="current-password">Change password</label>
<my-input-toggle-hidden formControlName="current-password"
id="current-password"
inputId="current-password"
i18n-placeholder placeholder="Current password"
[ngClass]="{ 'input-error': formErrors['current-password'] }"
autocomplete="current-password"></my-input-toggle-hidden>
@ -13,7 +13,7 @@
</div>
<my-input-toggle-hidden formControlName="new-password"
id="new-password"
inputId="new-password"
i18n-placeholder placeholder="New password"
[ngClass]="{ 'input-error': formErrors['new-password'] }"
autocomplete="new-password"></my-input-toggle-hidden>
@ -22,7 +22,7 @@
</div>
<my-input-toggle-hidden formControlName="new-confirmed-password"
id="new-confirmed-password"
inputId="new-confirmed-password"
i18n-placeholder placeholder="Confirm new password"
[ngClass]="{ 'input-error': formErrors['new-confirmed-password'] }"
autocomplete="new-password"></my-input-toggle-hidden>

3
client/src/app/+my-account/my-account-settings/my-account-change-password/my-account-change-password.component.scss
View File

@ -11,8 +11,7 @@ my-input-toggle-hidden {
display: block;
}
#new-password,
#new-confirmed-password {
my-input-toggle-hidden + my-input-toggle-hidden {
margin-top: 15px;
}

4
client/src/app/+reset-password/reset-password.component.html
View File

@ -6,7 +6,7 @@
<form role="form" (ngSubmit)="resetPassword()" [formGroup]="form">
<div class="form-group">
<label i18n for="password">Password</label>
<my-input-toggle-hidden formControlName="password" id="password"
<my-input-toggle-hidden formControlName="password" inputId="password"
i18n-placeholder placeholder="Password"
[ngClass]="{ 'input-error': formErrors['password'] }"
autocomplete="new-password"></my-input-toggle-hidden>
@ -17,7 +17,7 @@
<div class="form-group">
<label i18n for="password-confirm">Confirm password</label>
<my-input-toggle-hidden formControlName="password-confirm" id="password-confirm"
<my-input-toggle-hidden formControlName="password-confirm" inputId="password-confirm"
i18n-placeholder placeholder="Confirmed password"
[ngClass]="{ 'input-error': formErrors['password-confirm'] }"
autocomplete="new-password"></my-input-toggle-hidden>

2
client/src/app/+signup/+register/register-step-user.component.html
View File

@ -54,7 +54,7 @@
<div class="form-group">
<label for="password" i18n>Password</label>
<my-input-toggle-hidden formControlName="password" id="password"
<my-input-toggle-hidden formControlName="password" inputId="password"
i18n-placeholder placeholder="Password"
[ngClass]="{ 'input-error': formErrors['password'] }"
autocomplete="new-password"></my-input-toggle-hidden>

4
client/src/app/+videos/+video-edit/shared/video-edit.component.html
View File

@ -216,12 +216,12 @@
<div class="form-group">
<label for="liveVideoRTMPUrl" i18n>Live RTMP Url</label>
<my-input-toggle-hidden id="liveVideoRTMPUrl" [value]="liveVideo.rtmpUrl" [withToggle]="false" [withCopy]="true" [show]="true" [readonly]="true"></my-input-toggle-hidden>
<my-input-toggle-hidden inputId="liveVideoRTMPUrl" [value]="liveVideo.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]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
<my-input-toggle-hidden inputId="liveVideoStreamKey" [value]="liveVideo.streamKey" [withCopy]="true" [readonly]="true"></my-input-toggle-hidden>
<div class="form-group-description" i18n>⚠️ Never share your stream key with anyone.</div>
</div>

5
client/src/app/+videos/+video-edit/video-add-components/video-import-torrent.component.html
View File

@ -4,7 +4,10 @@
<div class="button-file form-control" [ngbTooltip]="'(extensions: .torrent)'">
<span i18n>Select the torrent to import</span>
<input #torrentfileInput type="file" name="torrentfile" id="torrentfile" accept=".torrent" (change)="fileChange()" />
<input
aria-label="Select the torrent to import" i18n-aria-label
#torrentfileInput type="file" name="torrentfile" id="torrentfile" accept=".torrent" (change)="fileChange()"
/>
</div>
<div class="torrent-or-magnet" i18n-data-content data-content="OR"></div>

5
client/src/app/+videos/+video-edit/video-add-components/video-upload.component.html
View File

@ -4,7 +4,10 @@
<div class="button-file form-control" [ngbTooltip]="'(extensions: ' + videoExtensions + ')'">
<span i18n>Select the file to upload</span>
<input #videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus />
<input
aria-label="Select the file to upload" i18n-aria-label
#videofileInput type="file" name="videofile" id="videofile" [accept]="videoExtensions" (change)="fileChange()" autofocus
/>
</div>
<div class="form-group form-group-channel">

5
client/src/app/header/search-typeahead.component.html
View File

@ -4,7 +4,10 @@
[(ngModel)]="search" (ngModelChange)="onSearchChange()" (keydown)="handleKey($event)" (keydown.enter)="doSearch()"
aria-label="Search" autocomplete="off"
>
<my-global-icon iconName="search" class="icon icon-search" role="button" (click)="doSearch()" (keydown.enter)="doSearch()"></my-global-icon>
<my-global-icon
title="Search" i18n-title role="button"
iconName="search" class="icon icon-search" (click)="doSearch()" (keydown.enter)="doSearch()"
></my-global-icon>
<div class="position-absolute jump-to-suggestions">

2
client/src/app/shared/shared-forms/dynamic-form-field.component.html
View File

@ -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>

13
client/src/app/shared/shared-forms/input-toggle-hidden.component.html
View File

@ -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>

2
client/src/app/shared/shared-forms/input-toggle-hidden.component.ts
View File

@ -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 = ''

2
client/src/app/shared/shared-forms/peertube-checkbox.component.html
View File

@ -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"

5
client/src/app/shared/shared-forms/select/select-channel.component.html
View File

@ -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>

2
client/src/app/shared/shared-main/buttons/action-dropdown.component.html
View File

@ -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>

3
client/src/app/shared/shared-main/feeds/feed.component.html
View File

@ -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>

22
client/src/app/shared/shared-user-subscription/subscribe-button.component.html
View File

@ -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>

4
client/src/app/shared/shared-video-live/live-stream-information.component.html
View File

@ -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>

4
client/src/app/shared/shared-video-miniature/video-actions-dropdown.component.html
View File

@ -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>

2
client/src/index.html
View File

@ -65,7 +65,7 @@
}
</script>
<my-app>
<my-app role="main">
</my-app>
</body>