Fixed item page accessibility issues

Author: alexandrevryghem

src/app/bitstream-page/bitstream-download-page/bitstream-download-page.component.html

@@ -1,5 +1,5 @@
 <div class="container">
-  <h3>{{'bitstream.download.page' | translate:{ bitstream: dsoNameService.getName((bitstream$ | async)) } }}</h3>
+  <h1 class="h2">{{'bitstream.download.page' | translate:{ bitstream: dsoNameService.getName((bitstream$ | async)) } }}</h1>
   <div class="pt-3">
     <button (click)="back()" class="btn btn-outline-secondary">
       <i class="fas fa-arrow-left"></i> {{'bitstream.download.page.back' | translate}}

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html

@@ -4,6 +4,7 @@
   <div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex align-items-center" *ngVar="(mdRepresentation$ | async) as mdRepresentation" role="cell">
     <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing && !mdRepresentation">{{ mdValue.newValue.value }}</div>
     <textarea class="form-control" rows="5" *ngIf="mdValue.editing && !mdRepresentation" [(ngModel)]="mdValue.newValue.value"
+              [attr.aria-label]="(dsoType + '.edit.metadata.edit.value') | translate"
               [dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
     <div class="d-flex" *ngIf="mdRepresentation">
       <a class="mr-2" target="_blank" [routerLink]="mdRepresentationItemRoute$ | async">{{ mdRepresentationName$ | async }}</a>
@@ -13,6 +14,7 @@
   <div class="ds-flex-cell ds-lang-cell" role="cell">
     <div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing">{{ mdValue.newValue.language }}</div>
     <input class="form-control" type="text" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.language"
+           [attr.aria-label]="(dsoType + '.edit.metadata.edit.language') | translate"
            [dsDebounce]="300" (onDebounce)="confirm.emit(false)" />
   </div>
   <div class="text-center ds-flex-cell ds-edit-cell" role="cell">

src/app/item-page/bitstreams/upload/upload-bitstream.component.html

@@ -2,7 +2,7 @@
   <ng-container *ngIf="bundles">
     <div class="row">
       <div class="col-12 mb-2">
-        <h2>{{'item.bitstreams.upload.title' | translate}}</h2>
+        <h1>{{'item.bitstreams.upload.title' | translate}}</h1>
         <ng-container *ngVar="(itemRD$ | async)?.payload as item">
           <div *ngIf="item">
             <span class="font-weight-bold">{{'item.bitstreams.upload.item' | translate}}</span>

src/app/item-page/full/field-components/file-section/full-file-section.component.html

@@ -1,7 +1,7 @@
 <ds-metadata-field-wrapper [label]="label | translate">
     <div *ngVar="(originals$ | async)?.payload as originals">
         <div *ngIf="hasValuesInBundle(originals)">
-            <h5 class="simple-view-element-header">{{"item.page.filesection.original.bundle" | translate}}</h5>
+            <h3 class="h5 simple-view-element-header">{{"item.page.filesection.original.bundle" | translate}}</h3>
             <ds-pagination *ngIf="originals?.page?.length > 0"
                            [hideGear]="true"
                            [hidePagerWhenSinglePage]="true"
@@ -44,7 +44,7 @@ <h5 class="simple-view-element-header">{{"item.page.filesection.original.bundle"
     </div>
     <div *ngVar="(licenses$ | async)?.payload as licenses">
         <div *ngIf="hasValuesInBundle(licenses)">
-            <h5 class="simple-view-element-header">{{"item.page.filesection.license.bundle" | translate}}</h5>
+            <h3 class="h5 simple-view-element-header">{{"item.page.filesection.license.bundle" | translate}}</h3>
             <ds-pagination *ngIf="licenses?.page?.length > 0"
                            [hideGear]="true"
                            [hidePagerWhenSinglePage]="true"

src/app/item-page/simple/related-entities/tabbed-related-entities-search/tabbed-related-entities-search.component.html

@@ -1,6 +1,6 @@
 <ng-container *ngIf="relationTypes.length > 1">
   <ul ngbNav #tabs="ngbNav" [destroyOnHide]="true" [activeId]="activeTab$ | async" (navChange)="onTabChange($event)" class="nav-tabs">
-    <li *ngFor="let relationType of relationTypes" [ngbNavItem]="relationType.filter">
+    <li *ngFor="let relationType of relationTypes" [ngbNavItem]="relationType.filter" rel="presentation">
       <a ngbNavLink>{{'item.page.relationships.' + relationType.label | translate}}</a>
       <ng-template ngbNavContent>
         <div class="mt-4">

src/app/item-page/versions/item-versions.component.html

@@ -1,7 +1,7 @@
 <div *ngVar="(versionsRD$ | async)?.payload as versions">
   <div *ngVar="(versionRD$ | async)?.payload as itemVersion">
     <div class="mb-2" *ngIf="versions?.page?.length > 0 || displayWhenEmpty">
-      <h2 *ngIf="displayTitle">{{"item.version.history.head" | translate}}</h2>
+      <h2 *ngIf="displayTitle" class="h4">{{"item.version.history.head" | translate}}</h2>
       <ds-alert [type]="AlertTypeEnum.Info" *ngIf="itemVersion">
         {{ "item.version.history.selected.alert" | translate : {version: itemVersion.version} }}
       </ds-alert>
@@ -98,8 +98,9 @@ <h2 *ngIf="displayTitle">{{"item.version.history.head" | translate}}</h2>
                 <ng-container *ngIf="isThisBeingEdited(version); then editSummary else showSummary"></ng-container>
                 <ng-template #showSummary>{{version?.summary}}</ng-template>
                 <ng-template #editSummary>
-                  <input class="form-control" type="text" [(ngModel)]="versionBeingEditedSummary"
-                         (keyup.enter)="onSummarySubmit()"/>
+                  <input [attr.aria-label]="'item.version.history.table.action.editSummary' | translate"
+                         [(ngModel)]="versionBeingEditedSummary" (keyup.enter)="onSummarySubmit()"
+                         class="form-control" type="text"/>
                 </ng-template>
               </div>
 

src/app/shared/file-download-link/file-download-link.component.html

@@ -1,5 +1,5 @@
 <a [routerLink]="(bitstreamPath$| async)?.routerLink" class="dont-break-out" [queryParams]="(bitstreamPath$| async)?.queryParams" [target]="isBlank ? '_blank': '_self'" [ngClass]="cssClasses">
-  <span *ngIf="!(canDownload$ |async)" class="pr-1"><i class="fas fa-lock"></i></span>
+  <span *ngIf="!(canDownload$ |async)" [attr.aria-label]="'file-download-link.restricted' | translate" class="pr-1"><i class="fas fa-lock"></i></span>
   <ng-container *ngTemplateOutlet="content"></ng-container>
 </a>
 

src/app/shared/file-download-link/file-download-link.component.spec.ts

@@ -10,6 +10,7 @@ import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import { Item } from '../../core/shared/item.model';
 import { getItemModuleRoute } from '../../item-page/item-page-routing-paths';
 import { RouterLinkDirectiveStub } from '../testing/router-link-directive.stub';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('FileDownloadLinkComponent', () => {
   let component: FileDownloadLinkComponent;
@@ -41,6 +42,9 @@ describe('FileDownloadLinkComponent', () => {
 
   function initTestbed() {
     TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+      ],
       declarations: [FileDownloadLinkComponent, RouterLinkDirectiveStub],
       providers: [
         {provide: AuthorizationDataService, useValue: authorizationService},

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/dynamic-lookup-relation-modal.component.html

@@ -9,7 +9,7 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
     <ds-themed-loading *ngIf="!item || !collection"></ds-themed-loading>
     <ng-container *ngIf="item && collection">
         <ul ngbNav #nav="ngbNav" class="nav-tabs">
-            <li ngbNavItem>
+            <li ngbNavItem role="presentation">
                 <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + relationshipOptions.relationshipType | translate  : { count: (totalInternal$ | async)} }}</a>
                 <ng-template ngbNavContent>
                     <ds-themed-dynamic-lookup-relation-search-tab
@@ -31,7 +31,7 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
                     </ds-themed-dynamic-lookup-relation-search-tab>
                 </ng-template>
             </li>
-            <li ngbNavItem *ngFor="let source of (externalSourcesRD$ | async); let idx = index">
+            <li ngbNavItem *ngFor="let source of (externalSourcesRD$ | async); let idx = index" role="presentation">
                 <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.search-tab.tab-title.' + source.id | translate  : { count: (totalExternal$ | async)[idx] } }}</a>
                 <ng-template ngbNavContent>
                     <ds-themed-dynamic-lookup-relation-external-source-tab
@@ -49,7 +49,7 @@ <h4 class="modal-title" id="modal-title">{{ ('submission.sections.describe.relat
                     </ds-themed-dynamic-lookup-relation-external-source-tab>
                 </ng-template>
             </li>
-            <li ngbNavItem *ngIf="!isEditRelationship">
+            <li ngbNavItem *ngIf="!isEditRelationship" role="presentation">
                 <a ngbNavLink>{{'submission.sections.describe.relationship-lookup.selection-tab.tab-title' | translate : { count: (selection$ | async)?.length } }}</a>
                 <ng-template ngbNavContent>
                     <ds-dynamic-lookup-relation-selection-tab

src/app/shared/resource-policies/form/resource-policy-form.component.html

@@ -9,13 +9,13 @@
     <label for="ResourcePolicyObject">{{'resource-policies.form.eperson-group-list.label' | translate}}</label>
     <input id="ResourcePolicyObject" class="form-control mb-3" type="text" [value]="resourcePolicyTargetName$ | async">
     <ul ngbNav #nav="ngbNav" class="nav-pills" [(activeId)]="navActiveId" (navChange)="onNavChange($event)">
-      <li [ngbNavItem]="'eperson'">
+      <li [ngbNavItem]="'eperson'" role="presentation">
         <a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.eperson' | translate}}</a>
         <ng-template ngbNavContent>
           <ds-eperson-group-list (select)="updateObjectSelected($event, true)"></ds-eperson-group-list>
         </ng-template>
       </li>
-      <li [ngbNavItem]="'group'">
+      <li [ngbNavItem]="'group'" role="presentation">
         <a ngbNavLink>{{'resource-policies.form.eperson-group-list.tab.group' | translate}}</a>
         <ng-template ngbNavContent>
           <ds-eperson-group-list [isListOfEPerson]="false"