From 4545b5354dcc1994b28435ccad95d64f9c328ed5 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Wed, 6 Dec 2023 02:03:44 +0100
Subject: [PATCH] Fixed Edit Item Bitstream  showing empty buttons when css is
 turned off & replaced authentication dropdown menu link with button

- Also fixed box-shadows not working the same way for all footer buttons/links
---
 src/app/footer/footer.component.html                  |  6 +++---
 src/app/footer/footer.component.scss                  |  9 +++++++++
 .../shared/auth-nav-menu/auth-nav-menu.component.html | 11 +++++++----
 .../shared/auth-nav-menu/auth-nav-menu.component.scss |  9 +++++++++
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index d4c0cd1a377..ac903929f6f 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -69,15 +69,15 @@ <h5 class="text-uppercase">Footer Content</h5>
           </button>
         </li>
         <li *ngIf="showPrivacyPolicy">
-          <a class="text-white"
+          <a class="btn text-white"
              routerLink="info/privacy">{{ 'footer.link.privacy-policy' | translate}}</a>
         </li>
         <li *ngIf="showEndUserAgreement">
-          <a class="text-white"
+          <a class="btn text-white"
              routerLink="info/end-user-agreement">{{ 'footer.link.end-user-agreement' | translate}}</a>
         </li>
         <li *ngIf="showSendFeedback$ | async">
-          <a class="text-white"
+          <a class="btn text-white"
              routerLink="info/feedback">{{ 'footer.link.feedback' | translate}}</a>
         </li>
       </ul>
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 4dfdc3267ba..f1a872c0994 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -30,6 +30,15 @@
             padding: 0 calc(var(--bs-spacer) / 2);
             color: inherit;
             font-size: .875em;
+
+            &:focus {
+              box-shadow: none;
+              text-decoration: underline;
+            }
+
+            &:focus-visible {
+              box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.5);
+            }
           }
 
           &:not(:last-child) {
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index eba37fa4160..a0623bdd90d 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -2,9 +2,11 @@
   <li *ngIf="!(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item"
       (click)="$event.stopPropagation();">
     <div ngbDropdown #loginDrop 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="btn btn-link dropdownLogin px-0.5" [attr.aria-label]="'nav.login' |translate"
          (click)="$event.preventDefault()" [attr.data-test]="'login-menu' | dsBrowserOnly"
-         ngbDropdownToggle>{{ 'nav.login' | translate }}</a>
+         ngbDropdownToggle>
+        {{ 'nav.login' | translate }}
+      </button>
       <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
            [attr.aria-label]="'nav.login' | translate">
         <ds-themed-log-in
@@ -19,8 +21,9 @@
   </li>
   <li *ngIf="(isAuthenticated | async) && !(isXsOrSm$ | async) && (showAuth | async)" class="nav-item">
     <div ngbDropdown display="dynamic" placement="bottom-right" class="d-inline-block" @fadeInOut>
-      <a href="javascript:void(0);" role="button" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (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" [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" (click)="$event.preventDefault()" [title]="'nav.user-profile-menu-and-logout' | translate" class="btn btn-link dropdownLogout px-1" [attr.data-test]="'user-menu' | dsBrowserOnly" ngbDropdownToggle>
+        <i class="fas fa-user-circle fa-lg fa-fw"></i>
+      </button>
       <div class="logoutDropdownMenu" ngbDropdownMenu [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate">
         <ds-themed-user-menu></ds-themed-user-menu>
       </div>
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
index 40e9113b009..ea64f7e74b9 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
@@ -19,3 +19,12 @@
     color: var(--ds-header-icon-color-hover);
   }
 }
+
+.dropdownLogin, .dropdownLogout {
+  &:not(:focus-visible).active,
+  &:not(:focus-visible):active,
+  &:not(:focus-visible).active:focus,
+  &:not(:focus-visible):active:focus {
+    box-shadow: unset;
+  }
+}