Merge pull request #4335 from alexandrevryghem/w2p-130479_fix-accessibility-issues-for-the-language-toggle-and-recent-submissions_contribute-main

Improve accessibility for screen readers
2025-10-07 10:04:11 +00:00 · 2025-05-14 16:41:03 -05:00
parent ebd69c04e8 aba3a9439d
commit 98da22047a
36 changed files with 155 additions and 109 deletions
--- a/cypress/e2e/header.cy.ts
+++ b/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');
  });
 });
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html
@@ -7,7 +7,7 @@
      <a
        [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" tabindex="-1">
        <div>
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
          </ds-thumbnail>
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html
@@ -7,7 +7,7 @@
      <a
        [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" tabindex="-1">
        <div>
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
          </ds-thumbnail>
--- a/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html
@@ -7,7 +7,7 @@
      <a
        [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" tabindex="-1">
        <div>
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
          </ds-thumbnail>
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html
@@ -4,7 +4,7 @@
      @if (linkType !== linkTypes.None) {
        <a [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" tabindex="-1">
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
          </ds-thumbnail>
        </a>
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html
@@ -4,7 +4,7 @@
      @if (linkType !== linkTypes.None) {
        <a [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" tabindex="-1">
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
          </ds-thumbnail>
        </a>
--- a/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html
+++ b/src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html
@@ -3,7 +3,7 @@
    <div class="col-3 col-md-2">
      @if (linkType !== linkTypes.None) {
        <a [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" tabindex="-1">
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
          </ds-thumbnail>
        </a>
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html
@@ -7,7 +7,7 @@
      <a
        [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" tabindex="-1">
        <div>
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
          </ds-thumbnail>
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html
@@ -7,7 +7,7 @@
      <a
        [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" tabindex="-1">
        <div>
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
          </ds-thumbnail>
--- a/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html
+++ b/src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html
@@ -7,7 +7,7 @@
      <a
        [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" tabindex="-1">
        <div>
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
          </ds-thumbnail>
--- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.html
+++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.html
@@ -4,7 +4,7 @@
      @if (linkType !== linkTypes.None) {
        <a [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" tabindex="-1">
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
            [defaultImage]="'assets/images/orgunit-placeholder.svg'"
            [alt]="'thumbnail.orgunit.alt'"
--- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.html
+++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.html
@@ -4,7 +4,7 @@
      @if (linkType !== linkTypes.None) {
        <a [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" tabindex="-1">
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
            [defaultImage]="'assets/images/person-placeholder.svg'"
            [alt]="'thumbnail.person.alt'"
--- a/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html
+++ b/src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html
@@ -4,7 +4,7 @@
      @if (linkType !== linkTypes.None) {
        <a [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" tabindex="-1">
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async"
            [defaultImage]="'assets/images/project-placeholder.svg'"
            [alt]="'thumbnail.project.alt'"
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -5,12 +5,14 @@
        <img src="assets/images/dspace-logo.svg" [attr.alt]="'menu.header.image.logo' | translate"/>
      </a>

-      <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
+      <div class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
        <ds-search-navbar></ds-search-navbar>
+        <div role="toolbar" [attr.aria-label]="'nav.user.description' | translate">
          <ds-lang-switch></ds-lang-switch>
          <ds-context-help-toggle></ds-context-help-toggle>
          <ds-auth-nav-menu></ds-auth-nav-menu>
          <ds-impersonate-navbar></ds-impersonate-navbar>
+        </div>
        @if (isMobile$ | async) {
          <div class="ps-2">
            <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"
@@ -20,7 +22,7 @@
            </button>
          </div>
        }
-      </nav>
+      </div>
    </div>
  </div>
 </header>
--- a/src/app/header/header.component.scss
+++ b/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;
--- a/src/app/home-page/recent-item-list/recent-item-list.component.html
+++ b/src/app/home-page/recent-item-list/recent-item-list.component.html
@@ -3,13 +3,17 @@
    <div class="mt-4" [ngClass]="placeholderFontClass" @fadeIn>
      <div class="d-flex flex-row border-bottom mb-4 pb-4"></div>
      <h2> {{ 'home.recent-submissions.head' | translate }}</h2>
+      <ul class="list-unstyled m-0 p-0">
        @for (item of itemRD?.payload?.page; track item) {
-        <div class="my-4">
+          <li class="my-4">
            <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
            </ds-listable-object-component-loader>
-        </div>
+          </li>
        }
-      <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4 float-start ng-tns-c290-40" role="button" tabindex="0"> {{'vocabulary-treeview.load-more' | translate }} ...</button>
+      </ul>
+      <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4 float-start" role="link" tabindex="0">
+        {{ 'vocabulary-treeview.load-more' | translate }} ...
+      </button>
    </div>
  }
  @if (itemRD?.hasFailed) {
--- a/src/app/navbar/navbar.component.html
+++ b/src/app/navbar/navbar.component.html
@@ -9,7 +9,7 @@
        @if ((isMobile$ | async) && (isAuthenticated$ | async)) {
          <ds-user-menu [inExpandableNavbar]="true"></ds-user-menu>
        }
-        <div class="navbar-nav align-items-md-center me-auto shadow-none gapx-3">
+        <div class="navbar-nav align-items-md-center me-auto shadow-none gapx-3" role="menubar">
          @for (section of (sections | async); track section) {
            <ng-container
            *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -1,20 +1,25 @@
+@let isAuthenticated = (isAuthenticated$ | async);
@if ((isMobile$ | async) !== true) {
  <div class="navbar-nav me-auto" data-test="auth-nav">
-    @if ((isAuthenticated | async) !== true && (showAuth | async)) {
+    @let showAuth = (showAuth$ | async);
+    @if (isAuthenticated !== true && showAuth) {
      <div
        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"
+          <button class="dropdownLogin btn btn-link px-0" [attr.aria-label]="'nav.login' |translate"
                  (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly"
-            role="menuitem"
+                  role="button"
                  tabindex="0"
                  aria-haspopup="menu"
                  aria-controls="loginDropdownMenu"
                  [attr.aria-expanded]="loginDrop.isOpen()"
-          ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
+                  ngbDropdownToggle>
+            {{ 'nav.login' | translate }}
+          </button>
          <div id="loginDropdownMenu" [ngClass]="{'ps-3 pe-3': (loading | async)}" ngbDropdownMenu
-            role="menu"
+               role="dialog"
+               aria-modal="true"
            [attr.aria-label]="'nav.login' | translate">
            <ds-log-in
            [isStandalonePage]="false"></ds-log-in>
@@ -22,19 +27,20 @@
        </div>
      </div>
    }
-    @if ((isAuthenticated | async) && (showAuth | async)) {
+    @if (isAuthenticated && showAuth) {
      <div class="nav-item">
        <div ngbDropdown #loggedInDrop="ngbDropdown" display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-          <a href="javascript:void(0);"
-            role="menuitem"
+          <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 px-1"
+            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></a>
+            <i class="fas fa-user-circle fa-lg fa-fw"></i>
+          </button>
          <div id="logoutDropdownMenu" ngbDropdownMenu>
            <ds-user-menu [inExpandableNavbar]="false" (changedRoute)="loggedInDrop.close()"></ds-user-menu>
          </div>
@@ -44,20 +50,17 @@
  </div>
 } @else {
  <div data-test="auth-nav">
-      @if ((isAuthenticated | async) !== true) {
-        <a routerLink="/login" routerLinkActive="active" class="loginLink px-0.5" role="button" tabindex="0">
-          {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
-        </a>
-      }
-      @if ((isAuthenticated | async)) {
-        <a role="button" [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="logoutLink px-1" role="button" tabindex="0">
+    @if (isAuthenticated === true) {
+      <a [attr.aria-label]="'nav.logout' |translate" [title]="'nav.logout' | translate" routerLink="/logout" routerLinkActive="active" class="logoutLink px-0" role="link" tabindex="0">
        <i class="fas fa-sign-out-alt fa-lg fa-fw"></i>
        <span class="sr-only">(current)</span>
      </a>
+    } @else {
+      <a routerLink="/login" routerLinkActive="active" class="loginLink px-0" role="link" tabindex="0">
+        {{ 'nav.login' | translate }}<span class="sr-only">(current)</span>
+      </a>
    }
  </div>
 }

-
-
 <!-- Do not use ul/li in this menu as it breaks e2e accessibility tests -->
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
@@ -28,3 +28,7 @@
    box-shadow: unset;
  }
 }
+
+.dropdown-toggle::after {
+  margin-left: 0;
+}
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.ts
@@ -64,7 +64,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.
@@ -74,7 +74,7 @@ export class AuthNavMenuComponent implements OnInit {

  public isMobile$: Observable<boolean>;

-  public showAuth = observableOf(false);
+  public showAuth$ = observableOf(false);

  public user: Observable<EPerson>;

@@ -89,14 +89,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)
--- a/src/app/shared/lang-switch/lang-switch.component.html
+++ b/src/app/shared/lang-switch/lang-switch.component.html
@@ -1,25 +1,29 @@
@if (moreThanOneLanguage) {
  <div ngbDropdown class="navbar-nav" display="dynamic" placement="bottom-right">
-    <a href="javascript:void(0);" role="menuitem"
+    <button role="button"
            [attr.aria-label]="'nav.language' |translate"
            aria-controls="language-menu-list"
            aria-haspopup="menu"
+            class="dropdown-toggle btn btn-link px-0"
            [title]="'nav.language' | translate"
            (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">
+    </button>
+    <div ngbDropdownMenu class="dropdown-menu" [attr.aria-label]="'nav.language' |translate" id="language-menu-list"
+         role="listbox">
      @for (lang of translate.getLangs(); track lang) {
-        <li class="dropdown-item" tabindex="0" #langSelect
-          role="menuitem"
+        <div class="dropdown-item" tabindex="0"
+             role="option"
+             [lang]="lang"
             (keyup.enter)="useLang(lang)"
             (click)="useLang(lang)"
+             [attr.aria-selected]="lang === translate.currentLang"
             [class.active]="lang === translate.currentLang">
          {{ langLabel(lang) }}
-        </li>
-      }
-    </ul>
+        </div>
+      }
+    </div>
  </div>
 }
--- a/src/app/shared/lang-switch/lang-switch.component.spec.ts
+++ b/src/app/shared/lang-switch/lang-switch.component.spec.ts
@@ -128,7 +128,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', () => {
--- a/src/app/shared/log-in/methods/password/log-in-password.component.html
+++ b/src/app/shared/log-in/methods/password/log-in-password.component.html
@@ -35,11 +35,11 @@
    <div class="mt-2">
      @if (canRegister$ | async) {
        <a class="dropdown-item" [routerLink]="[getRegisterRoute()]"
-        [attr.data-test]="'register' | dsBrowserOnly" role="menuitem" tabindex="0">{{"login.form.new-user" | translate}}</a>
+        [attr.data-test]="'register' | dsBrowserOnly" tabindex="0">{{"login.form.new-user" | translate}}</a>
      }
      @if (canForgot$ | async) {
        <a class="dropdown-item" [routerLink]="[getForgotRoute()]"
-        [attr.data-test]="'forgot' | dsBrowserOnly" role="menuitem" tabindex="0">{{"login.form.forgot-password" | translate}}</a>
+        [attr.data-test]="'forgot' | dsBrowserOnly" tabindex="0">{{"login.form.forgot-password" | translate}}</a>
      }
    </div>
  }
--- a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.html
@@ -1,5 +1,10 @@
@if (showAccessStatus) {
-  @if ({ status: accessStatus$ | async, date: embargoDate$ | async }; as accessStatus) {
-    <span [class]="'badge bg-secondary dont-break-out access-status-list-element-badge ' + accessStatusClass">{{ accessStatus.status | translate: {date: accessStatus.date} }}</span>
+  @if ((accessStatus$ | async); as status) {
+    @let date = embargoDate$ | async;
+    <span [class]="'badge bg-secondary dont-break-out access-status-list-element-badge ' + accessStatusClass">
+      <span class="sr-only">{{ 'listelement.badge.access-status' | translate }}</span>
+      {{ status | translate: { date: date } }}
+      <span class="sr-only">, </span>
+    </span>
  }
 }
--- a/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.spec.ts
+++ b/src/app/shared/object-collection/shared/badges/access-status-badge/access-status-badge.component.spec.ts
@@ -19,7 +19,7 @@ import { TruncatePipe } from '../../../../utils/truncate.pipe';
 import { AccessStatusObject } from './access-status.model';
 import { AccessStatusBadgeComponent } from './access-status-badge.component';

-describe('ItemAccessStatusBadgeComponent', () => {
+describe('AccessStatusBadgeComponent', () => {
  let component: AccessStatusBadgeComponent;
  let fixture: ComponentFixture<AccessStatusBadgeComponent>;

@@ -100,17 +100,17 @@ describe('ItemAccessStatusBadgeComponent', () => {

  function lookForAccessStatusBadgeForItem(status: string) {
    const badge = fixture.debugElement.query(By.css('span.badge'));
-    expect(badge.nativeElement.textContent).toEqual(`access-status.${status.toLowerCase()}.listelement.badge`);
+    expect(badge.nativeElement.textContent).toContain(`access-status.${status.toLowerCase()}.listelement.badge`);
  }

  function lookForAccessStatusBadgeForBitstream() {
    const badge = fixture.debugElement.query(By.css('span.badge'));
-    expect(badge.nativeElement.textContent).toEqual(`embargo.listelement.badge`);
+    expect(badge.nativeElement.textContent).toContain('embargo.listelement.badge');
  }

  function lookForNoAccessStatusBadgeForBitstream() {
    const badge = fixture.debugElement.query(By.css('span.badge'));
-    expect(badge.nativeElement.textContent).toEqual(``);
+    expect(badge).toBeNull();
  }

  describe('init with item', () => {
--- a/src/app/shared/object-collection/shared/badges/my-dspace-status-badge/my-dspace-status-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/my-dspace-status-badge/my-dspace-status-badge.component.html
@@ -1,5 +1,7 @@
 <div>
  <span [className]="badgeClass">
+    <span class="sr-only">{{ 'mydspace.status' | translate }}</span>
    {{('mydspace.status.' + badgeContent) | translate}}
+    <span class="sr-only">, </span>
  </span>
 </div>
--- a/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/status-badge/status-badge.component.html
@@ -1,10 +1,16 @@
@if (privateBadge) {
  <div class="private-badge">
-    <span class="badge bg-danger">{{ "item.badge.private" | translate }}</span>
+    <span class="badge bg-danger">
+        <span class="sr-only">{{ 'item.badge.status' | translate }}</span>
+      {{ "item.badge.private" | translate }}
+      <span class="sr-only">, </span>
+ </span>
  </div>
 }
@if (withdrawnBadge) {
  <div class="withdrawn-badge">
+    <span class="sr-only">{{ 'item.badge.status' | translate }}</span>
    <span class="badge bg-warning">{{ "item.badge.withdrawn" | translate }}</span>
+    <span class="sr-only">, </span>
  </div>
 }
--- a/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html
+++ b/src/app/shared/object-collection/shared/badges/type-badge/type-badge.component.html
@@ -1,5 +1,7 @@
@if (typeMessage) {
  <span>
+    <span class="sr-only">{{ 'listelement.badge.dso-type' | translate }}</span>
    <span class="badge bg-info">{{ typeMessage | translate }}</span>
+    <span class="sr-only">, </span>
  </span>
 }
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -1,6 +1,6 @@
 <div class="card">
  @if (linkType !== linkTypes.None) {
-    <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/', dso.id]" class="card-img-top" [attr.title]="'search.results.view-result' | translate">
+    <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/collections/', dso.id]" class="card-img-top" tabindex="-1" [attr.title]="'search.results.view-result' | translate">
      <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
      </ds-thumbnail>
    </a>
--- a/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html
@@ -1,6 +1,6 @@
 <div class="card">
  @if (linkType !== linkTypes.None) {
-    <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/communities/', dso.id]" class="card-img-top" [attr.title]="'search.results.view-result' | translate">
+    <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="['/communities/', dso.id]" class="card-img-top" tabindex="-1" [attr.title]="'search.results.view-result' | translate">
      <ds-thumbnail [thumbnail]="(dso.logo | async)?.payload" [limitWidth]="false">
      </ds-thumbnail>
    </a>
--- a/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/item-search-result/item/item-search-result-grid-element.component.html
@@ -4,7 +4,7 @@
  </div>
  @if (linkType !== linkTypes.None) {
    <a [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" tabindex="-1" [attr.title]="'search.results.view-result' | translate">
      <div>
        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
        </ds-thumbnail>
--- a/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html
+++ b/src/app/shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component.html
@@ -3,7 +3,7 @@
    <div class="col-3 col-md-2">
      @if (linkType !== linkTypes.None) {
        <a [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
-          [routerLink]="[itemPageRoute]" class="dont-break-out" role="button" tabindex="0">
+          [routerLink]="[itemPageRoute]" class="dont-break-out" tabindex="-1">
          <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="true">
          </ds-thumbnail>
        </a>
--- a/src/app/submission/import-external/submission-import-external.component.html
+++ b/src/app/submission/import-external/submission-import-external.component.html
@@ -32,7 +32,7 @@
              <ds-loading
              message="{{'loading.search-results' | translate}}"></ds-loading>
            }
-            @if ((isLoading$ | async) !== true && entriesRD?.payload?.page?.length === 0) {
+            @if ((isLoading$ | async) !== true && entriesRD?.payload?.page?.length === 0 && routeData?.query?.length > 0) {
              <div data-test="empty-external-entry-list">
                <ds-alert [type]="AlertType.Info">{{ 'search.results.empty' | translate }}</ds-alert>
              </div>
--- a/src/app/submission/import-external/submission-import-external.component.spec.ts
+++ b/src/app/submission/import-external/submission-import-external.component.spec.ts
@@ -503,6 +503,12 @@ describe('SubmissionImportExternalComponent test suite', () => {
        if (param === 'entity') {
          return observableOf('Publication');
        }
+        if (param === 'query') {
+          return observableOf('test');
+        }
+        if (param === 'sourceId') {
+          return observableOf('pubmed');
+        }
        return observableOf({});
      });
      fixture.detectChanges();
--- a/src/assets/i18n/en.json5
+++ b/src/assets/i18n/en.json5
@@ -33,6 +33,8 @@

  "error-page.orcid.generic-error": "An error occurred during login via ORCID. Make sure you have shared your ORCID account email address with DSpace. If the error persists, contact the administrator",

+  "listelement.badge.access-status": "Access status:",
+
  "access-status.embargo.listelement.badge": "Embargo",

  "access-status.metadata.only.listelement.badge": "Metadata only",
@@ -2251,6 +2253,8 @@

  "item.edit.authorizations.title": "Edit item's Policies",

+  "item.badge.status": "Item status:",
+
  "item.badge.private": "Non-discoverable",

  "item.badge.withdrawn": "Withdrawn",
@@ -3591,6 +3595,8 @@

  "mydspace.show.supervisedWorkspace": "Supervised items",

+  "mydspace.status": "My DSpace status:",
+
  "mydspace.status.mydspaceArchived": "Archived",

  "mydspace.status.mydspaceValidation": "Validation",
@@ -3655,6 +3661,8 @@

  "nav.user.description": "User profile bar",

+  "listelement.badge.dso-type": "Item type:",
+
  "none.listelement.badge": "Item",

  "publication-claim.title": "Publication claim",
--- a/src/themes/dspace/app/header/header.component.html
+++ b/src/themes/dspace/app/header/header.component.html
@@ -17,7 +17,7 @@
    <!-- Search bar and other menus -->
    <div id="header-right" class="h-100 d-flex flex-row flex-nowrap flex-shrink-0 justify-content-end align-items-center gapx-1 ms-auto">
      <ds-search-navbar></ds-search-navbar>
-      <div role="menubar" class="h-100 d-flex flex-row flex-nowrap align-items-center gapx-1">
+      <div role="toolbar" class="h-100 d-flex flex-row flex-nowrap align-items-center gapx-1">
        <ds-lang-switch></ds-lang-switch>
        <ds-context-help-toggle></ds-context-help-toggle>
        <ds-impersonate-navbar></ds-impersonate-navbar>