lp1904036-patron-edit-angular-screenreader-tweaks user/khuckins/lp1904036-patron-ui-angular-v7-screenreader-tweaks
authorKyle Huckins <khuckins@catalyte.io>
Wed, 19 Jan 2022 21:25:03 +0000 (21:25 +0000)
committerKyle Huckins <khuckins@catalyte.io>
Tue, 25 Jan 2022 17:59:21 +0000 (17:59 +0000)
- Add additional screen-reader only toolbar to bottom of Patron Edit page

Signed-off-by: Kyle Huckins <khuckins@catalyte.io>
Open-ILS/src/eg2/src/app/staff/circ/patron/edit-toolbar.component.html
Open-ILS/src/eg2/src/app/staff/circ/patron/edit-toolbar.component.ts
Open-ILS/src/eg2/src/app/staff/circ/patron/patron.component.html
Open-ILS/src/eg2/src/app/staff/circ/patron/register.component.html

index 3afbada..dee0859 100644 (file)
@@ -1,6 +1,6 @@
 <div class="row pb-2 pt-2">
 
-  <div class="col-lg-6">
+  <div class="col-lg-6" *ngIf="!screenReaderMode">
     <span class="font-weight-bold" i18n>Show:</span>
     <button class="btn btn-sm btn-outline-dark ml-2" 
       [disabled]="visibilityLevel == 2"
       (click)="changeFields(0)" i18n>All Fields</button>
   </div>
 
-  <div class="col-lg-6 d-flex">
+  <div class="col-lg-6 d-flex" [ngClass]="{'sr-only': screenReaderMode}">
     <div class="ml-auto">
-      <button class="btn btn-outline-dark"
+      <button class="btn btn-outline-dark" aria-label="Print"
         (click)="printClicked.emit()" i18n>Print</button>
       <button class="btn btn-outline-dark ml-2" [disabled]="disableSave"
-        (click)="saveClicked.emit()" i18n>Save</button>
+        (click)="saveClicked.emit()" aria-label="Save" i18n>Save</button>
       <button class="btn btn-outline-dark ml-2" [disabled]="disableSave"
-        (click)="saveCloneClicked.emit()" i18n>Save &amp; Clone</button>
+        (click)="saveCloneClicked.emit()" aria-label="Save and Clone" i18n>Save &amp; Clone</button>
     </div>
   </div>
 </div>
 
-<div class="row pb-1 pt-1" *ngIf="addressAlerts.length > 0">
+<div class="row pb-1 pt-1" *ngIf="addressAlerts.length > 0 && !screenReaderMode">
   <div class="col-lg-12 d-flex">
     <div class="ml-auto mr-2">
       <div *ngFor="let alert of addressAlerts"
@@ -36,7 +36,7 @@
   </div>
 </div>
 
-<div class="row pb-1 pt-1" *ngIf="dupesFound().length > 0">
+<div class="row pb-1 pt-1" *ngIf="dupesFound().length > 0 && !screenReaderMode">
   <div class="col-lg-12 d-flex">
     <div class="ml-auto mr-2">
       <div *ngFor="let dupe of dupesFound()"
index a72cf7d..87c27fe 100644 (file)
@@ -30,6 +30,7 @@ interface DupeSearch {
 export class EditToolbarComponent implements OnInit {
 
     @Input() patronId: number;
+    @Input() screenReaderMode: boolean = false
 
     disableSave = false;
     visibilityLevel: VisibilityLevel = VisibilityLevel.ALL_FIELDS;
@@ -42,7 +43,7 @@ export class EditToolbarComponent implements OnInit {
 
     searches: {[category: string]: DupeSearch} = {};
     addressAlerts: IdlObject[] = [];
-
+    
     constructor(
         private org: OrgService,
         private idl: IdlService,
index 823af65..60fc5ec 100644 (file)
           <ng-template ngbNavContent>
             <eg-patron-edit #patronEditor [patronId]="patronId" [toolbar]="editorToolbar">
             </eg-patron-edit> 
+            
+            <ng-container *ngIf="patronTab === 'edit'">
+              <eg-patron-edit-toolbar #srToolbar [patronId]="patronId" [screenReaderMode]="true" >
+              </eg-patron-edit-toolbar>
+            </ng-container>
           </ng-template>
         </li>
 
     <div *ngIf="!loading" class="pt-3">
       <div [ngbNavOutlet]="patronNav"></div>
     </div>
+    
   </div>
 </div>
 
index 57f3229..0d1effb 100644 (file)
@@ -11,3 +11,5 @@
   [cloneId]="cloneId" [toolbar]="editorToolbar">
 </eg-patron-edit>
 
+<eg-patron-edit-toolbar #srToolbar [screenReaderMode]="true" >
+</eg-patron-edit-toolbar>
\ No newline at end of file