[Port dspace-7_x] Improve accessibility for screen readers

cypress/e2e/header.cy.ts

@@ -15,24 +15,24 @@ describe('Header', () => {
         cy.visit('/');
 
         // Click the language switcher (globe) in header
-        cy.get('a[data-test="lang-switch"]').click();
+        cy.get('button[data-test="lang-switch"]').click();
         // Click on the "Deusch" language in dropdown
-        cy.get('#language-menu-list li').contains('Deutsch').click();
+        cy.get('#language-menu-list div[role="option"]').contains('Deutsch').click();
 
         // HTML "lang" attribute should switch to "de"
         cy.get('html').invoke('attr', 'lang').should('eq', 'de');
 
         // Login menu should now be in German
-        cy.get('a[data-test="login-menu"]').contains('Anmelden');
+        cy.get('[data-test="login-menu"]').contains('Anmelden');
 
         // Change back to English from language switcher
-        cy.get('a[data-test="lang-switch"]').click();
-        cy.get('#language-menu-list li').contains('English').click();
+        cy.get('button[data-test="lang-switch"]').click();
+        cy.get('#language-menu-list div[role="option"]').contains('English').click();
 
         // HTML "lang" attribute should switch to "en"
         cy.get('html').invoke('attr', 'lang').should('eq', 'en');
 
         // Login menu should now be in English
-        cy.get('a[data-test="login-menu"]').contains('Log In');
+        cy.get('[data-test="login-menu"]').contains('Log In');
     });
 });

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" role="link" tabindex="0">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="-1">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>

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" role="link" tabindex="0">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="-1">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>

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" role="link" tabindex="0">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="-1">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>

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" role="link" tabindex="0">
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out" role="link" tabindex="-1">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
       </ds-thumbnail>
     </a>

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" role="link" tabindex="0">
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out" role="link" tabindex="-1">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
       </ds-thumbnail>
     </a>

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" role="link" tabindex="0">
+       [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out" role="link" tabindex="-1">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
       </ds-thumbnail>
     </a>

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" role="link" tabindex="0">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="-1">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>

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" role="link" tabindex="0">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="-1">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>

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" role="link" tabindex="0">
+       class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate" role="link" tabindex="-1">
       <div>
         <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-themed-thumbnail>

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" role="link" tabindex="0">
+           [routerLink]="[itemPageRoute]" class="dont-break-out" role="link" tabindex="-1">
             <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
                           [defaultImage]="'assets/images/orgunit-placeholder.svg'"
                           [alt]="'thumbnail.orgunit.alt'"

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" role="link" tabindex="0">
+       [routerLink]="[itemPageRoute]" class="dont-break-out" role="link" tabindex="-1">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
                     [defaultImage]="'assets/images/person-placeholder.svg'"
                     [alt]="'thumbnail.person.alt'"

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" role="link" tabindex="0">
+       [routerLink]="[itemPageRoute]" class="dont-break-out" role="link" tabindex="-1">
       <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
                     [defaultImage]="'assets/images/project-placeholder.svg'"
                     [alt]="'thumbnail.project.alt'"

src/app/header/header.component.scss

@@ -23,7 +23,7 @@
     }
   }
 
-  .navbar {
+  .navbar, div[role="toolbar"] {
     display: flex;
     gap: calc(var(--bs-spacer) / 3);
     align-items: center;

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

@@ -2,11 +2,15 @@
         <div class="mt-4" [ngClass]="placeholderFontClass" *ngIf="itemRD?.hasSucceeded && itemRD?.payload?.page.length > 0" @fadeIn>
                 <div class="d-flex flex-row border-bottom mb-4 pb-4"></div>
                 <h2> {{'home.recent-submissions.head' | translate}}</h2>
-                <div class="my-4" *ngFor="let item of itemRD?.payload?.page">
-                        <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" role="button" tabindex="0"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
+                <ul class="list-unstyled m-0 p-0">
+                  <li class="my-4" *ngFor="let item of itemRD?.payload?.page">
+                    <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
+                    </ds-listable-object-component-loader>
+                  </li>
+                </ul>
+                <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4" role="link" 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/navbar/navbar.component.html

@@ -7,9 +7,9 @@
     <div class="w-100">
       <div id="collapsingNav">
         <ng-container *ngIf="(isMobile$ | async) && (isAuthenticated$ | async)">
-          <ds-themed-user-menu [inExpandableNavbar]="true"></ds-themed-user-menu>
+          <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
         </ng-container>
-        <div class="navbar-nav align-items-md-center mr-auto shadow-none gapx-3">
+        <div class="navbar-nav align-items-md-center mr-auto shadow-none gapx-3" role="menubar">
           <ng-container *ngFor="let section of (sections | async)">
             <ng-container
               *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>

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

@@ -1,50 +1,56 @@
 <div class="navbar-nav mr-auto" *ngIf="!(isMobile$ | async); else mobileButtons" data-test="auth-nav">
-  <div *ngIf="!(isAuthenticated | async) && (showAuth | async)"
-      class="nav-item"
-      (click)="$event.stopPropagation();">
-    <div ngbDropdown #loginDrop="ngbDropdown" display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <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()"
-         ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
+  <div *ngIf="!(isAuthenticated$ | async) && showAuth$ | async"
+       class="nav-item"
+       (click)="$event.stopPropagation();">
+    <div ngbDropdown #loginDrop="ngbDropdown" display="dynamic" placement="bottom-right" class="d-inline-block"
+         @fadeInOut>
+      <button class="dropdownLogin btn btn-link px-0" [attr.aria-label]="'nav.login' |translate"
+              (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly"
+              role="button"
+              tabindex="0"
+              aria-haspopup="menu"
+              aria-controls="loginDropdownMenu"
+              [attr.aria-expanded]="loginDrop.isOpen()"
+              ngbDropdownToggle>
+        {{ 'nav.login' | translate }}
+      </button>
       <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
-           role="menu"
+           role="dialog"
+           aria-modal="true"
            [attr.aria-label]="'nav.login' | translate">
         <ds-themed-log-in
           [isStandalonePage]="false"></ds-themed-log-in>
       </div>
     </div>
   </div>
-  <div *ngIf="(isAuthenticated | async) && (showAuth | async)" class="nav-item">
+  <div *ngIf="(isAuthenticated$ | async) && showAuth$ | async" class="nav-item">
     <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"
-         class="dropdownLogout px-1"
-         [attr.data-test]="'user-menu' | dsBrowserOnly"
-         ngbDropdownToggle>
-        <i class="fas fa-user-circle fa-lg fa-fw"></i></a>
+      <button
+        role="button"
+        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"
+        class="dropdownLogout btn btn-link px-0"
+        [attr.data-test]="'user-menu' | dsBrowserOnly"
+        ngbDropdownToggle>
+        <i class="fas fa-user-circle fa-lg fa-fw"></i></button>
       <div id="logoutDropdownMenu" ngbDropdownMenu>
-        <ds-themed-user-menu [inExpandableNavbar]="false"></ds-themed-user-menu>
+        <ds-user-menu [inExpandableNavbar]="false"></ds-user-menu>
       </div>
     </div>
   </div>
 </div>
-
-
 <ng-template #mobileButtons>
   <div data-test="auth-nav">
-    <a *ngIf="!(isAuthenticated | async)" routerLink="/login" routerLinkActive="active" class="loginLink px-0.5" role="button" tabindex="0">
+    <a *ngIf="!(isAuthenticated$ | async)" routerLink="/login" routerLinkActive="active" class="loginLink px-0.5"
+       role="link"
+       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" tabindex="0">
+    <a *ngIf="(isAuthenticated$ | async)" role="link" [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/auth-nav-menu/auth-nav-menu.component.scss

@@ -28,3 +28,7 @@
     box-shadow: unset;
   }
 }
+
+.dropdown-toggle::after {
+  margin-left: 0;
+}

src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts

@@ -252,7 +252,7 @@ describe('AuthNavMenuComponent', () => {
           component = null;
         });
         it('should render UserMenuComponent component', () => {
-          const logoutDropdownMenu = deNavMenuItem.query(By.css('ds-themed-user-menu'));
+          const logoutDropdownMenu = deNavMenuItem.query(By.css('ds-user-menu'));
           expect(logoutDropdownMenu.nativeElement).toBeDefined();
         });
       });

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

@@ -24,7 +24,7 @@ export class AuthNavMenuComponent implements OnInit {
    * Whether user is authenticated.
    * @type {Observable<string>}
    */
-  public isAuthenticated: Observable<boolean>;
+  public isAuthenticated$: Observable<boolean>;
 
   /**
    * True if the authentication is loading.
@@ -34,7 +34,7 @@ export class AuthNavMenuComponent implements OnInit {
 
   public isMobile$: Observable<boolean>;
 
-  public showAuth = observableOf(false);
+  public showAuth$ = observableOf(false);
 
   public user: Observable<EPerson>;
 
@@ -49,14 +49,14 @@ export class AuthNavMenuComponent implements OnInit {
 
   ngOnInit(): void {
     // set isAuthenticated
-    this.isAuthenticated = this.store.pipe(select(isAuthenticated));
+    this.isAuthenticated$ = this.store.pipe(select(isAuthenticated));
 
     // set loading
     this.loading = this.store.pipe(select(isAuthenticationLoading));
 
     this.user = this.authService.getAuthenticatedUserFromStore();
 
-    this.showAuth = this.store.pipe(
+    this.showAuth$ = this.store.pipe(
       select(routerStateSelector),
       filter((router: RouterReducerState) => isNotUndefined(router) && isNotUndefined(router.state)),
       map((router: RouterReducerState) => (!router.state.url.startsWith(LOGIN_ROUTE)

src/app/shared/lang-switch/lang-switch.component.html

@@ -1,21 +1,22 @@
 <div ngbDropdown class="navbar-nav" *ngIf="moreThanOneLanguage" display="dynamic" placement="bottom-right">
-  <a href="javascript:void(0);" role="menuitem"
-     [attr.aria-label]="'nav.language' |translate"
-     aria-controls="language-menu-list"
-     aria-haspopup="menu"
-     [title]="'nav.language' | translate"
-     (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
-     data-test="lang-switch"
-     tabindex="0">
+  <button role="button"
+          [attr.aria-label]="'nav.language' |translate"
+          aria-controls="language-menu-list"
+          aria-haspopup="menu"
+          [title]="'nav.language' | translate" class="dropdown-toggle btn btn-link px-0"
+          (click)="$event.preventDefault()" data-toggle="dropdown" ngbDropdownToggle
+          data-test="lang-switch"
+          tabindex="0">
     <i class="fas fa-globe-asia fa-lg fa-fw"></i>
-  </a>
-  <ul ngbDropdownMenu class="dropdown-menu" [attr.aria-label]="'nav.language' |translate" id="language-menu-list" role="menu">
-    <li class="dropdown-item" tabindex="0" #langSelect *ngFor="let lang of translate.getLangs()"
-        role="menuitem"
-            (keyup.enter)="useLang(lang)"
-            (click)="useLang(lang)"
-            [class.active]="lang === translate.currentLang">
-                {{ langLabel(lang) }}
-    </li>
-  </ul>
+  </button>
+  <div ngbDropdownMenu class="dropdown-menu" role="listbox" [attr.aria-label]="'nav.language' |translate" id="language-menu-list">
+    <div class="dropdown-item" tabindex="0" role="option" #langSelect *ngFor="let lang of translate.getLangs()"
+         [lang]="lang"
+         (keyup.enter)="useLang(lang)"
+         (click)="useLang(lang)"
+         [attr.aria-selected]="lang === translate.currentLang"
+         [class.active]="lang === translate.currentLang">
+      {{ langLabel(lang) }}
+    </div>
+  </div>
 </div>

src/app/shared/lang-switch/lang-switch.component.spec.ts

@@ -109,7 +109,7 @@ describe('LangSwitchComponent', () => {
     }));
 
     it('should define the main A HREF in the UI', (() => {
-      expect(langSwitchElement.querySelector('a')).not.toBeNull();
+      expect(langSwitchElement.querySelector('button.dropdown-toggle')).not.toBeNull();
     }));
 
     describe('when selecting a language', () => {