improved "tab" navigation in safari

src/app/breadcrumbs/breadcrumbs.component.html

@@ -10,7 +10,7 @@
     </nav>
 
     <ng-template #breadcrumb let-text="text" let-url="url">
-        <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate" [ngbTooltip]="text | translate" placement="bottom" >{{text | translate}}</a></div></li>
+        <li class="breadcrumb-item"><div class="breadcrumb-item-limiter"><a [routerLink]="url" class="text-truncate" [ngbTooltip]="text | translate" placement="bottom" role="link" tabindex="0">{{text | translate}}</a></div></li>
     </ng-template>
 
     <ng-template #activeBreadcrumb let-text="text">

src/app/browse-by/browse-by-taxonomy-page/browse-by-taxonomy-page.component.html

@@ -10,6 +10,8 @@
   <a class="btn btn-primary"
      [routerLink]="['/search']"
      [queryParams]="queryParams"
-     [queryParamsHandling]="'merge'">
+     [queryParamsHandling]="'merge'"
+     role="link"
+     tabindex="0">
     {{ 'browse.taxonomy.button' | translate }}</a>
 </div>

src/app/community-list-page/community-list/community-list.component.html

@@ -9,7 +9,7 @@
       </span>
       <div class="align-middle pt-2">
         <button *ngIf="!(dataSource.loading$ | async)" (click)="getNextPage(node)"
-           class="btn btn-outline-primary btn-sm" role="button">
+           class="btn btn-outline-primary btn-sm" role="button" tabindex="0">
            <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
         </button>
         <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>
@@ -27,7 +27,11 @@
       <button *ngIf="hasChild(null, node) | async" type="button" class="btn btn-default" cdkTreeNodeToggle
               [attr.aria-label]="(node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) }"
               (click)="toggleExpanded(node)"
-              data-test="expand-button">
+              data-test="expand-button"
+              (keyup.enter)="toggleExpanded(node)"
+              (keyup.space)="toggleExpanded(node)"
+              role="button"
+              tabindex="0">
         <span class="{{node.isExpanded ? 'fa fa-chevron-down' : 'fa fa-chevron-right'}}"
               aria-hidden="true"></span>
         <span class="sr-only">{{ (node.isExpanded ? 'communityList.collapse' : 'communityList.expand') | translate:{ name: dsoNameService.getName(node.payload) } }}</span>
@@ -38,7 +42,7 @@
       </span>
       <div class="d-flex flex-row">
         <span class="align-middle pt-2 lead">
-          <a [routerLink]="node.route" class="lead">{{ dsoNameService.getName(node.payload) }}</a>
+          <a [routerLink]="node.route" class="lead" role="link" tabindex="0">{{ dsoNameService.getName(node.payload) }}</a>
           <span class="pr-2">&nbsp;</span>
           <span *ngIf="node.payload.archivedItemsCount >= 0" class="badge badge-pill badge-secondary align-top archived-items-lead">{{node.payload.archivedItemsCount}}</span>
         </span>
@@ -72,7 +76,7 @@
         <span class="fa fa-chevron-right"></span>
       </span>
       <h6 class="align-middle pt-2">
-        <a [routerLink]="node.route" class="lead">{{ dsoNameService.getName(node.payload) }}</a>
+        <a [routerLink]="node.route" class="lead" role="link" tabindex="0">{{ dsoNameService.getName(node.payload) }}</a>
       </h6>
     </div>
     <ds-truncatable [id]="node.id">

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType != linkTypes.None"
        [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>
@@ -37,7 +37,7 @@
       <div *ngIf="linkType != linkTypes.None" class="text-center">
         <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="link" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType != linkTypes.None"
        [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>
@@ -37,7 +37,7 @@
       <div *ngIf="linkType != linkTypes.None" class="text-center">
         <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="link" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType != linkTypes.None"
        [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>
@@ -41,7 +41,7 @@
       <div *ngIf="linkType != linkTypes.None" class="text-center">
         <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="link" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="showThumbnails" class="col-3 col-md-2">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out">
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out" role="link" tabindex="0">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
       </ds-thumbnail>
     </a>
@@ -17,7 +17,7 @@
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
-         [innerHTML]="dsoTitle"></a>
+         [innerHTML]="dsoTitle" role="link" tabindex="0"></a>
       <span *ngIf="linkType == linkTypes.None"
             class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></span>

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="showThumbnails" class="col-3 col-md-2">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out">
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out" role="link" tabindex="0">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
       </ds-thumbnail>
     </a>
@@ -17,7 +17,7 @@
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
-         [innerHTML]="dsoTitle"></a>
+         [innerHTML]="dsoTitle" role="link" tabindex="0"></a>
       <span *ngIf="linkType == linkTypes.None"
             class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></span>

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html

@@ -1,7 +1,7 @@
 <div class="row">
   <div *ngIf="showThumbnails" class="col-3 col-md-2">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out">
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out" role="link" tabindex="0">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
       </ds-thumbnail>
     </a>
@@ -15,7 +15,7 @@
     <ds-truncatable [id]="dso.id">
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
-         [innerHTML]="dsoTitle"></a>
+         [innerHTML]="dsoTitle" role="link" tabindex="0"></a>
       <span *ngIf="linkType == linkTypes.None"
             class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></span>

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html

@@ -51,7 +51,7 @@
       [label]="'journalissue.page.keyword'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html

@@ -34,7 +34,7 @@
       [label]="'journalvolume.page.description'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html

@@ -33,7 +33,7 @@
       [label]="'journal.page.description'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType != linkTypes.None"
        [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>
@@ -43,7 +43,7 @@
       <div *ngIf="linkType != linkTypes.None" class="text-center">
         <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="button" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType != linkTypes.None"
        [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>
@@ -36,7 +36,7 @@
       <div *ngIf="linkType != linkTypes.None" class="text-center">
         <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="button" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html

@@ -6,7 +6,7 @@
     <a *ngIf="linkType != linkTypes.None"
        [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="0">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>
@@ -31,7 +31,7 @@
       <div *ngIf="linkType != linkTypes.None" class="text-center">
         <a [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
-           class="lead btn btn-primary viewButton">{{ 'search.results.view-result' | translate}}</a>
+           class="lead btn btn-primary viewButton" role="button" tabindex="0">{{ 'search.results.view-result' | translate}}</a>
       </div>
     </div>
   </ds-truncatable>

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.html

@@ -2,7 +2,7 @@
     <div *ngIf="showThumbnails" class="col-3 col-md-2">
         <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
            [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-           [routerLink]="[itemPageRoute]" class="dont-break-out">
+           [routerLink]="[itemPageRoute]" class="dont-break-out" role="link" tabindex="0">
             <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
                           [defaultImage]="'assets/images/orgunit-placeholder.svg'"
                           [alt]="'thumbnail.orgunit.alt'"
@@ -23,7 +23,7 @@
             <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
                [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
                [routerLink]="[itemPageRoute]" class="lead"
-               [innerHTML]="dsoTitle || ('orgunit.listelement.no-title' | translate)"></a>
+               [innerHTML]="dsoTitle || ('orgunit.listelement.no-title' | translate)" role="link" tabindex="0"></a>
             <span *ngIf="linkType == linkTypes.None"
                   class="lead"
                   [innerHTML]="dsoTitle || ('orgunit.listelement.no-title' | translate)"></span>

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="showThumbnails" class="col-3 col-md-2">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-       [routerLink]="[itemPageRoute]" class="dont-break-out">
+       [routerLink]="[itemPageRoute]" class="dont-break-out" role="link" tabindex="0">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
                     [defaultImage]="'assets/images/person-placeholder.svg'"
                     [alt]="'thumbnail.person.alt'"
@@ -23,7 +23,7 @@
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead"
-         [innerHTML]="dsoTitle || ('person.listelement.no-title' | translate)"></a>
+         [innerHTML]="dsoTitle || ('person.listelement.no-title' | translate)" role="link" tabindex="0"></a>
       <span *ngIf="linkType == linkTypes.None"
             class="lead"
             [innerHTML]="dsoTitle || ('person.listelement.no-title' | translate)"></span>

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html

@@ -2,7 +2,7 @@
   <div *ngIf="showThumbnails" class="col-3 col-md-2">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
        [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-       [routerLink]="[itemPageRoute]" class="dont-break-out">
+       [routerLink]="[itemPageRoute]" class="dont-break-out" role="link" tabindex="0">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
                     [defaultImage]="'assets/images/project-placeholder.svg'"
                     [alt]="'thumbnail.project.alt'"
@@ -23,7 +23,7 @@
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
-         [innerHTML]="dsoTitle"></a>
+         [innerHTML]="dsoTitle" role="link" tabindex="0"></a>
       <span *ngIf="linkType == linkTypes.None"
             class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></span>

src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html

@@ -42,7 +42,7 @@
       [label]="'orgunit.page.description'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/entity-groups/research-entities/item-pages/person/person.component.html

@@ -50,7 +50,7 @@
       [label]="'person.page.name'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/entity-groups/research-entities/item-pages/project/project.component.html

@@ -62,7 +62,7 @@
       [label]="'project.page.keyword'">
     </ds-generic-item-page-field>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button" tabindex="0">
         {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/footer/footer.component.html

@@ -11,13 +11,13 @@
 
           <ul class="list-unstyled mb-0">
             <li>
-              <a routerLink="./" class="">Lorem ipsum</a>
+              <a routerLink="./" class="" role="link" tabindex="0">Lorem ipsum</a>
             </li>
             <li>
-              <a routerLink="./" class="">Ut facilisis</a>
+              <a routerLink="./" class="" role="link" tabindex="0">Ut facilisis</a>
             </li>
             <li>
-              <a routerLink="./" class="">Aenean sit</a>
+              <a routerLink="./" class="" role="link" tabindex="0">Aenean sit</a>
             </li>
           </ul>
         </div>
@@ -29,7 +29,7 @@
 
           <ul class="list-unstyled mb-0">
             <li>
-              <a routerLink="./" class="">Suspendisse potenti</a>
+              <a routerLink="./" class="" role="link" tabindex="0">Suspendisse potenti</a>
             </li>
           </ul>
         </div>
@@ -57,28 +57,28 @@
     <div class="content-container">
       <p class="m-0">
         <a class="text-white"
-           href="http://www.dspace.org/">{{ 'footer.link.dspace' | translate}}</a>
+           href="http://www.dspace.org/" role="link" tabindex="0">{{ 'footer.link.dspace' | translate}}</a>
         {{ 'footer.copyright' | translate:{year: dateObj | date:'y'} }}
         <a class="text-white"
-           href="https://www.lyrasis.org/">{{ 'footer.link.lyrasis' | translate}}</a>
+           href="https://www.lyrasis.org/" role="link" tabindex="0">{{ 'footer.link.lyrasis' | translate}}</a>
       </p>
       <ul class="footer-info list-unstyled d-flex justify-content-center mb-0">
         <li>
-          <button class="btn btn-link text-white" type="button" (click)="showCookieSettings()">
+          <button class="btn btn-link text-white" type="button" (click)="showCookieSettings()" role="button" tabindex="0">
             {{ 'footer.link.cookies' | translate}}
           </button>
         </li>
         <li *ngIf="showPrivacyPolicy">
           <a class="btn text-white"
-             routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
+             routerLink="info/privacy" role="link" tabindex="0">{{ 'footer.link.privacy-policy' | translate}}</a>
         </li>
         <li *ngIf="showEndUserAgreement">
           <a class="btn text-white"
-             routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
+             routerLink="info/end-user-agreement" role="link" tabindex="0">{{ 'footer.link.end-user-agreement' | translate}}</a>
         </li>
         <li *ngIf="showSendFeedback$ | async">
           <a class="btn text-white"
-             routerLink="info/feedback">{{ 'footer.link.feedback' | translate}}</a>
+             routerLink="info/feedback" role="link" tabindex="0">{{ 'footer.link.feedback' | translate}}</a>
         </li>
       </ul>
     </div>

src/app/header/header.component.html

@@ -1,7 +1,7 @@
 <header>
   <div class="container">
     <div class="d-flex flex-row justify-content-between">
-      <a class="navbar-brand my-2" routerLink="/home">
+      <a class="navbar-brand my-2" routerLink="/home" role="button" tabindex="0">
         <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
 

src/app/home-page/home-news/home-news.component.html

@@ -14,7 +14,7 @@
       <li>issue permanent urls and trustworthy identifiers, including optional integrations with handle.net and DataCite DOI</li>
     </ul>
     <p>Join an international community of <a href="https://wiki.lyrasis.org/display/DSPACE/DSpace+Positioning"
-        target="_blank">leading institutions using DSpace</a>.
+        target="_blank" role="link" tabindex="0">leading institutions using DSpace</a>.
     </p>
   </div>
 </div>

src/app/home-page/recent-item-list/recent-item-list.component.html

@@ -6,7 +6,7 @@
                         <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
                         </ds-listable-object-component-loader>
                 </div>
-                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
+                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4" role="button" tabindex="0"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
         </div>
         <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
         <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}">

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

@@ -6,7 +6,7 @@
         <ds-alert [type]="AlertTypeEnum.Warning">
             <div class="d-flex justify-content-between flex-wrap">
                 <span class="align-self-center">{{'item.alerts.withdrawn' | translate}}</span>
-                <a routerLink="/home" class="btn btn-primary btn-sm">{{"404.link.home-page" | translate}}</a>
+                <a routerLink="/home" class="btn btn-primary btn-sm" role="link" tabindex="0">{{"404.link.home-page" | translate}}</a>
             </div>
         </ds-alert>
     </div>

src/app/item-page/field-components/collections/collections.component.html

@@ -1,6 +1,6 @@
 <ds-metadata-field-wrapper [label]="label | translate">
     <div class="collections">
-        <a *ngFor="let collection of (this.collections$ | async); let last=last;" [routerLink]="['/collections', collection.id]">
+        <a *ngFor="let collection of (this.collections$ | async); let last=last;" [routerLink]="['/collections', collection.id]" role="link" tabindex="0">
             <span>{{ dsoNameService.getName(collection) }}</span><span *ngIf="!last" [innerHTML]="separator"></span>
         </a>
     </div>
@@ -15,6 +15,7 @@
         class="load-more-btn btn btn-sm btn-outline-secondary"
         role="button"
         href="javascript:void(0);"
+        tabindex="0"
     >
         {{'item.page.collections.load-more' | translate}}
     </a>

src/app/item-page/field-components/metadata-uri-values/metadata-uri-values.component.html

@@ -1,5 +1,5 @@
 <ds-metadata-field-wrapper [label]="label | translate">
-    <a class="dont-break-out" *ngFor="let mdValue of mdValues; let last=last;" [href]="mdValue.value" [target]="linkTarget">
+    <a class="dont-break-out" *ngFor="let mdValue of mdValues; let last=last;" [href]="mdValue.value" [target]="linkTarget" role="link" tabindex="0">
        {{ linktext || mdValue.value }}<span *ngIf="!last" [innerHTML]="separator"></span>
     </a>
 </ds-metadata-field-wrapper>

src/app/item-page/field-components/metadata-values/metadata-values.component.html

@@ -21,7 +21,9 @@
     <a class="dont-break-out ds-simple-metadata-link"
       [href]="value"
       [attr.target]="getLinkAttributes(value).target"
-      [attr.rel]="getLinkAttributes(value).rel">
+      [attr.rel]="getLinkAttributes(value).rel"
+      role="link"
+      tabindex="0">
       {{value}}
     </a>
 </ng-template>
@@ -35,5 +37,5 @@
 <ng-template #browselink let-value="value">
   <a class="dont-break-out preserve-line-breaks ds-browse-link"
      [routerLink]="['/browse', browseDefinition.id]"
-     [queryParams]="getQueryParams(value)">{{value}}</a>
+     [queryParams]="getQueryParams(value)" role="link" tabindex="0">{{value}}</a>
 </ng-template>

src/app/item-page/simple/item-types/publication/publication.component.html

@@ -85,7 +85,7 @@
     </ds-item-page-uri-field>
     <ds-item-page-collections [item]="object"></ds-item-page-collections>
     <div>
-      <a class="btn btn-outline-primary" role="button" [routerLink]="[itemPageRoute + '/full']">
+      <a class="btn btn-outline-primary" role="button" [routerLink]="[itemPageRoute + '/full']" role="button" tabindex="0">
         <i class="fas fa-info-circle"></i> {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html

@@ -71,7 +71,7 @@
     </ds-item-page-uri-field>
     <ds-item-page-collections [item]="object"></ds-item-page-collections>
     <div>
-      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button">
+      <a class="btn btn-outline-primary" [routerLink]="[itemPageRoute + '/full']" role="button" tabindex="0">
         <i class="fas fa-info-circle"></i> {{"item.page.link.full" | translate}}
       </a>
     </div>

src/app/lookup-by-id/objectnotfound/objectnotfound.component.html

@@ -3,6 +3,6 @@
   <h2><small><em>{{missingItem}}</em></small></h2>
   <br />
   <p class="text-center">
-    <a routerLink="/home" class="btn btn-primary">{{"404.link.home-page" | translate}}</a>
+    <a routerLink="/home" class="btn btn-primary" role="link" tabindex="0">{{"404.link.home-page" | translate}}</a>
   </p>
 </div>

src/app/page-error/page-error.component.html

@@ -5,6 +5,6 @@
   <p>{{"error-page." + code | translate}}</p>
   <br/>
   <p class="text-center">
-    <a href="/home" class="btn btn-primary">{{ status + ".link.home-page" | translate}}</a>
+    <a href="/home" class="btn btn-primary" role="link" tabindex="0">{{ status + ".link.home-page" | translate}}</a>
   </p>
 </div>

src/app/pagenotfound/pagenotfound.component.html

@@ -5,6 +5,6 @@
   <p>{{"404.help" | translate}}</p>
   <br/>
   <p class="text-center">
-    <a routerLink="/home" class="btn btn-primary">{{"404.link.home-page" | translate}}</a>
+    <a routerLink="/home" class="btn btn-primary" role="link" tabindex="0">{{"404.link.home-page" | translate}}</a>
   </p>
 </div>

src/app/request-copy/grant-deny-request-copy/grant-deny-request-copy.component.html

@@ -8,13 +8,15 @@
       <div class="btn-group ">
         <a [routerLink]="grantRoute$ | async"
            class="btn btn-outline-primary"
-           title="{{'grant-deny-request-copy.grant' | translate }}">
+           title="{{'grant-deny-request-copy.grant' | translate }}"
+           role="button" tabindex="0">
           {{'grant-deny-request-copy.grant' | translate }}
         </a>
 
         <a [routerLink]="denyRoute$ | async"
            class="btn btn-outline-danger"
-           title="{{'grant-deny-request-copy.deny' | translate }}">
+           title="{{'grant-deny-request-copy.deny' | translate }}"
+           role="button" tabindex="0">
           {{'grant-deny-request-copy.deny' | translate }}
         </a>
       </div>
@@ -22,7 +24,7 @@
     <div *ngIf="itemRequestRD.payload.decisionDate" class="processed-message">
       <p>{{'grant-deny-request-copy.processed' | translate}}</p>
       <p class="text-center">
-        <a routerLink="/home" class="btn btn-primary">{{'grant-deny-request-copy.home-page' | translate}}</a>
+        <a routerLink="/home" class="btn btn-primary" role="link" tabindex="0">{{'grant-deny-request-copy.home-page' | translate}}</a>
       </p>
     </div>
   </div>

src/app/search-navbar/search-navbar.component.html

@@ -7,7 +7,7 @@
              [class.display]="searchExpanded ? 'inline-block' : 'none'"
              [tabIndex]="searchExpanded ? 0 : -1"
              [attr.data-test]="'header-search-box' | dsBrowserOnly">
-      <button class="submit-icon btn btn-link btn-link-inline" [attr.aria-label]="'nav.search.button' | translate" type="button" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly">
+      <button class="submit-icon btn btn-link btn-link-inline" [attr.aria-label]="'nav.search.button' | translate" type="button" (click)="searchExpanded ? onSubmit(searchForm.value) : expand()" [attr.data-test]="'header-search-icon' | dsBrowserOnly" role="button" tabindex="0">
         <em class="fas fa-search fa-lg fa-fw"></em>
       </button>
     </form>

src/app/shared/auth-nav-menu/auth-nav-menu.component.html

@@ -6,6 +6,7 @@
       <a href="javascript:void(0);" class="dropdownLogin px-0.5" [attr.aria-label]="'nav.login' |translate"
          (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly"
          role="menuitem"
+         tabindex="0"
          aria-haspopup="menu"
          aria-controls="loginDropdownMenu"
          [attr.aria-expanded]="loginDrop.isOpen()"
@@ -22,6 +23,7 @@
     <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
       <a href="javascript:void(0);"
          role="menuitem"
+         tabindex="0"
          [attr.aria-label]="'nav.user-profile-menu-and-logout' | translate"
          aria-controls="user-menu-dropdown"
          (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate"
@@ -39,10 +41,10 @@
 
 <ng-template #mobileButtons>
   <div data-test="auth-nav">
-    <a *ngIf="!(isAuthenticated | async)" routerLink="/login" routerLinkActive="active" class="loginLink px-0.5" role="button">
+    <a *ngIf="!(isAuthenticated | async)" routerLink="/login" routerLinkActive="active" class="loginLink px-0.5" role="button" tabindex="0">
       {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
     </a>
-    <a *ngIf="(isAuthenticated | async)" role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="logoutLink px-1">
+    <a *ngIf="(isAuthenticated | async)" role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="logoutLink px-1" tabindex="0">
       <i class="fas fa-sign-out-alt fa-lg fa-fw"></i>
       <span class="sr-only">(current)</span>
     </a>

src/app/shared/comcol/comcol-page-browse-by/comcol-page-browse-by.component.html

@@ -9,7 +9,8 @@
          role="tab"
          [routerLink]="option.routerLink"
          [queryParams]="option.params"
-         [class.active]="(currentOptionId$ | async) === option.id">{{ option.label | translate }}</a>
+         [class.active]="(currentOptionId$ | async) === option.id"
+         tabindex="0">{{ option.label | translate }}</a>
     </div>
   </div>
 

src/app/shared/comcol/comcol-page-handle/comcol-page-handle.component.html

@@ -1,4 +1,4 @@
 <p *ngIf="content" class="d-flex flex-wrap gapx-2 text-break">
   <span class="mb-0" *ngIf="title">{{ title | translate }}</span>
-  <a [href]="getHandle()">{{getHandle()}}</a>
+  <a [href]="getHandle()" role="link" tabindex="0">{{getHandle()}}</a>
 </p>

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

@@ -2,7 +2,9 @@
    [queryParams]="(bitstreamPath$| async)?.queryParams"
    [target]="isBlank ? '_blank': '_self'"
    [ngClass]="cssClasses"
-   [attr.aria-label]="('file-download-link.download' | translate) + dsoNameService.getName(bitstream)">
+   [attr.aria-label]="('file-download-link.download' | translate) + dsoNameService.getName(bitstream)"
+   role="link"
+   tabindex="0">
   <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/form/vocabulary-treeview/vocabulary-treeview.component.html

@@ -7,15 +7,15 @@
              [placeholder]="'vocabulary-treeview.search.form.search-placeholder' | translate">
       <div class="input-group-append" id="button-addon4">
         <button class="btn btn-outline-primary" type="button" (click)="search()" [dsBtnDisabled]="!isSearchEnabled()"
-                [attr.aria-label]="'vocabulary-treeview.search.form.search' | translate">
+                [attr.aria-label]="'vocabulary-treeview.search.form.search' | translate" role="button" tabindex="0">
           {{'vocabulary-treeview.search.form.search' | translate}}
         </button>
         <button class="btn btn-outline-secondary" type="button" (click)="reset()"
-                [attr.aria-label]="'vocabulary-treeview.search.form.reset' | translate">
+                [attr.aria-label]="'vocabulary-treeview.search.form.reset' | translate" role="button" tabindex="0">
           {{'vocabulary-treeview.search.form.reset' | translate}}
         </button>
         <button class="btn btn-outline-primary" type="button" (click)="add()" [dsBtnDisabled]="this.vocabularyOptions.closed"
-                [attr.aria-label]="'vocabulary-treeview.search.form.add' | translate">
+                [attr.aria-label]="'vocabulary-treeview.search.form.add' | translate" role="button" tabindex="0">
           {{'vocabulary-treeview.search.form.add' | translate}}
         </button>
       </div>
@@ -46,6 +46,8 @@
                    [(ngModel)]="node.isSelected"
                    [checked]="node.isSelected"
                    (change)="onSelect(node.item)"
+                   role="checkbox"
+                   tabindex="0"
             >
             <span>{{node.item.display}}</span>
           </label>
@@ -55,7 +57,9 @@
                   [ngbTooltip]="node.item?.otherInformation?.note"
                   [openDelay]="500"
                   container="body"
-                  (click)="onSelect(node.item)">
+                  (click)="onSelect(node.item)"
+                  role="button"
+                  tabindex="0">
           <span>{{node.item.display}}</span>
         </button>
     </cdk-tree-node>
@@ -64,7 +68,9 @@
     <cdk-tree-node *cdkTreeNodeDef="let node; when: hasChildren" cdkTreeNodePadding class="d-flex">
         <button type="button" class="btn btn-default px-2 mr-1" cdkTreeNodeToggle
                 [attr.aria-label]="'toggle ' + node.name"
-                (click)="loadChildren(node)">
+                (click)="loadChildren(node)"
+                role="button"
+                tabindex="0">
           <i class="fas fa-fw {{treeControl.isExpanded(node) ? 'fa-angle-down' : 'fa-angle-right'}}"></i>
         </button>
 
@@ -78,6 +84,8 @@
                    [(ngModel)]="node.isSelected"
                    [checked]="node.isSelected"
                    (change)="onSelect(node.item)"
+                   role="checkbox"
+                   tabindex="0"
             >
             <span>{{node.item.display}}</span>
           </label>
@@ -87,21 +95,23 @@
                   [ngbTooltip]="node.item?.otherInformation?.note"
                   [openDelay]="500"
                   container="body"
-                  (click)="onSelect(node.item)">
+                  (click)="onSelect(node.item)"
+                  role="button"
+                  tabindex="0">
             <span>{{node.item.display}}</span>
           </button>
     </cdk-tree-node>
 
     <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMore" cdkTreeNodePadding>
       <button class="btn btn-outline-secondary btn-sm" (click)="loadMore(node.loadMoreParentItem)"
-              [attr.aria-label]="'vocabulary-treeview.load-more' | translate">
+              [attr.aria-label]="'vocabulary-treeview.load-more' | translate" role="button" tabindex="0">
         {{'vocabulary-treeview.load-more' | translate}}...
       </button>
     </cdk-tree-node>
 
     <cdk-tree-node *cdkTreeNodeDef="let node; when: isLoadMoreRoot">
       <button class="btn btn-outline-secondary btn-sm" (click)="loadMoreRoot(node)"
-              [attr.aria-label]="'vocabulary-treeview.load-more' | translate">
+              [attr.aria-label]="'vocabulary-treeview.load-more' | translate" role="button" tabindex="0">
         {{'vocabulary-treeview.load-more' | translate}}...
       </button>
     </cdk-tree-node>

src/app/shared/log-in/methods/log-in-external-provider/log-in-external-provider.component.html

@@ -1,3 +1,3 @@
-<button class="btn btn-lg btn-primary btn-block text-white" (click)="redirectToExternalProvider()">
+<button class="btn btn-lg btn-primary btn-block text-white" (click)="redirectToExternalProvider()" role="button" tabindex="0">
   <i class="fas fa-sign-in-alt"></i> {{getButtonLabel() | translate}}
 </button>

src/app/shared/log-in/methods/password/log-in-password.component.html

@@ -24,14 +24,14 @@
        @fadeOut>{{ (message | async) | translate }}</div>
 
   <button class="btn btn-lg btn-primary btn-block mt-3" type="submit" [attr.data-test]="'login-button' | dsBrowserOnly"
-          [dsBtnDisabled]="!form.valid"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
+          [dsBtnDisabled]="!form.valid" role="button" tabindex="0"><i class="fas fa-sign-in-alt"></i> {{"login.form.submit" | translate}}</button>
 </form>
 
 <div class="mt-2">
-  <a class="dropdown-item" *ngIf="canRegister$ | async" [routerLink]="[getRegisterRoute()]" [attr.data-test]="'register' | dsBrowserOnly" role="menuitem">
+  <a class="dropdown-item" *ngIf="canRegister$ | async" [routerLink]="[getRegisterRoute()]" [attr.data-test]="'register' | dsBrowserOnly" role="menuitem" tabindex="0">
     {{ 'login.form.new-user' | translate }}
   </a>
-  <a class="dropdown-item" [routerLink]="[getForgotRoute()]" [attr.data-test]="'forgot' | dsBrowserOnly" role="menuitem">
+  <a class="dropdown-item" [routerLink]="[getForgotRoute()]" [attr.data-test]="'forgot' | dsBrowserOnly" role="menuitem" tabindex="0">
     {{ 'login.form.forgot-password' | translate }}
   </a>
 </div>

src/app/shared/menu/menu-item/link-menu-item.component.html

@@ -8,4 +8,5 @@
    (keyup.space)="navigate($event)"
    (keydown.enter)="navigate($event)"
    href="javascript:void(0);"
+   tabindex="0"
 >{{item.text | translate}}</a>

src/app/shared/menu/menu-item/text-menu-item.component.html

@@ -1 +1 @@
-<span class="ds-menu-item" [class.disabled]="item.disabled">{{item.text | translate}}</span>
+<span class="ds-menu-item" [class.disabled]="item.disabled" tabindex="0" role="button">{{item.text | translate}}</span>

src/app/shared/object-list/browse-entry-list-element/browse-entry-list-element.component.html

@@ -1,5 +1,5 @@
 <div class="d-flex flex-row">
-    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[]" [queryParams]="queryParams$ | async" [queryParamsHandling]="'merge'" class="lead">
+    <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[]" [queryParams]="queryParams$ | async" [queryParamsHandling]="'merge'" class="lead" role="link" tabindex="0">
         {{object.value}}
     </a>
     <span *ngIf="linkType == linkTypes.None" class="lead">

src/app/shared/object-list/collection-list-element/collection-list-element.component.html

@@ -1,5 +1,5 @@
 <div class="d-flex flex-row">
-  <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/' + object.id]" class="lead">
+  <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/' + object.id]" class="lead" role="link" tabindex="0">
     {{ dsoNameService.getName(object) }}
   </a>
   <span *ngIf="linkType == linkTypes.None" class="lead">

src/app/shared/object-list/community-list-element/community-list-element.component.html

@@ -1,5 +1,5 @@
 <div class="d-flex flex-row">
-  <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/communities/' + object.id]" class="lead">
+  <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/communities/' + object.id]" class="lead" role="link" tabindex="0">
     {{ dsoNameService.getName(object) }}
   </a>
   <span *ngIf="linkType == linkTypes.None" class="lead">

src/app/shared/object-list/metadata-representation-list-element/plain-text/plain-text-metadata-list-element.component.html

@@ -4,14 +4,16 @@
     {{mdRepresentation.getValue()}}
   </span>
   <a *ngIf="(mdRepresentation.representationType=='plain_text') && isLink()" class="dont-break-out"
-  target="_blank" [href]="mdRepresentation.getValue()">
+  target="_blank" [href]="mdRepresentation.getValue()" role="link" tabindex="0">
     {{mdRepresentation.getValue()}}
   </a>
   <span *ngIf="(mdRepresentation.representationType=='authority_controlled')" class="dont-break-out">{{mdRepresentation.getValue()}}</span>
   <a *ngIf="(mdRepresentation.representationType=='browse_link')"
      class="dont-break-out ds-browse-link"
      [routerLink]="['/browse/', mdRepresentation.browseDefinition.id]"
-     [queryParams]="getQueryParams()">
+     [queryParams]="getQueryParams()"
+     role="link"
+     tabindex="0">
     {{mdRepresentation.getValue()}}
   </a>
 </div>

src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html

@@ -1,7 +1,7 @@
 <div class="row">
   <div *ngIf="showThumbnails" class="col-3 col-md-2">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-       [routerLink]="[itemPageRoute]" class="dont-break-out">
+       [routerLink]="[itemPageRoute]" class="dont-break-out" role="link" tabindex="0">
     <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
     </ds-thumbnail>
     </a>
@@ -18,7 +18,7 @@
     <ds-truncatable [id]="dso.id" *ngIf="object !== undefined && object !== null">
       <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType == linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
-         [innerHTML]="dsoTitle"></a>
+         [innerHTML]="dsoTitle" role="link" tabindex="0"></a>
       <span *ngIf="linkType == linkTypes.None" class="lead item-list-title dont-break-out"
             [innerHTML]="dsoTitle"></span>
       <span class="text-muted">

src/app/shared/pagination/pagination.component.html

@@ -7,13 +7,13 @@
       </div>
       <div class="col">
         <div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right">
-          <button class="btn btn-secondary" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true" aria-expanded="false"><i class="fas fa-cog" aria-hidden="true"></i></button>
+          <button class="btn btn-secondary" id="paginationControls" ngbDropdownToggle [title]="'pagination.options.description' | translate" [attr.aria-label]="'pagination.options.description' | translate" aria-haspopup="true" aria-expanded="false" role="button" tabindex="0"><i class="fas fa-cog" aria-hidden="true"></i></button>
           <ul id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" role="menu" ngbDropdownMenu>
             <li role="menuitem">
               <span class="dropdown-header" id="pagination-control_results-per-page" role="heading">{{ 'pagination.results-per-page' | translate}}</span>
               <ul aria-labelledby="pagination-control_results-per-page" class="list-unstyled" role="listbox">
                 <li *ngFor="let item of pageSizeOptions" role="option" [attr.aria-selected]="item === (pageSize$ | async)">
-                  <button (click)="doPageSizeChange(item)" class="dropdown-item">
+                  <button (click)="doPageSizeChange(item)" class="dropdown-item" role="button" tabindex="0">
                     <i [ngClass]="{'invisible': item !== (pageSize$ | async) }" class="fas fa-check" aria-hidden="true"></i> {{item}}
                   </button>
                 </li>
@@ -23,7 +23,7 @@
               <span class="dropdown-header" id="pagination-control_sort-direction" role="heading">{{ 'pagination.sort-direction' | translate}}</span>
               <ul aria-labelledby="pagination-control_sort-direction" class="list-unstyled" role="listbox">
                 <li *ngFor="let direction of (sortDirections | dsKeys)" [attr.aria-selected]="direction.value === (sortDirection$ | async)" role="option">
-                  <button class="dropdown-item" (click)="doSortDirectionChange(direction.value)">
+                  <button class="dropdown-item" (click)="doSortDirectionChange(direction.value)" role="button" tabindex="0">
                     <i [ngClass]="{'invisible': direction.value !== (sortDirection$ |async)}" class="fas fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}}
                   </button>
                 </li>
@@ -56,12 +56,12 @@
     <div *ngIf="!showPaginator" class="d-flex justify-content-between">
         <button id="nav-prev" type="button" class="btn btn-outline-primary float-left"
                 (click)="goPrev()"
-                [dsBtnDisabled]="(objects?.payload?.currentPage <= 1) && (paginationOptions?.currentPage <= 1)">
+                [dsBtnDisabled]="(objects?.payload?.currentPage <= 1) && (paginationOptions?.currentPage <= 1)" role="button" tabindex="0">
           <i class="fas fa-angle-left"></i> {{'pagination.previous.button' |translate}}
         </button>
       <button id="nav-next" type="button" class="btn btn-outline-primary float-right"
               (click)="goNext()"
-              [dsBtnDisabled]="(objects?.payload?.currentPage >= objects?.payload?.totalPages) || (paginationOptions?.currentPage >= objects?.payload?.totalPages)">
+              [dsBtnDisabled]="(objects?.payload?.currentPage >= objects?.payload?.totalPages) || (paginationOptions?.currentPage >= objects?.payload?.totalPages)" role="button" tabindex="0">
           <span [ngbTooltip]="objects?.payload?.currentPage >= objects?.payload?.totalPages ? ('pagination.next.button.disabled.tooltip' |translate) : null">
             <i class="fas fa-angle-right"></i> {{'pagination.next.button' |translate}}
           </span>

src/app/shared/results-back-button/results-back-button.component.html

@@ -1,4 +1,4 @@
-<button class="btn btn-secondary btn-sm mb-2 ng-tns-c242-28" (click)="back()">
+<button class="btn btn-secondary btn-sm mb-2 ng-tns-c242-28" (click)="back()" role="button" tabindex="0">
   <i _ngcontent-dspace-angular-c242="" class="fas fa-arrow-left ng-tns-c242-3"></i>
   {{this.buttonLabel | async}}
 </button>

src/app/shared/rss-feed/rss.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="(isEnabled$ | async) && (hasRoute('home') || hasRoute('collections') || hasRoute('communities'))">
   <div *ngIf="route$ | async as route" class="d-inline-block float-right margin-right">
-    <a [href]="route" class="btn btn-secondary" [title]="'feed.description' | translate" [attr.aria-label]="'feed.description' | translate"><i class="fas fa-rss-square"></i></a>
+    <a [href]="route" class="btn btn-secondary" [title]="'feed.description' | translate" [attr.aria-label]="'feed.description' | translate" role="button" tabindex="0"><i class="fas fa-rss-square"></i></a>
   </div>
 </ng-container>

src/app/shared/search-form/search-form.component.html

@@ -4,7 +4,7 @@
             <div *ngIf="showScopeSelector" class="input-group-prepend">
                 <button class="scope-button btn btn-outline-secondary text-truncate"
                         [ngbTooltip]="dsoNameService.getName(selectedScope | async)" type="button"
-                        (click)="openScopeModal()">
+                        (click)="openScopeModal()" role="button" tabindex="0">
                   {{dsoNameService.getName(selectedScope | async) || ('search.form.scope.all' | translate)}}
                 </button>
             </div>
@@ -12,7 +12,7 @@
                    attr.aria-label="{{ searchPlaceholder }}" [attr.data-test]="'search-box' | dsBrowserOnly"
                    [placeholder]="searchPlaceholder">
             <span class="input-group-append">
-            <button type="submit" class="search-button btn btn-{{brandColor}}" [attr.data-test]="'search-button' | dsBrowserOnly"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>
+            <button type="submit" class="search-button btn btn-{{brandColor}}" [attr.data-test]="'search-button' | dsBrowserOnly" role="button" tabindex="0"><i class="fas fa-search"></i> {{ ('search.form.search' | translate) }}</button>
         </span>
         </div>
     </div>

src/app/shared/search/search-filters/search-filter/search-authority-filter/search-authority-filter.component.html

@@ -8,11 +8,11 @@
         </ng-container>
         <div class="clearfix toggle-more-filters">
             <a class="float-left" *ngIf="!(isLastPage$ | async)"
-               (click)="showMore()" href="javascript:void(0);">
+               (click)="showMore()" href="javascript:void(0);" role="link" tabindex="0">
               {{"search.filters.filter.show-more" | translate}}
             </a>
             <a class="float-right" *ngIf="(currentPage | async) > 1"
-               (click)="showFirstPageOnly()" href="javascript:void(0);">
+               (click)="showFirstPageOnly()" href="javascript:void(0);" role="link" tabindex="0">
               {{"search.filters.filter.show-less" | translate}}
             </a>
         </div>

src/app/shared/search/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html

@@ -8,11 +8,11 @@
         </ng-container>
         <div class="clearfix toggle-more-filters">
             <a class="float-left" *ngIf="!(isLastPage$ | async)"
-               (click)="showMore()" href="javascript:void(0);">
+               (click)="showMore()" href="javascript:void(0);" role="link" tabindex="0">
               {{"search.filters.filter.show-more" | translate}}
             </a>
             <a class="float-right" *ngIf="(currentPage | async) > 1"
-               (click)="showFirstPageOnly()" href="javascript:void(0);">
+               (click)="showFirstPageOnly()" href="javascript:void(0);" role="link" tabindex="0">
               {{"search.filters.filter.show-less" | translate}}
             </a>
         </div>

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-option/search-facet-option.component.html

@@ -2,9 +2,9 @@
    [tabIndex]="-1"
    [routerLink]="[searchLink]"
    [queryParams]="addQueryParams" queryParamsHandling="merge"
-   (click)="announceFilter()">
+   (click)="announceFilter()" role="button" tabindex="0">
   <label class="mb-0 d-flex w-100">
-    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch filter-checkbox"/>
+    <input type="checkbox" [checked]="false" class="my-1 align-self-stretch filter-checkbox" role="checkbox" tabindex="0"/>
     <span class="w-100 pl-1 break-facet">
       <span class="float-right badge badge-secondary badge-pill mt-1 ml-1">{{filterValue.count | dsShortNumber}}</span>
       {{ 'search.filters.' + filterConfig.name + '.' + filterValue.value | translate: {default: filterValue.value} }}

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-range-option/search-facet-range-option.component.html

@@ -1,6 +1,6 @@
 <a *ngIf="isVisible | async" class="d-flex flex-row"
    [routerLink]="[searchLink]"
-   [queryParams]="changeQueryParams" queryParamsHandling="merge">
+   [queryParams]="changeQueryParams" queryParamsHandling="merge" role="button" tabindex="0">
   <span class="filter-value px-1">{{filterValue.label}}</span>
   <span class="float-right filter-value-count ml-auto">
     <span class="badge badge-secondary badge-pill">{{filterValue.count | dsShortNumber}}</span>

src/app/shared/search/search-filters/search-filter/search-facet-filter-options/search-facet-selected-option/search-facet-selected-option.component.html

@@ -1,9 +1,9 @@
 <a class="d-flex flex-row"
    [tabIndex]="-1"
    [routerLink]="[searchLink]"
-   [queryParams]="removeQueryParams" queryParamsHandling="merge">
+   [queryParams]="removeQueryParams" queryParamsHandling="merge" role="link" tabindex="0">
   <label class="mb-0 d-flex w-100">
-    <input type="checkbox" [checked]="true" class="my-1 align-self-stretch filter-checkbox"/>
+    <input type="checkbox" [checked]="true" class="my-1 align-self-stretch filter-checkbox" role="checkbox" tabindex="0"/>
     <span class="filter-value pl-1 break-facet">
         {{ 'search.filters.' + filterConfig.name + '.' + selectedValue.value | translate: {default: selectedValue.label} }}
     </span>

src/app/shared/search/search-filters/search-filter/search-filter.component.html

@@ -5,6 +5,8 @@
           [attr.aria-expanded]="!(collapsed$ | async)"
           [attr.aria-label]="(((collapsed$ | async) ? 'search.filters.filter.expand' : 'search.filters.filter.collapse') | translate) + ' ' + (('search.filters.filter.' + filter.name + '.head') | translate | lowercase)"
           [attr.data-test]="'filter-toggle' | dsBrowserOnly"
+          role="button"
+          tabindex="0"
   >
     <span class="h4 d-inline-block text-left mt-auto mb-auto dark:text-white text-dark">
       {{'search.filters.filter.' + filter.name + '.head'| translate}}

src/app/shared/search/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html

@@ -8,11 +8,13 @@
         </ng-container>
         <div class="clearfix toggle-more-filters">
             <a class="float-left" *ngIf="!(isLastPage$ | async)"
-               (click)="showMore()" href="javascript:void(0);">
+               (click)="showMore()" href="javascript:void(0);"
+               role="button" tabindex="0">
               {{"search.filters.filter.show-more" | translate}}
             </a>
             <a class="float-right" *ngIf="(currentPage | async) > 1"
-               (click)="showFirstPageOnly()" href="javascript:void(0);">
+               (click)="showFirstPageOnly()" href="javascript:void(0);"
+               role="button" tabindex="0">
               {{"search.filters.filter.show-less" | translate}}
             </a>
         </div>
@@ -34,6 +36,6 @@
 <a *ngIf="vocabularyExists$ | async"
      href="javascript:void(0);"
      id="show-{{filterConfig.name}}-tree"
-     (click)="showVocabularyTree()">
+     (click)="showVocabularyTree()" role="button" tabindex="0">
   {{'search.filters.filter.show-tree' | translate: {name: ('search.filters.filter.' + filterConfig.name + '.head' | translate | lowercase )} }}
 </a>

src/app/shared/search/search-filters/search-filter/search-range-filter/search-range-filter.component.html

@@ -26,7 +26,7 @@
                     />
                 </label>
             </div>
-            <button class="sr-only" type="submit">
+            <button class="sr-only" type="submit" role="button" tabindex="0">
                 {{'search.filters.search.submit' | translate}}
             </button>
         </form>
@@ -44,7 +44,7 @@
           <ds-search-facet-range-option *ngFor="let value of page.page; trackBy: trackUpdate" [filterConfig]="filterConfig" [filterValue]="value" [inPlaceSearch]="inPlaceSearch"></ds-search-facet-range-option>
           </div>
         </ng-container>
-        <button (click)="onSubmit()" class="btn btn-primary">
+        <button (click)="onSubmit()" class="btn btn-primary" role="button" tabindex="0">
           {{'search.filters.search.submit' | translate}}
         </button>
     </div>

src/app/shared/search/search-filters/search-filter/search-text-filter/search-text-filter.component.html

@@ -8,11 +8,11 @@
         </ng-container>
         <div class="clearfix toggle-more-filters">
             <a class="float-left" *ngIf="!(isLastPage$ | async)"
-               (click)="showMore()" href="javascript:void(0);">
+               (click)="showMore()" href="javascript:void(0);" role="button" tabindex="0">
               {{"search.filters.filter.show-more" | translate}}
             </a>
             <a class="float-right" *ngIf="(currentPage | async) > 1"
-               (click)="showFirstPageOnly()" href="javascript:void(0);">
+               (click)="showFirstPageOnly()" href="javascript:void(0);" role="button" tabindex="0">
               {{"search.filters.filter.show-less" | translate}}
             </a>
         </div>

src/app/shared/search/search-results/search-results.component.html

@@ -32,7 +32,7 @@
     {{ 'search.results.no-results' | translate }}
     <a [routerLink]="['/search']"
        [queryParams]="{ query: surroundStringWithQuotes(searchConfig?.query) }"
-       queryParamsHandling="merge">
+       queryParamsHandling="merge" role="link" tabindex="0">
         {{"search.results.no-results-link" | translate}}
     </a>
 </div>

src/app/shared/starts-with/date/starts-with-date.component.html

@@ -27,7 +27,7 @@
     <div class="form-group input-group col-12 col-md-6 pt-1 pt-md-0">
       <input class="form-control" placeholder="{{'browse.startsWith.type_date' | translate}}" [attr.aria-label]="'browse.startsWith.type_date.label' |translate" type="text" name="startsWith" formControlName="startsWith" [value]="getStartsWith() ? getStartsWith() : ''" />
       <span class="input-group-append">
-        <button class="btn btn-primary" type="submit"><i class="fas fa-book-open"></i> {{'browse.startsWith.submit' | translate}}</button>
+        <button class="btn btn-primary" type="submit" role="button" tabindex="0"><i class="fas fa-book-open"></i> {{'browse.startsWith.submit' | translate}}</button>
       </span>
     </div>
   </div>

src/app/shared/starts-with/text/starts-with-text.component.html

@@ -4,7 +4,7 @@
     <div class="form-group input-group col-sm-12 col-md-6 col-auto">
       <input class="form-control" [attr.aria-label]="'browse.startsWith.input' | translate" placeholder="{{'browse.search-form.placeholder' | translate}}" type="text" name="startsWith" formControlName="startsWith" [value]="getStartsWith()" />
       <span class="input-group-append">
-        <button class="btn btn-primary" type="submit"><i class="fas fa-book-open"></i> {{'browse.startsWith.submit' | translate}}</button>
+        <button class="btn btn-primary" type="submit" role="button" tabindex="0"><i class="fas fa-book-open"></i> {{'browse.startsWith.submit' | translate}}</button>
       </span>
     </div>
   </div>

src/app/shared/truncatable/truncatable-part/truncatable-part.component.html

@@ -10,6 +10,7 @@
     (keyup.Space)="toggle()"
     role="button"
     [attr.aria-expanded]="isExpanded"
+    tabindex="0"
   >
     <i class="fas {{isExpanded ? 'fa-angle-up' : 'fa-angle-down'}}"></i>
     <span class="ml-1">{{ 'item.truncatable-part.show-' + (isExpanded ? 'less' : 'more') | translate }}</span>

src/themes/dspace/app/header/header.component.html

@@ -5,7 +5,7 @@
          [attr.role]="(isMobile$ | async) ? 'navigation' : 'presentation'"
          [attr.aria-label]="(isMobile$ | async) ? ('nav.main.description' | translate) : null"
          class="h-100 flex-fill d-flex flex-row flex-nowrap justify-content-start align-items-center gapx-3">
-      <a class="d-block my-2 my-md-0" routerLink="/home" [attr.aria-label]="'home.title' | translate">
+      <a class="d-block my-2 my-md-0" routerLink="/home" [attr.aria-label]="'home.title' | translate" role="button" tabindex="0">
         <img id="header-logo" src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
       </a>
       <nav *ngIf="!(isMobile$ | async)" class="navbar navbar-expand p-0 align-items-stretch align-self-stretch" id="desktop-navbar" [attr.aria-label]="'nav.main.description' | translate">

src/themes/dspace/app/home-page/home-news/home-news.component.html

@@ -19,7 +19,7 @@
           handle.net and DataCite DOI
         </li>
       </ul>
-      <p>Join an international community of <a href="https://wiki.lyrasis.org/display/DSPACE/DSpace+Positioning" target="_blank">leading institutions using DSpace</a>.</p>
+      <p>Join an international community of <a href="https://wiki.lyrasis.org/display/DSPACE/DSpace+Positioning" target="_blank" role="link" tabindex="0">leading institutions using DSpace</a>.</p>
       <p>The test user accounts below have their password set to the name of this
         software in lowercase.</p>
       <ul>
@@ -35,5 +35,5 @@
     <source type="image/jpg" srcset="assets/dspace/images/banner.jpg 2000w, assets/dspace/images/banner-half.jpg 1200w, assets/dspace/images/banner-tall.jpg 768w">
     <img alt="" [src]="'assets/dspace/images/banner.jpg'"/><!-- without the []="''" Firefox downloads both the fallback and the resolved image -->
   </picture>
-  <small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages">@inspiredimages</a></small>
+  <small class="credits">Photo by <a href="https://www.pexels.com/@inspiredimages" role="link" tabindex="0">@inspiredimages</a></small>
 </div>