LP2002363 Aria labels for catalog search +/- buttons
authorStephanie Leary <stephanie.leary@equinoxoli.org>
Wed, 3 May 2023 17:39:41 +0000 (17:39 +0000)
committerGalen Charlton <gmc@equinoxOLI.org>
Fri, 12 May 2023 13:56:07 +0000 (09:56 -0400)
Adds aria-label to the staff catalog search row plus/minus buttons. The
labels match the title attributes on the buttons, to allow dictation
users to identify the phrases that should be spoken to select the
buttons.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxoli.org>
Signed-off-by: Chrystal Messam <messamc@liveoakpl.org>
Signed-off-by: Galen Charlton <gmc@equinoxOLI.org>
Open-ILS/src/eg2/src/app/staff/catalog/search-form.component.html

index f2111de..2948433 100644 (file)
             <div class="col-lg-2 ps-0 pe-1">
               <button class="btn btn-sm material-icon-button"
                 (click)="addSearchRow(idx + 1)"
-                i18n-title title="Add Search Row">
-                <span class="material-icons">add_circle_outline</span>
+                i18n-title title="Add Search Row"
+                i18n-aria-label aria-label="Add Search Row">
+                <span class="material-icons" aria-hidden="true">add_circle_outline</span>
               </button>
               <button class="btn btn-sm material-icon-button"
                 [disabled]="context.termSearch.query.length < 2"
                 (click)="delSearchRow(idx)"
-                i18n-title title="Remove Search Row">
-                <span class="material-icons">remove_circle_outline</span>
+                i18n-title title="Remove Search Row"
+                i18n-aria-label aria-label="Remove Search Row">
+                <span class="material-icons" aria-hidden="true">remove_circle_outline</span>
               </button>
               <button *ngIf="idx === 0"
                 class="btn btn-sm material-icon-button" 
                 type="button" (click)="toggleFilters()" 
-                title="Toggle Search Filters" i18n-title>
-                <span class="material-icons">more_vert</span>
+                title="Toggle Search Filters" i18n-title
+                aria-label="Toggle Search Filters" i18n-aria-label>
+                <span class="material-icons" aria-hidden="true">more_vert</span>
               </button>
             </div>
           </div>