LP2002363 Aria labels for catalog search +/- buttons user/sleary/lp2002363-aria-label-search-row-buttons
authorStephanie Leary <stephanie.leary@equinoxoli.org>
Wed, 3 May 2023 17:39:41 +0000 (17:39 +0000)
committerStephanie Leary <stephanie.leary@equinoxoli.org>
Mon, 8 May 2023 22:54:11 +0000 (22:54 +0000)
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>
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>