From de9941cc12f4d26ca90e82ee452365388956e8bb Mon Sep 17 00:00:00 2001
From: Joseph Milazzo <joseph.v.milazzo@gmail.com>
Date: Mon, 30 Aug 2021 13:14:05 -0700
Subject: [PATCH] Misc accessibility fixes (#536)

---
 API/Services/ArchiveService.cs                       |  2 +-
 .../manage-library/manage-library.component.html     |  4 ++--
 .../admin/manage-users/manage-users.component.html   |  6 +++---
 .../series-bookmarks/series-bookmarks.component.html |  8 ++++----
 .../user-preferences/user-preferences.component.html | 12 ++++++------
 5 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/API/Services/ArchiveService.cs b/API/Services/ArchiveService.cs
index 3e019e583..d8b381b60 100644
--- a/API/Services/ArchiveService.cs
+++ b/API/Services/ArchiveService.cs
@@ -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;
 
diff --git a/UI/Web/src/app/admin/manage-library/manage-library.component.html b/UI/Web/src/app/admin/manage-library/manage-library.component.html
index 44cf374e6..2a82cb003 100644
--- a/UI/Web/src/app/admin/manage-library/manage-library.component.html
+++ b/UI/Web/src/app/admin/manage-library/manage-library.component.html
@@ -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>
diff --git a/UI/Web/src/app/admin/manage-users/manage-users.component.html b/UI/Web/src/app/admin/manage-users/manage-users.component.html
index 232b9b2da..b73841af4 100644
--- a/UI/Web/src/app/admin/manage-users/manage-users.component.html
+++ b/UI/Web/src/app/admin/manage-users/manage-users.component.html
@@ -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>
diff --git a/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html b/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html
index d4ce0ff4a..334110032 100644
--- a/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html
+++ b/UI/Web/src/app/user-settings/series-bookmarks/series-bookmarks.component.html
@@ -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>
diff --git a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html
index d72b7cb69..ed5078041 100644
--- a/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html
+++ b/UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html
@@ -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>