Fixed edit metadata page accessibility issue

- Hide fontawesome icons for screen readers - Added missing aria-label to metadata field input
DSpace · Dec 20, 2023 · d7017ca · d7017ca
1 parent 846e341
commit d7017ca
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html b/src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.html
@@ -2,23 +2,23 @@
   <div class="button-row top d-flex my-2 space-children-mr ml-gap">
     <button class="mr-auto btn btn-success" id="dso-add-btn" [disabled]="form.newValue || (saving$ | async)"
             [title]="dsoType + '.edit.metadata.add-button' | translate"
-            (click)="add()"><i class="fas fa-plus"></i>
+            (click)="add()"><i class="fas fa-plus" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.add-button' | translate }}</span>
     </button>
     <button class="btn btn-warning ml-1" id="dso-reinstate-btn" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
             [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
-            (click)="reinstate()"><i class="fas fa-undo-alt"></i>
+            (click)="reinstate()"><i class="fas fa-undo-alt" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.reinstate-button' | translate }}</span>
     </button>
     <button class="btn btn-primary ml-1" id="dso-save-btn" [disabled]="!hasChanges || (saving$ | async)"
             [title]="dsoType + '.edit.metadata.save-button' | translate"
-            (click)="submit()"><i class="fas fa-save"></i>
+            (click)="submit()"><i class="fas fa-save" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.save-button' | translate }}</span>
     </button>
     <button class="btn btn-danger ml-1" id="dso-discard-btn" *ngIf="!isReinstatable"
             [title]="dsoType + '.edit.metadata.discard-button' | translate"
             [disabled]="!hasChanges || (saving$ | async)"
-            (click)="discard()"><i class="fas fa-times"></i>
+            (click)="discard()"><i class="fas fa-times" aria-hidden="true"></i>
       <span class="d-none d-sm-inline">&nbsp;{{ dsoType + '.edit.metadata.discard-button' | translate }}</span>
     </button>
   </div>
@@ -74,16 +74,19 @@
     <div class="mt-2 float-right space-children-mr ml-gap">
       <button class="btn btn-warning" *ngIf="isReinstatable" [disabled]="(saving$ | async)"
               [title]="dsoType + '.edit.metadata.reinstate-button' | translate"
-              (click)="reinstate()"><i class="fas fa-undo-alt"></i> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
+              (click)="reinstate()">
+        <i class="fas fa-undo-alt" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.reinstate-button' | translate }}
       </button>
       <button class="btn btn-primary" [disabled]="!hasChanges || (saving$ | async)"
               [title]="dsoType + '.edit.metadata.save-button' | translate"
-              (click)="submit()"><i class="fas fa-save"></i> {{ dsoType + '.edit.metadata.save-button' | translate }}
+              (click)="submit()">
+        <i class="fas fa-save" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.save-button' | translate }}
       </button>
       <button class="btn btn-danger" *ngIf="!isReinstatable"
               [title]="dsoType + '.edit.metadata.discard-button' | translate"
               [disabled]="!hasChanges || (saving$ | async)"
-              (click)="discard()"><i class="fas fa-times"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
+              (click)="discard()">
+        <i class="fas fa-times" aria-hidden="true"></i> {{ dsoType + '.edit.metadata.discard-button' | translate }}
       </button>
     </div>
   </div>

diff --git a/...o-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html b/...o-shared/dso-edit-metadata/metadata-field-selector/metadata-field-selector.component.html
@@ -1,6 +1,7 @@
 <div class="w-100 position-relative">
   <input type="text" #mdFieldInput
          class="form-control" [ngClass]="{ 'is-invalid': showInvalid }"
+         [attr.aria-label]="(dsoType + '.edit.metadata.metadatafield') | translate"
          [value]="mdField"
          [formControl]="input"
          (focusin)="query$.next(mdField)"
@@ -10,9 +11,9 @@
   <div class="autocomplete dropdown-menu" [ngClass]="{'show': (mdFieldOptions$ | async)?.length > 0}">
     <div class="dropdown-list">
       <div *ngFor="let mdFieldOption of (mdFieldOptions$ | async)">
-        <a href="javascript:void(0);" class="d-block dropdown-item" (click)="select(mdFieldOption)">
+        <button class="d-block dropdown-item" (click)="select(mdFieldOption)">
           <span [innerHTML]="mdFieldOption"></span>
-        </a>
+        </button>
       </div>
     </div>
   </div>

diff --git a/src/assets/i18n/en.json5 b/src/assets/i18n/en.json5
@@ -2168,6 +2168,8 @@
 
   "item.edit.metadata.headers.value": "Value",
 
+  "item.edit.metadata.metadatafield": "Edit field",
+
   "item.edit.metadata.metadatafield.error": "An error occurred validating the metadata field",
 
   "item.edit.metadata.metadatafield.invalid": "Please choose a valid metadata field",
@@ -2692,6 +2694,8 @@
 
   "itemtemplate.edit.metadata.headers.value": "Value",
 
+  "itemtemplate.edit.metadata.metadatafield": "Edit field",
+
   "itemtemplate.edit.metadata.metadatafield.error": "An error occurred validating the metadata field",
 
   "itemtemplate.edit.metadata.metadatafield.invalid": "Please choose a valid metadata field",