Misc accessibility fixes (#536)

This commit is contained in:
Joseph Milazzo 2021-08-30 13:14:05 -07:00 committed by GitHub
parent b712d8ed1a
commit de9941cc12
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 16 additions and 16 deletions

View File

@ -392,7 +392,7 @@ namespace API.Services
private void ExtractArchiveEntries(ZipArchive archive, string extractPath)
{
// TODO: In cases where we try to extract, but there are InvalidPathChars, we need to inform the user
// NOTE: In cases where we try to extract, but there are InvalidPathChars, we need to inform the user
var needsFlattening = ArchiveNeedsFlattening(archive);
if (!archive.HasFiles() && !needsFlattening) return;

View File

@ -4,10 +4,10 @@
<div class="col-4"><button class="btn btn-primary float-right" (click)="addLibrary()"><i class="fa fa-plus" aria-hidden="true"></i><span class="phone-hidden">&nbsp;Add Library</span></button></div>
</div>
<ul class="list-group" *ngIf="!createLibraryToggle; else createLibrary">
<li *ngFor="let library of libraries" class="list-group-item">
<li *ngFor="let library of libraries; let idx = index;" class="list-group-item">
<div>
<h4>
{{library.name | titlecase}}
<span id="library-name--{{idx}}">{{library.name | titlecase}}</span>
<div class="float-right">
<button class="btn btn-secondary mr-2 btn-sm" (click)="scanLibrary(library)" placement="top" ngbTooltip="Scan Library" attr.aria-label="Scan Library"><i class="fa fa-sync-alt" title="Scan"></i></button>
<button class="btn btn-danger mr-2 btn-sm" [disabled]="deletionInProgress" (click)="deleteLibrary(library)"><i class="fa fa-trash" placement="top" ngbTooltip="Delete Library" attr.aria-label="Delete {{library.name | titlecase}}"></i></button>

View File

@ -6,10 +6,10 @@
<div class="col-4"><button class="btn btn-primary float-right" (click)="createMember()"><i class="fa fa-plus" aria-hidden="true"></i><span class="phone-hidden">&nbsp;Add User</span></button></div>
</div>
<ul class="list-group" *ngIf="!createMemberToggle; else createUser">
<li *ngFor="let member of members" class="list-group-item">
<li *ngFor="let member of members; let idx = index;" class="list-group-item">
<div>
<h4>
<i class="presence fa fa-circle" title="Active" aria-hidden="true" *ngIf="false && (presence.onlineUsers$ | async)?.includes(member.username)"></i>{{member.username | titlecase}} <span *ngIf="member.isAdmin" class="badge badge-pill badge-secondary">Admin</span>
<i class="presence fa fa-circle" title="Active" aria-hidden="true" *ngIf="false && (presence.onlineUsers$ | async)?.includes(member.username)"></i><span id="member-name--{{idx}}">{{member.username | titlecase}} </span><span *ngIf="member.isAdmin" class="badge badge-pill badge-secondary">Admin</span>
<div class="float-right" *ngIf="canEditMember(member)">
<button class="btn btn-danger mr-2" (click)="deleteUser(member)" placement="top" ngbTooltip="Delete User" attr.aria-label="Delete User {{member.username | titlecase}}"><i class="fa fa-trash" aria-hidden="true"></i></button>
<button class="btn btn-secondary mr-2" (click)="updatePassword(member)" placement="top" ngbTooltip="Change Password" attr.aria-label="Change Password for {{member.username | titlecase}}"><i class="fa fa-key" aria-hidden="true"></i></button>
@ -28,7 +28,7 @@
<ng-template #showRoles>
<app-tag-badge *ngFor="let role of getRoles(member)">{{role}}</app-tag-badge>
</ng-template>
<button class="btn btn-icon" title="{{hasAdminRole(member) ? 'Admins have all feature permissions' : 'Edit Role'}}" (click)="openEditRole(member)" [disabled]="hasAdminRole(member)">
<button class="btn btn-icon" attr.aria-labelledby="member-name--{{idx}}" title="{{hasAdminRole(member) ? 'Admins have all feature permissions' : 'Edit Role'}}" (click)="openEditRole(member)" [disabled]="hasAdminRole(member)">
<i class="fa fa-pen" aria-hidden="true"></i>
<span class="sr-only">Edit Role</span>
</button>

View File

@ -5,10 +5,10 @@
<li *ngFor="let series of series" class="list-group-item">
<div>
<h4>
<a href="/library/{{series.libraryId}}/series/{{series.id}}" >{{series.name | titlecase}}</a>
<a id="series--{{series.name}}" href="/library/{{series.libraryId}}/series/{{series.id}}" >{{series.name | titlecase}}</a>
&nbsp;<span class="badge badge-secondary badge-pill">{{getBookmarkPages(series.id)}}</span>
<div class="float-right">
<button class="btn btn-danger mr-2 btn-sm" (click)="clearBookmarks(series)" [disabled]="clearingSeries[series.id]" placement="top" ngbTooltip="Clear Bookmarks" attr.aria-label="Clear Bookmarks">
<button attr.aria-labelledby="series--{{series.name}}" class="btn btn-danger mr-2 btn-sm" (click)="clearBookmarks(series)" [disabled]="clearingSeries[series.id]" placement="top" ngbTooltip="Clear Bookmarks" attr.aria-label="Clear Bookmarks">
<ng-container *ngIf="clearingSeries[series.id]; else notClearing">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Loading...</span>
@ -17,7 +17,7 @@
<i class="fa fa-trash-alt" aria-hidden="true"></i>
</ng-template>
</button>
<button class="btn btn-secondary mr-2 btn-sm" (click)="downloadBookmarks(series)" [disabled]="downloadingSeries[series.id]" placement="top" ngbTooltip="Download Bookmarks" attr.aria-label="Download Bookmarks">
<button attr.aria-labelledby="series--{{series.name}}" class="btn btn-secondary mr-2 btn-sm" (click)="downloadBookmarks(series)" [disabled]="downloadingSeries[series.id]" placement="top" ngbTooltip="Download Bookmarks" attr.aria-label="Download Bookmarks">
<ng-container *ngIf="downloadingSeries[series.id]; else notDownloading">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="sr-only">Downloading...</span>
@ -26,7 +26,7 @@
<i class="fa fa-arrow-alt-circle-down" aria-hidden="true"></i>
</ng-template>
</button>
<button class="btn btn-primary mr-2 btn-sm" (click)="viewBookmarks(series)" placement="top" ngbTooltip="View Bookmarks" attr.aria-label="View Bookmarks">
<button attr.aria-labelledby="series--{{series.name}}" class="btn btn-primary mr-2 btn-sm" (click)="viewBookmarks(series)" placement="top" ngbTooltip="View Bookmarks" attr.aria-label="View Bookmarks">
<i class="fa fa-pen" title="View Bookmarks"></i>
</button>
</div>

View File

@ -27,8 +27,8 @@
</div>
</div>
<div class="float-right mb-3">
<button type="button" class="btn btn-secondary mr-2" (click)="resetForm()">Reset</button>
<button type="submit" class="btn btn-primary" (click)="save()" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
<button type="button" class="btn btn-secondary mr-2" (click)="resetForm()" aria-describedby="site-dark-mode-label">Reset</button>
<button type="submit" class="btn btn-primary" (click)="save()" aria-describedby="site-dark-mode-label" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
</div>
</form>
</ng-template>
@ -147,8 +147,8 @@
</div>
<div class="float-right mb-3">
<button type="button" class="btn btn-secondary mr-2" (click)="resetForm()">Reset</button>
<button type="submit" class="btn btn-primary" (click)="save()" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
<button type="button" class="btn btn-secondary mr-2" (click)="resetForm()" aria-describedby="reading-panel">Reset</button>
<button type="submit" class="btn btn-primary" (click)="save()" aria-describedby="reading-panel" [disabled]="!settingsForm.touched && !settingsForm.dirty">Save</button>
</div>
</form>
</ng-template>
@ -184,8 +184,8 @@
</div>
</div>
<div class="float-right mb-3">
<button type="button" class="btn btn-secondary mr-2" (click)="resetPasswordForm()">Reset</button>
<button type="submit" class="btn btn-primary" (click)="savePasswordForm()" [disabled]="!passwordChangeForm.valid || !(passwordChangeForm.dirty || passwordChangeForm.touched)">Save</button>
<button type="button" class="btn btn-secondary mr-2" aria-describedby="password-panel" (click)="resetPasswordForm()">Reset</button>
<button type="submit" class="btn btn-primary" aria-describedby="password-panel" (click)="savePasswordForm()" [disabled]="!passwordChangeForm.valid || !(passwordChangeForm.dirty || passwordChangeForm.touched)">Save</button>
</div>
</form>
</ng-template>