4 files changed, 20 insertions, 12 deletions

diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
index a0f65a3d9..c63b5b361 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.html
@@ -2,29 +2,29 @@
   <div class="position-relative me-3">
     <my-actor-avatar [actor]="actor" [actorType]="getActorType()" [previewImage]="preview" size="100"></my-actor-avatar>
 
-    <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
+    <div *ngIf="editable && !hasAvatar()" class="actor-img-edit-button button-focus-within" [ngbTooltip]="avatarFormat" placement="right" container="body">
       <my-global-icon iconName="upload"></my-global-icon>
       <label class="visually-hidden" for="avatarfile" i18n>Upload a new avatar</label>
       <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
     </div>
 
     <div *ngIf="editable && hasAvatar()" ngbDropdown placement="right">
-      <div class="actor-img-edit-button" ngbDropdownToggle>
+      <button type="button" class="actor-img-edit-button" ngbDropdownToggle>
         <my-global-icon iconName="edit"></my-global-icon>
         <label class="visually-hidden" for="avatarMenu" i18n>Change your avatar</label>
-      </div>
+      </button>
 
       <div ngbDropdownMenu>
-        <div class="dropdown-item c-hand dropdown-file" [ngbTooltip]="avatarFormat">
+        <div class="dropdown-item dropdown-file button-focus-within" [ngbTooltip]="avatarFormat">
           <my-global-icon iconName="upload"></my-global-icon>
           <span for="avatarfile" i18n>Upload a new avatar</span>
           <input #avatarfileInput type="file" name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
         </div>
 
-        <div class="dropdown-item c-hand" (click)="deleteAvatar()" (key.enter)="deleteAvatar()">
+        <button type="button" class="dropdown-item" (click)="deleteAvatar()" (key.enter)="deleteAvatar()">
           <my-global-icon iconName="delete"></my-global-icon>
           <span i18n>Remove avatar</span>
-        </div>
+        </button>
       </div>
 
     </div>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
index 01e2131ba..689c5873c 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss
@@ -39,6 +39,10 @@
   right: 5px;
 }
 
+.button-focus-within:focus-within {
+  box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
+}
+
 .dropdown-item {
   @include dropdown-with-icon-item;
 }
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
index d6fe37094..d4ddb2deb 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.html
@@ -4,25 +4,25 @@
       <img *ngIf="hasBanner()" [src]="preview || actor.bannerUrl" alt="Banner" />
     </div>
 
-    <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body">
+    <div *ngIf="!hasBanner()" class="actor-img-edit-button button-focus-within" [ngbTooltip]="bannerFormat" placement="right" container="body">
       <ng-container *ngTemplateOutlet="uploadNewBanner"></ng-container>
     </div>
 
     <div *ngIf="hasBanner()" ngbDropdown placement="right">
-      <div class="actor-img-edit-button" ngbDropdownToggle>
+      <button type="button" class="actor-img-edit-button" ngbDropdownToggle>
         <my-global-icon iconName="edit"></my-global-icon>
         <label for="bannerMenu" i18n>Change your banner</label>
-      </div>
+      </button>
 
       <div ngbDropdownMenu>
-        <div class="dropdown-item c-hand dropdown-file" [ngbTooltip]="bannerFormat">
+        <div class="dropdown-item dropdown-file button-focus-within" [ngbTooltip]="bannerFormat">
           <ng-container *ngTemplateOutlet="uploadNewBanner"></ng-container>
         </div>
 
-        <div class="dropdown-item c-hand" (click)="deleteBanner()" (key.enter)="deleteBanner()">
+        <button type="button" class="dropdown-item" (click)="deleteBanner()">
           <my-global-icon iconName="delete"></my-global-icon>
           <span i18n>Remove banner</span>
-        </div>
+        </button>
       </div>
     </div>
   </div>
diff --git a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
index b2c64fff7..8e5a05603 100644
--- a/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
+++ b/client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.scss
@@ -34,6 +34,10 @@
   }
 }
 
+.button-focus-within:focus-within {
+  box-shadow: #{$focus-box-shadow-form} pvar(--mainColorLightest);
+}
+
 .dropdown-item {
   @include dropdown-with-icon-item;
 }