diff --git a/roster2/tool/src/webapp/js/roster.js b/roster2/tool/src/webapp/js/roster.js
index 3cea52540dca..f66d887c0c00 100644
--- a/roster2/tool/src/webapp/js/roster.js
+++ b/roster2/tool/src/webapp/js/roster.js
@@ -832,10 +832,6 @@ roster.init = function () {
     error: () => console.error("failure retrieving search index data")
   });
 
-  document.addEventListener("profile-shown", () => {
-    document.querySelectorAll("sakai-user-photo").forEach(sup => sup.close());
-  });
-
   roster.switchState(roster.state, roster);
 };
 
diff --git a/webcomponents/tool/src/main/frontend/packages/sakai-user-photo/src/SakaiUserPhoto.js b/webcomponents/tool/src/main/frontend/packages/sakai-user-photo/src/SakaiUserPhoto.js
index 4db573ad35ec..7cb22905ca33 100644
--- a/webcomponents/tool/src/main/frontend/packages/sakai-user-photo/src/SakaiUserPhoto.js
+++ b/webcomponents/tool/src/main/frontend/packages/sakai-user-photo/src/SakaiUserPhoto.js
@@ -73,6 +73,7 @@ export class SakaiUserPhoto extends SakaiElement {
         new bootstrap.Popover(el, {
           content: sakaiProfile,
           html: true,
+          trigger: "focus",
         });
         el.addEventListener("show.bs.popover", () => {
 
@@ -95,8 +96,11 @@ export class SakaiUserPhoto extends SakaiElement {
       <div data-user-id="${this.userId}"
           class="sakai-user-photo ${this.classes}"
           data-bs-toggle="popover"
+          data-bs-trigger="focus"
           aria-label="${ifDefined(this.label)}"
           title="${ifDefined(this.label)}"
+          tabindex="0"
+          role="button"
           style="background-image:url(${this.url}) ${this.profilePopup === SakaiUserPhoto.OFF ? "" : ";cursor: pointer;"}">
         ${this.online ? html`
         <span></span>